.fadein { opacity: 0; transform : translate(0, 50px); transition : all 1500ms; } .fadein.scrollin{ opacity: 1; transform: translate(0, 0); } $(window).scroll(function (){ $('.fadein').each(function(){ var elemPos = $(this).offset().top, scroll = $(window).scrollTop(), windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 100){ $(this).addClass('scrollin'); } }); }); 解説 htmlは見ての通