Posted at

Windowスクロールでふわっと出現するアレ

More than 1 year has passed since last update.

ブラウザスクロールでふわっと出現する視覚効果をJS単体のみで書きました。

都度書くのは面倒なのでスニペット的な備忘録です。

ちなみにjQueryを使ってます。

var setTransitionFlg = false;

$(function(){
$(".effect").each(function(index, element){
$(element).css("opacity", "0");
$(element).css("transform", "translate(0, 50px)");
$(element).css("-webkit-transform", "translate(0, 50px)");
});
});

$(window).scroll(function(){
$(".effect").each(function(index, element){
if (!setTransitionFlg) {
$(element).css("transition", "all 500ms 0s ease-out");
}
var position = $(element).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (position - windowHeight < scroll - 120) {
$(element).css("opacity", "1.0");
$(element).css("transform", "translate(0, 0)");
$(element).css("-webkit-transform", "translate(0, 0)");
}
});
setTransitionFlg = true;
});

class="effect" としたところがふわっとなります。

以上