【jQuery】可視領域に入ると下からふわっと表示させるアニメーション

2022.10.18

【jQuery】可視領域に入ると下からふわっと表示させるアニメーション

スライドインだけならCSSで出来ますが、CSSではページが表示されたと同時にふわっと表示されてしまい、スクロールしてもすでにアニメーションは終わってしまっています。
そこで今回は、スクロールして要素が可視領域に入るとふわっと表示されるアニメーションをご紹介します。

CSSでのアニメーションはこちら
【CSS】上下左右からスライドインするアニメーション

可視領域に入ると下からふわっと表示させる方法

HTML
<div class="anime">
  <h1>メイン画像やメインテキスト</h1>
</div>

<div>
  <ul>
    <li class="fadein"><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/image04.jpg"</li>
    <li class="fadein"><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/image03.jpg"</li>
    <li class="fadein"><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/image02.jpg"</li>
    <li class="fadein"><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg"></li>
    <li class="fadein"><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img04.jpg"></li>
    <li class="fadein"><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img02.jpg"></li>
    <li class="fadein"><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img01.jpg"></li>
    <li class="fadein"><img src="https://www.nan-demo.work/wp-content/uploads/2022/06/image01.jpg"</li>
    <li class="fadein"><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img03.jpg"</li>
  </ul>
</div>

HTMLは、、、何でも良いのですが、メインとなる部分にanime、コンテンツにfadeinのclassを付けています。

CSS
.fadein {
  opacity:0;
}

.anime {
  animation-name: fade_bottom;
  animation-duration: 3s;
  opacity:1;
}

@keyframes fade_bottom{
  from{
    opacity: 0;
    transform: translateY(80px);
  }
  
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

CSSも、、、何でも良いのですが、大事な部分だけ記載しておきます。
fadeinがついているものは最初は表示されない様にopacity:0;にしておきます。

animeは、keyframesでopacity0から1へ。
translateY軸（縦方向）に80px地点から0地点へ。
animation-duration、3秒かけてアニメーションします。

jQuery
$(window).scroll(function (){
  $('.fadein').each(function(){
    var elemPos = $(this).offset().top,
    scroll = $(window).scrollTop(),
    windowHeight = $(window).height();

    if (scroll > elemPos - windowHeight + 100){
      $(this).addClass('anime');
    }
  });
});

fadeinのクラスの要素が可視領域に入って、+100pxスクロールすると、animeのクラス名が付与され、上記記載のアニメーションのCSSが作動されます。

実装結果

<br /> See the Pen <a href="https://codepen.io/Uchaaan/pen/yLjrWKz"><br /> ふわっと表示（animation,transform）</a> by Uchaaan (<a href="https://codepen.io/Uchaaan">@Uchaaan</a>)<br /> on <a href="https://codepen.io">CodePen</a>.<br />