スクロールして要素が表示される位置に来ると、順番にふわっとフェードインして表示される仕組みです。
◆まずはデモページをご覧ください。
デモページを見る
HTML
<ul class="box delayScroll">
<li>順番に表示</li>
<li>順番に表示</li>
<li>順番に表示</li>
<li>順番に表示</li>
</ul>
</div>
<script src="js/jquery.js"></script>
<script src="js/anime.js"></script>
「js」ファイルを別で読み込みます。
「anime.js」で動きを制御します。
CSS
.box {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: 30px;
margin: 1000px 0 500px;
}
.box li {
color: #fff;
width: 150px;
text-align: center;
padding: 20px;
background: #666;
}
@media (max-width: 767px) {
.box {
flex-direction: column;
}
.box li {
width: 100%;
}
}
.fadeUp {
animation-name: fadeUpAnime;
animation-duration: 0.5s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeUpAnime {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
要素のデザインは適当なので、お好みで編集してください。
一応、簡単ですがレスポンシブにもしています。
anime.js
function delayScrollAnime() {
var time = 0.2;//表示する要素の遅延時間
var value = time;
$('.delayScroll').each(function () {
var parent = this;
var elemPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();/
var childs = $(this).children();
if (scroll >= elemPos - windowHeight && !$(parent).hasClass("play")) {
$(childs).each(function () {
if (!$(this).hasClass("fadeUp")) {
$(parent).addClass("play");
$(this).css("animation-delay", value + "s");
$(this).addClass("fadeUp");
value = value + time;
var index = $(childs).index(this);
if((childs.length-1) == index){
$(parent).removeClass("play");
}
}
})
}else {
$(childs).removeClass("fadeUp");
value = time;
}
})
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function (){
delayScrollAnime();
});
// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function(){
delayScrollAnime();
});
編集するところは2行目の「表示する要素の遅延時間」部分で、ここで順番に表示される時間を調整します。
その他はコピペで問題ありません。