クモのようにコツコツと

Webデザイナー イイダリョウのブログです。

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

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

目次:

※参考:CSS、JSの基本

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

アニメーション適用前

まず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>

CSStransitionプロパティには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文が入っている。
isInViewjquery.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');
    }
  });

jQueryaddClass()メソッドでアニメーション後のクラス.fade_in_animeを付加します。
またeleseでは同じくjQueryremoveClass()メソッドでクラス.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');
    }
  });

アニメ後のクラスはside_animeです。

そうすると最初に設定したtransitionプロパティ0.5秒のスピードでスクロールアニメが実現できます。フワッと現れる。動く!

まとめ

スクロールアニメにするとオブジェクトに目が行って注目度が上がると思います。 CSSにもアニメーション設定が増えてきたので、JSは判定やイベント発火だけのシンプルな書き方ですんじゃいそうですね!