スクロールするとフワッと現れたり動いたりするアニメーション【jquery.inview.js & transition】

スクロールするとフワッと現れたり動いたりするアニメーションを作る方法はいくつかあるが、一番シンプルに感じた方法をご紹介。CSSでアニメーションを設定し、JSでスクロールを感知してCSSのclassを付加する方法。

アニメーション適用前
transition設定
jquery.inview.js
まとめ

※参考：CSS、JSの基本
【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3 - クモのようにコツコツと
 【JSの基本-前編】書ける前に読む！HTML、CSS、JSの書式-4 - クモのようにコツコツと
 【JSの基本-後編】書ける前に読む！HTML、CSS、JSの書式-5 - クモのようにコツコツと

※参考：ネイティブHTML & CSSでいろいろやってみたシリーズ
qiita.com

※参考：JSライブラリ&フレームワークを試してみたシリーズまとめ
qiita.com

アニメーション適用前

まずHTMLはこんなです。.fade_inの画像はフェードイン、.upの画像は上移動、.sideは横移動させたい画像です。

<h1>スクロールテスト</h1>
<p>スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
</p>
<ul class="scroll">
  <li class="fade_in"><figure>
    <figcaption>フェードイン</figcaption>
    <img src="https://www.instagram.com/p/Bg3qtU9ls-A/media/?size=l">
    </figure></li> 

  <li class="up"><figure>
    <figcaption>上に移動</figcaption>
    <img src="https://www.instagram.com/p/Bg3qtU9ls-A/media/?size=l">
    </figure></li> 

  <li class="side"><figure>
    <figcaption>横に移動</figcaption>
    <img src="https://www.instagram.com/p/Bg3qtU9ls-A/media/?size=l">
    </figure></li> 
<p>スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  </p>

</ul>

CSSのtransitionプロパティには0.5秒という値を入れています。これは0.5秒の速度で動くという意味だが、まだアニメ自体の設定はしてない。

.scroll li {
  transition: 0.5s;
}

リスト（li要素）の中の画像のキャプション（figcaption要素）に「フェードイン」「上に移動」「横に移動」と書いていますが、まだ動きません。

transition設定

アニメーション前とアニメーション後の値をCSSのtransitionで設定する。
フェードインはこんな。

.scroll .fade_in {
  opacity: 0;  
}

.scroll .fade_in_anime {
  opacity: 1;  
}

. fade_inはアニメーション前。opacityプロパティで不透明度0%。
. fade_in_animeはアニメーション後。opacityプロパティで不透明度100%。

上に移動はこんな。

.scroll .up {
  transform: translate(0,50px); 
  opacity: 0;  
}

.scroll .up_anime {
  transform: translate(0,0); 
  opacity: 1;  
}

. upはアニメーション前。transformプロパティのtranslate関数の引数1は横位置0、引数2は縦位置50px。
. up_animeはアニメーション後。transformプロパティのtranslate関数の引数1は横位置0、引数2は縦位置0。
また、最初のopacityも設定している。

横に移動はこんな。

.scroll .side {
  transform: translate(50px,0); 
  opacity: 0;  
}

.scroll .side_anime {
  transform: translate(0,0); 
  opacity: 1;  
}

. sideはアニメーション前。transformプロパティのtranslate関数の引数1は横位置50px、引数2は縦位置0。
. side_animeはアニメーション後。transformプロパティのtranslate関数の引数1は横位置0、引数2は縦位置0。
こちらもopacityを設定している。

この時点ではアニメーション前のopacityだけが適用されルため、画像が表示されない。

これをスクロール感知でアニメーションさせたい。

jquery.inview.js

スクロール感知させるにはJSを使います。jquery.inview.jsはjQueryのプラグインなので、まずjQueryを読み込みます。その後にプラグインを読み込む。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-inview@1.1.2/jquery.inview.min.js"></script>

CodePenではCDNで読み込んでいます。

jQueryは$();の中に無名関数function() { }、さらにその中に処理を書くんでしたね。

$(function() {  
// 処理を書く
});

jquery.inview.jsの書き方はこんなです

 $(セレクタ).on('inview', function(event, isInView) {
    if (isInView) {
      //スクロールで表示された時の処理
    }

jQueryの.on()メソッドはイベントを設定します。イベント名は第一引数inview。第二引数は無名関数で中にif文が入っている。
isInViewはjquery.inview.js独自の記法でスクロールによるオブジェクト表示と紐づいています。

また、スクロールで表示から外れた時の処理（アニメ前に戻すなど）もif文のelseで設定可能。

 $(セレクタ).on('inview', function(event, isInView) {
    if (isInView) {
      //スクロールで表示された時の処理
    } else {
      //スクロールで表示から外れた時の処理
    }
  });

ではフェードインの画像.fade_inに適用してみましょう。

  $('.fade_in').on('inview', function(event, isInView) {
    if (isInView) {
      $(this).addClass('fade_in_anime');
    } else {
      $(this).removeClass('fade_in_anime');
    }
  });

jQueryのaddClass()メソッドでアニメーション後のクラス.fade_in_animeを付加します。
またeleseでは同じくjQuery のremoveClass()メソッドでクラス.fade_in_animeを削除します。

上に移動の.upはこんな。

    $('.up').on('inview', function(event, isInView) {
    if (isInView) {
      $(this).addClass('up_anime');
    } else {
      $(this).removeClass('up_anime');
    }
  });

先ほどと同様にアニメ後のクラス.up_animeを付加ています。

横に移動の.sideはこんな。

    $('.side').on('inview', function(event, isInView) {
    if (isInView) {
      $(this).addClass('side_anime');
    } else {
      $(this).removeClass('side_anime');
    }
  });