サイトをみていると、
スクロールに合わせてコンテンツがふわっと現れたり、スライドしてきたりしますよね。
今回はスクロールに合わせてアニメーションをつけることができるプラグイン
「wow.js」の使い方をまとめてみます。
wow.js：https://wowjs.uk
ざっくりとした全体の手順はこんなかんじです。
- データをダウンロードする
- animate.cssを読み込む
- wow.jsを読み込んで、発火宣言
- アニメーションを追加したいHTML要素にclassを設定(2つ)
- 状況に応じてアニメーションの設定を追加
では詳しくみていきましょう。
wow.jsの使い方
手順1：データをダウンロードする
wow.jsを使うには、下記2つのファイルが必要になります。
- animate.css
- wow.min.js
ファイルは、Githubからダウンロードしましょう。
wow.jsの上部のgithubリンクからも移動できます。
手順2：animate.cssを読み込む
wow.jsはanimate.cssのアニメーションを使っているので、
こちらも読み込みが必要です。
<link rel="stylesheet" href="css/animate.css">※データの格納場所は任意です。
手順3：wow.jsを読み込む
続いて、wow.jsのJavaScriptファイルを読み込みます。
<script src="js/wow.min.js"></script>※データの格納場所は任意です。
手順4：wow.jsの発火宣言をする
wow.jsを使うために、JavaScriptで発火宣言をします。
new WOW().init();wow.jsの設定方法
アニメーションを追加したいHTMLにclassを設定
アニメーションをつけるには、HTMLに2つのclassを追加する必要があります。
まず1つ目は、HTML要素に「wow」というclassを追加します。
2つ目につけたいアニメーションをAnimate.cssから選びましょう。
Animate.css：https://animate.style
右にずらっとアニメーションの種類が載っています。
種類をクリックすると、「Animate.css」の文字がアニメーションのデモになります。
アニメーションを選んだら、アニメーション名をHTMLのクラス名に追加します。
これで基本的な設定は終了です！
オプションの設定
アニメーションのオプションの追加は状況に応じて設定します。
下記のことが設定可能です。
- data-wow-duration：
アニメーションの長さの変更
【例】data-wow-duration=”2s”
- data-wow-delay：
アニメーションが始まる前の遅延時間
【例】data-wow-delay=”5s”
- data-wow-offset：
アニメーションを開始する距離（ブラウザの下部に関連）
【例】data-wow-offset=”10″
- data-wow-iteration：
アニメーションが繰り返される回数。
【例】data-wow-iteration=”10″
またオプションの設定はclassではなく、
HTMLそのものにdata-wow-duration=”2s”などと追加していきます。
以上、wow.jsの導入方法でした。
