Suzuki Blog Written by Yuki Suzuki

スクロールアニメーションの実装方法【jQuery】

jQuery Programming

こんにちは!スズキです。

今回はスクロールアニメーションの実装方法について紹介します。

スクロールアニメーションとは、スクロールに合わせて要素を動かす仕組みのことです。

jQueryライブラリの「wow」を使えば、スクロールアニメーションを簡単に実装することができます。

記事の内容

  • CDNを読み込む
  • コーディング

スポンサードサーチ

CDNを読み込む

コーディングに入る前に、CDNを読み込みます。

以下のコードをコピペしてください。

<!-- CSS読み込み -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" type="text/css" media="all" >
 
<!-- JS読み込み -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

このコードで、「animete.css」「jQuery」「wow.js」を読み込むことができます。

読み込みができたら、cssファイルとjsファイルも読み込んでおきましょう。

これで準備完了です。

コーディング

まずはサンプルを作成したので、下までスクロールして確認してみてください。

HTML

<!-- 高さを与えてるだけ -->
  <div class="scroll-test"></div>
  <!-- アニメーションさせる要素ここから -->
  <div class="scroll-animation">
    <div class="box wow bounceIn" data-wow-duration="2s" data-wow-delay="1s" data-wow-offset="10" data-wow-iteration="3" >bounceIn</div>
    <div class="box wow flash" data-wow-duration="2s" data-wow-delay="1s" data-wow-offset="10" data-wow-iteration="3" >flash</div>
    <div class="box wow fadeIn" data-wow-duration="2s" data-wow-delay="1s" data-wow-offset="10" data-wow-iteration="3" >fadeIn</div>
    <div class="box wow bounceInDown" data-wow-duration="2s" data-wow-delay="1s" data-wow-offset="10" data-wow-iteration="3" >bounceInDown</div>
  </div>
  <!-- アニメーションさせる要素ここまで -->

まずはHTMLから見ていきます。

といっても、やることはほとんどありません。

以下、2点だけです。

  • クラス名に”wow”と”実装したいアニメーションの種類”を与える
  • オプションを設定する

まず、アニメーションさせたい要素にクラス名をつけましょう

“wow”は必須で、”実装したいアニメーション”は以下から確認できます。

こちらから確認

クラス名をつけたら、オプションの設定をします。

設定するオプションは以下の4点です。

data-wow-duration アニメーションの時間
data-wow-delay スクロールが要素に達してからアニメーションがスタートする時間
data-wow-offset スクロールが要素に達してからアニメーションがスタートする距離
data-wow-iteration アニメーションの繰り返し回数

これだけでOKです。

ちなみに、サンプルの”scroll-test”と”scroll-animation”と”box”は必要ありません。

CSS

続いてCSSですが、特に必要な設定はありません。

アニメーションさせる要素のスタイルを書いておきましょう。

jQuery

最後にjsファイルへの記述ですが、以下をコピペするだけでOKです。

/* wowの設定 */
new WOW().init();

このコードによって、wowの設定ができます。

記述しないと動きません。

スポンサードサーチ

まとめ

いかがでしたか。

「wow」を使うことで簡単にスクロールアニメーションを実装することができました。

アニメーションの種類はたくさんあるので、ぜひ色々試してみてください。

以上です。

コーディングを学ぶならデイトラ

Web制作コース

動画でプログラミングを学ぶなら

Udemy

オンラインスクールでプログラミングを学ぶなら

Skill Hacks