更新 2019 / 04 / 16

時間差アニメーション

スクロール時に視界に入った時にアニメーションする
参照元 > https://www.weblab.co.jp/staff/html/6148.html

HTML

classがキモです。

<div class="animation"><img src="<!--画像ファイル-->"></div>

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).scroll(function (){
    $(".animation").each(function(){
      var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
      var scroll = $(window).scrollTop(); //スクロールの位置を取得
      var windowHeight = $(window).height(); //ウインドウの高さを取得
      if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
        $(this).addClass('active'); //クラス「active」を与える
      }
    });
});
</script>

css

                        
    .animation{
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        -webkit-transition: all 1.5s ease;
        transition: all 1.5s ease;
    }

    .animation.active{
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }