フェードインの実装
要素をフェードイン等させたい場合、wow.jsを使えば簡単に実装できます。
ただ、pcはそのままでspだけ実装したい場合、wow.jsは使いにくいので下記のjQueryとcssで実装するとよいです。
$(function(){
$(window).scroll(function (){
$('.fadein').each(function(){
let elemPos = $(this).offset().top;
let scroll = $(window).scrollTop();
let windowHeight = $(window).height();
if (scroll > elemPos - windowHeight + 100){
$(this).addClass('js-scroll');
}
});
});
});
@media screen and (max-width: 768px){
.fadein{
opacity: 0;
transform: translateY(100px);
transition: transform 1s, opacity 1s;
}
.fadein.js-scroll{
opacity: 1;
transform: translateY(0);
}
}
<div class="fadein">フェードイン要素</div>
コメントを残す
コメントを投稿するにはログインしてください。