1. ホーム
  2. ホームページの作り方
  3. Java Script / jQuery
  4. wow.jsとanimate.cssを使ってスクロール連動型のアニメーションを実装する！
  • 最終更新日
  • Java Script / jQuery

wow.jsとanimate.cssを使ってスクロール連動型のアニメーションを実装する！

「wow.js」というjQueryプラグインを使うとスクロールに合わせたアニメーションが可能です。

前回、紹介した「animate.css」はページが読み込まれるとアニメーションが始まってしまうため、下の方の要素にアニメーションを設定してもスクロールした時にはすでに止まっています。

繰り返しリピートの設定をしてないと意味が無いですね。でも「wow.js」とセットで使えば設定した要素へスクロールした時にアニメーションが始まってくれます。

目次 [閉じる]

wow.jsをダウンロードする

wow.js

wow.js

「wow.js」のサイトへ行くとポップな感じでめっちゃ犬がいます（笑）。ページをスクロールをするとアニメーションの動きも確認できます。

ファイルをダウンロードするにはこちらの「GitHub」のページからおこなえます。

wow.jsのダウンロード

①の「Code」をクリックするとボックスが表示されるので、その中にある②の「Download ZIP」からダウンロードしましょう。

必要なのは「wow.min.js」のみです。ファイルがある場所は解凍したフォルダの中の「dist」の中です。

ここには「wow.js」と「wow.min.js」がありますが同じ内容のファイルです。より容量の小さい「wow.min.js」を使用しましょう。

wow.jsの導入方法

それでは「wow.js」と前回紹介した「animate.css」の両方を設定していきます。

「animate.css」のファイルも必要になりますので「animate.cssを使ってアニメーションを追加！簡単にできる導入・使用方法」を参考にダウンロードしておいてください。

こちらも見てください

index.html

            
    
                
  1. <!DOCTYPE html>
    2. 
                
  2. <html>
    3. 
                
  3. <head>
    4. 
                
  4. <meta charset="UTF-8">
    5. 
                
  5. <title>wow.jsを使ったアニメーション</title>
    6. 
                
  6. <link type="text/css" rel="stylesheet" href="css/animate.min.css">
    7. 
                
  7. <style>
    8. 
                
  8. * {
    9. 
                
  9.   margin: 0;
    10. 
                
  10.   padding: 0;
    11. 
                
  11.   box-sizing: border-box
    12. 
                
  12. }
    13. 
                
  13.  
    14. 
                
  14. html {
    15. 
                
  15.   font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
    16. 
                
  16.   font-size: 62.5%;
    17. 
                
  17.   letter-spacing: 0.09em;
    18. 
                
  18.   font-feature-settings: "palt"
    19. 
                
  19. }
    20. 
                
  20.  
    21. 
                
  21. p {
    22. 
                
  22.   font-size: 2rem;
    23. 
                
  23.   font-weight: 600;
    24. 
                
  24.   text-align: center;
    25. 
                
  25.   margin: 100px 0
    26. 
                
  26. }
    27. 
                
  27. </style>
    28. 
                
  28. </head>
    29. 
                
  29. <body>
    30. 
                
  30.   <p class="animate__animated animate__bounce wow" data-wow-delay="0.6s">wow.jsを使ったアニメーション</p>
    31. 
                
  31. <script type="text/javascript" src="js/wow.min.js"></script>
    32. 
                
  32. <script>
    33. 
                
  33.   new WOW().init();
    34. 
                
  34. </script>
    35. 
                
  35. </body>
    36. 
                
  36. </html>
    37.

HTMLファイルは上記をコピペしてください。それではそれぞれをファイルの設置場所も確認しておきます。

wow.jsの設置場所

上記のようにファイルを設置できたらブラウザでアニメーションをご確認頂けます。あとはindex.htmlに記述している大事なところをチェックしていきましょう。

            
    
                
  1. <p class="animate__animated animate__fadeInUp wow" data-wow-delay="0.6s">wow.jsを使ったアニメーション</p>
    2.

「animate__animated」と「animate__fadeInUp」はanimate.cssの設定です。アニメーションさせたい要素に「animate__animated」を付け、「animate__fadeInUp」でアニメーションの種類を指定しています。

「wow」がスクロール連動の指定です。さらに「data-wow-delay="0.6s"」で表示するタイミングを設定します。

wow.jsのオプション設定は「data-wow-delay」の他にもありますので次項で紹介します。

            
    
                
  1. <script type="text/javascript" src="js/wow.min.js"></script>
    2.

次に「wow.min.js」の読み込みです。

大体のjQueryは使用する時に「jquery.js」も読み込まなければいけないんですが、「wow.js」の場合は読み込む必要がありません。

            
    
                
  1. <script>
    2. 
                
  2.   new WOW().init();
    3. 
                
  3. </script>
    4.

最後にコレ、これの記述を忘れると動かないので注意してください。

wow.jsの設定とデモ

それでは「wow.js」で設定できるオプションとその動きについて紹介します。

data-wow-duration

アニメーションの継続時間。「2s」とすると2秒かけてアニメーションします。

data-wow-durationの設定

                        
    
                            
  1. <p class="animate__animated animate__fadeInUp wow" data-wow-duration="2s">data-wow-durationの設定</p>
    2.
data-wow-delay

アニメーション開始のタイミング。「1s」とすると1秒後にアニメーションします。

data-wow-delayの設定

                        
    
                            
  1. <p class="animate__animated animate__fadeInUp wow" data-wow-delay="1s">data-wow-delayの設定</p>
    2.
data-wow-offset

アニメーションをスタートさせる位置。「200」とすると設定した要素が下から200pxの位置に来るとアニメーションします。

data-wow-offsetの設定

                        
    
                            
  1. <p class="animate__animated animate__fadeInUp wow" data-wow-offset="200">data-wow-offsetの設定</p>
    2.
data-wow-iteration

アニメーションのリピート回数。「3」とすると3回繰り返しアニメーションします。

data-wow-iterationの設定

                        
    
                            
  1. <p class="animate__animated animate__fadeInUp wow" data-wow-iteration="3">data-wow-iterationの設定</p>
    2.

スクロールして指定した要素がちょっとでも見えたらアニメーションが始まりますからねぇ、確認しづらい場合はページを再読み込みして動きをご確認ください（笑）。

あとはご自身の環境で確認して頂く方が良いですね。オプションの数値などを色々変更して試してみてください。

横並びの要素の高さを揃えるmatchHeight.jsの導入方法と使い方をご紹介 jQueryでスムーズスクロールを実装！ページ内リンクに動きを付け加える

よく読まれている記事

おすすめの記事

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ！Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。

チェピレア日記