次々に要素が出現する スクロールアニメーション

はじめに

今回は要素を次々に出現させるスクロールアニメーションを作りました。
プラグインは使用せず、jQueryとCSSでの実装です。
デモは下記になります。

デモ

DEMO

ソース

大事なところだけ抜粋します。

<div class="animate">
  <div class="animate-elm type01"></div>
  <div class="animate-elm type02"></div>
  <div class="animate-elm type03"></div>
</div>

<div class="animate">
  <div class="animate-elm type01"></div>
  <div class="animate-elm type02"></div>
  <div class="animate-elm type03"></div>
</div>

<div class="animate">
  <div class="animate-elm type01"></div>
  <div class="animate-elm type02"></div>
  <div class="animate-elm type03"></div>
</div>

.animate-elm {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.animate-elm.type02 {
  -webkit-animation-delay: .2s;
          animation-delay: .2s;
}

.animate-elm.type03 {
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
}

.animate-elm.fadein {
  -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft;
  -webkit-animation-duration: 500ms;
          animation-duration: 500ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
  to {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
  to {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

$(function(){
  var setAnim = $('.animate');
  $(window).on('scroll resize',function(){
    var setHeight = 300;
    setAnim.each(function(){
      var setThis = $(this),
          setElm = $(this).find('.animate-elm');
      elmTop = setThis.offset().top,
      scrTop = $(window).scrollTop(),
      winHeight = $(window).height();
      if (scrTop > elmTop - winHeight + setHeight){
        setElm.addClass('fadein');
      }
    });
  });
});

解説

アニメーションはCSSのkeyframesで設定します。
要素ごとのタイミングをずらすため「animation-delay」で調整します。
ある一定の部分までスクロールしたらclass「animate-elm」にclass「fadein」を追加します。

jsではclass「animate」それぞれに対してイベントを設定します。
内容は下記です。

1. class「animate」のそれぞれからclass「animate-elm」を探す
2. もし「（ウィンドウの天辺）」が（animate要素の天辺）-（ウィンドウの高さ）+（設定した高さ）」
   より下になったら
3. 探したclass「animate-elm」にclass「fadein」を追加

上記では設定した高さは「300px」です。

if文は分かりづらいので言い方を変えると
「animate要素の天辺から画面の高さ一つ分上にいって、設定した高さ分下に戻す」
そこに横一線のラインがあると思って
画面の天辺がそのラインを超えたらclassを追加するということです。
紙とかに書いてみると理解しやすいかもしれません。

ウィンドウの高さはウィンドウサイズに応じて変わるため、
「$(window).on(‘scroll resize’,function(){」でリサイズされるごとに取得し直します。
もし画像を使う場合は
「$(window).on(‘load scroll resize’,function(){」で画像ロード後にイベントを設定しましょう。

さいごに

意外と使える場面は多いかと思います。
一つのやり方として、参考になればと思います。