【プラグインなし】スクロールするとフワッと表示
- 備忘録
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’);
}
});
});