ウェブページをスクロールすると文字や画像がふわっと表示されたらなんとなくオシャレ。実装もjQueryを使って比較的かんたんにできます。
先にコードからどうぞ。
HTML
<div class="fade">
<img src="img/svg/....svg" alt="">
</div>
jQuery
jQuery(function ($) {
scroll_fade(); //ページ読み込み時
$(window).scroll(function () {
scroll_fade(); //スクロール時
});
function scroll_fade() { //関数
$('.fade').each(function () {
var POS = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > POS - windowHeight) {
$(this).addClass('fade_in').removeClass('fade');
}
});
}
});
CSS
.fade {
opacity: 0;
}
.fade_in {
-webkit-animation: fadeIn 1s forwards !important;
animation: fadeIn 1s forwards !important;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
ここまでスクロールすると、下の画像がふわっと出てくるはずです。

最初 .fade に対してopacity:0;を指定して消しておき、スクロールでアニメーションを付与したクラスをくっつけます。
はまった点:初期表示をdisplay:none;にするとアニメーションが意図通りにならない。display:none;からのopacityで表示はフェードがかからないので、初期表示はpacity:0;にする。
今回は最初のスクロールのとき一度だけふわっとさせたいだけなので、
jQueryの関数内で.fadeを外してしまいます。
そうでないと.fadeがあるかぎりずっと関数が働いてしまうので、パフォーマンスが良く無い。。と、ベテランの方から教えていただきました!
スクロールイベントは少しでも少なくしたいですもんね。参考になります^0^