JavaScript

ウィンドウをスクロールすると下からふわっとコンテンツがフェードインする実装

JavaScript

デモはこちら


下へスクロールすると要素がふわっとフェードインして表示されます。

実装したコードを紹介します

HTMLの記述

<ul class="wrapper">
  <li class="fadeInUp"><img src="http://mias.kilo.jp/material/photo/img01.jpg" alt=""></li>
  <li class="fadeInUp"><img src="http://mias.kilo.jp/material/photo/img02.jpg" alt=""></li>
  <li class="fadeInUp"><img src="http://mias.kilo.jp/material/photo/img03.jpg" alt=""></li>
  <li class="fadeInUp"><img src="http://mias.kilo.jp/material/photo/img04.jpg" alt=""></li>
  <li class="fadeInUp"><img src="http://mias.kilo.jp/material/photo/img01.jpg" alt=""></li>
  <li class="fadeInUp"><img src="http://mias.kilo.jp/material/photo/img02.jpg" alt=""></li>
</ul>

liタグにフェードインするためのクラス「 fadeInUp 」を付けておく。

CSSの記述

.wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 750px;
  margin: 0 auto;
  padding: 50px 25px;
}
li{
  width: 48%;
  margin: 0 0 100px;
}
img{
  width: 100%;
  height: auto;
}
.fadeInUp {
  opacity : 0;
  transform: translateY(20px);
  transition: 1s;
}

クラス名「 fadeInUp 」にアニメーションする為のプロパティを記述します。
opacity 」で要素を透過。
transform 」で、表示位置を下へずらします。上記コードでは「 20px 」ずらしていますが、値が大きいほどスライドインしてくる距離が長くなります。
最後に「 transition 」でアニメーションの時間を指定しています。

JavaScriptの記述

$(function(){
  function animation(){
    $('.fadeInUp').each(function(){
      //ターゲットの位置を取得
      var target = $(this).offset().top;
      //スクロール量を取得
      var scroll = $(window).scrollTop();
      //ウィンドウの高さを取得
      var windowHeight = $(window).height();
      //ターゲットまでスクロールするとフェードインする
      if (scroll > target - windowHeight){
        $(this).css('opacity','1');
        $(this).css('transform','translateY(0)');
      }
    });
  }
  animation();
  $(window).scroll(function (){
    animation();
  });
});

jQueryで値を取得してフェードインを実装します。
ターゲットの位置までスクロールすると「 opacity 」が「 1 」に。「 transform 」の値も「 translateY(0) 」になり、下にずらしていたターゲットが通常の位置に戻ります。

あなたにおすすめの記事