スクロールエフェクトいろいろ
作ったスクロールエフェクトを集めました。
スクロールすると要素が出現します。
スクロール値によってjsでクラス’is_visible’をつけています。
そのあとのアニメーションはすべてcssです。
See the Pen 180727_スクロールエフェクトいろいろカタログ by nekuta (@nekuta) on CodePen.
js(jQuery)
var tgt = $('.ef');
//loadとscrollしたとき
$(window).on('load scroll', function () {
var wh = $(window).height();
var sc = $(window).scrollTop();
var action = function () {
//.efのある分だけまわす
tgt.each(function () {
var border = $(this).offset().top;
if (sc > border - wh + 100) {
$(this).addClass('is_visible');
}
});
}; action();
});
