ふわっと出す、css3アニメーションで簡単エフェクト。
<head>に掲載
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="xxxxx.js"></script>
jQueryの書き方
$(function(){
$(window).scroll(function (){
$('.fadein').each(function(){
var targetElement = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > targetElement - windowHeight + 200){
$(this).css('opacity','1');
$(this).css('transform','translateY(0)');
}
});
});
});
順番にjQueryの中身を見ていくと、$(function()｛｝はDOMの読み込みが終わったら中の処理をするという意味で、$(window).scroll(function ()｛｝はスクロール時にイベントを発動する意味になります。
以下の3行はスクロール時にイベントを発動するための位置情報になります。
- $(this).offset().topは、ターゲット要素の高さ
- $(window).scrollTop();は、スクロール位置（ページの一番上からディスプレイ上端）
- $(window).height();は、ウィンドウの高さ
そして、if (scroll > targetElement – windowHeight + 200){}で、要素をふわっと表示させたい位置を計算して条件で分岐。trueであれば、 $(this).css(‘opacity’,’1′);と$(this).css(‘transform’,’translateY(0)’);を実行させています。
ちなみに表示位置を変えたい場合は一番右の200という数字を変更してください。200はディスプレイ画面の下から200pxの位置ということになりますので、下から100pxの位置が良ければ100にしてください。
CSS
.fadein {
opacity : 0;
transform: translateY(20px);
transition: all 1s;
}
１秒間で20px下に移動する
HTML
<figure><img src="画像のURL" alt="" class="fadein"></figure>
引用：jQueryとCSSでスクロール時に画像を下からふわっと表示させる方法 + ネイティブ javascriptでの書き方も掲載！