jQueryでスクロールしてふわっと表示させる方法

 

以前スクロールしたらふわっと表示させる方法として、animate.cssとWOW.jsを利用すると簡単にできるという記事を書きました。
この方法だと簡単に導入できるのですが、商用サイトだとWOW.jsを利用するのに料金が発生してしまいます。

予算があるサイトであればいいのですが、予算がない場合、この利用料を払うのが困難ということもあります。
スクロール領域に達成したら画像をふわっと表示させるくらいなら、jQueryを使えばできるようです。

jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法を参考にしました。

HTMLには下記のとおり画像を並べました。

<div>
  <figure><img class="img100" src="img/img-1.jpg" alt=""></figure>
  <figure class="effect"><img class="img100" src="img/img-2.jpg" alt=""></figure>
  <figure class="effect"><img class="img100" src="img/img-3.jpg" alt=""></figure>
  <figure class="effect"><img class="img100" src="img/img-4.jpg" alt=""></figure>
</div>

 

CSSのふわっと表示させたいタグにtransition: .8s;を指定するのがポイントです。
これを指定しておかないと、ふわっと表示されずにパッと一瞬で表示されるようになります。

img {vertical-align: bottom;}
.img100 {
	width: 100%;
	height: auto;
}
.effect img {
	transition: .8s;
}

 

事前にjQueryを読み込んでてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

jQueryは下記のように書きました。

$(function(){
  $('.effect img').css("opacity","0");  //読み込み時、透過して表示されないようにする
  $(window).scroll(function (){
    $(".effect").each(function(){  //effectクラスがあれば関数を実行する
      var imgPos = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > imgPos - windowHeight + windowHeight/5){
        $("img",this).css("opacity","1" );  //.effect imgがウィンドウの高さ1/5に到達したら不透過にする
      } else {
        $("img",this).css("opacity","0" );
      }
    });
  });
});

 

DEMO

 

コーディングする前は、ものすごく難しいことをやっているように思えるので拒否反応してましたが、一つ一つゆっくりと理解すればできるようになりそうです。