【プラグインなし】スクロールするとフワッと表示

  • 備忘録

HTML

フワッと表示させたい要素にclassを付与。

class=”js-view”

CSS

.js-view {

transform: translateY(10px);

opacity: 0;

transition: transform 1.8s, opacity 1.8s;

&.show {

transform: translateY(0);

opacity: 1;

}

/*遅らせる場合*/

&.js-view-delay2 {

transition-delay: .3s;

}

&.js-view-delay3 {

transition-delay: .6s;

}

&.js-view-delay4 {

transition-delay: .9s;

}

}

JS

$(window).on(‘scroll’, function () {

$(‘.js-view’).each(function() {

var targetPosition = $(this).offset().top;

var scroll = $(window).scrollTop();

var windowHeight = $(window).height();

if (scroll > targetPosition – windowHeight) {

$(this).addClass(‘show’);

}

});

});

BLOG TOP

CONTACT

お問い合わせ

TEL

(0865) 66-0703

受付時間:平日 10:00-17:00

MAIL

お問合せフォームはこちらから

contact us