Javascript

【wow】スクロール時アニメーション設定ライブラリ【超簡単です】

30DAYSトライアルの課題で、スクロールに合わせて要素をフワッと表示させるコーディングを実施しました。

デイトラの中でおすすめされていたのが「wow」というjavascriptライブラリでした。

実際にやってみたらめちゃくちゃ簡単にアニメーションをつけることができました。

 

 参考記事

 

wow.jsを使って簡単にアニメーションを実装

wowでアニメーションをつける手順

  1. GitHubからwow.cssとwow.min.jsをダウンロード
  2. CSSとjavascript読み込み
  3. 動きをつける要素にHTMLを記述

→ wow公式サイト

 

びっくりするほど簡単なので、一つずつ解説していきます。

GitHubからwow.cssとwow.min.jsをダウンロード

wow公式サイト

まず、wow公式サイトにアクセスしてGitHubをクリックします。

 

wow github

GitHubの画面からファイルをダウンロードし、以下のファイルを作業フォルダに移します。

wow.css

wow.min.js

 

CSSとjavascript読み込み

CSSとjavascriptの読み込みのための記述です。

こちらがCSS→<head>内に記述

<link rel="stylesheet" href="css/animate.css">

 

 

こっちがjavascript→</body>の直前に記述

<script src="js/wow.min.js"></script>
<script>
new WOW().init(); 
</script>

 

動きをつける要素にHTMLを記述

HTMLの記述はとてもシンプル!!

<div class="wow slideInUp"> <!--クラス名にwow、animate.cssのクラス名をつける-->
  Content to Reveal Here
</div>

動きをつけたい要素にwowのクラス名と、animate.cssで定義されているクラス名をつけるだけ。

この、animate.cssで定義されているクラス名をつけることで、様々な動きを簡単につけることができます。

 

まずはこちらのデモサイトを見て、どんな動きをつけたいか調べます。

 

こんな感じで、動きを確認することができます。


<div class="wow slideInUp">
<!--クラス名にwow、animate.cssのクラス名をつける-->
Content to Reveal Here 
</div>


slideInUpという動きをつけたいのであれば、上記のように記述をすれば、簡単に動きを出すことができます。

 

wowはオプション設定も簡単!

オプションというと、javascriptを触らないといけないイメージがありますが、wowはめちゃくちゃ簡単です。

代表的なオプションは以下の通り

  • data-wow-duration:アニメーションの長さを変更する
  • data-wow-delay:アニメーションを開始するまでの遅延
  • data-wow-offset:アニメーションを開始する距離
  • data-wow-iteration:アニメーションの回数繰り返される

例えば、slideInUpの動きを指定していたとします。

デフォルトだと、「スクロール→その要素がウィンドウ内に入ったらアニメーション」となるので、場合によっては動き出すのが早すぎてアニメーションが見辛いってことになります。

 

その例がこちら↓

ちょっと動き出すのが早すぎて、「ほんまにアニメーションしてる?」って感じがしません?

 

そんな時は、オプションの中からdata-wow-delay:アニメーションを開始するまでの遅延を使います。

先ほど書いたHTMLタグの中に、date属性として記述すればおっけーです。


<div class="wow slideInUp"data-wow-delay=.3s>
<!--.3秒遅れて表示-->
Content to Reveal Here
</div>

 

これだけで、簡単にオプションが使えます。簡単すぎますね。

 

data-wow-delayを指定した後がこちら↓

遅れて見える分、はっきりとアニメーションがわかりますし、よりおしゃれな演出ができますね。

 

より高度なオプションもあるみたいですが、これだけでも十分に豊富なアニメーションがつ使えるなーといった印象です!

簡単に、僕のようなコーディング初心者でもできましたので、ぜひ試してみてください。

 

→ wow.js