動きのあるサイトを作る時に使ったのがこのwow.jsです。
スクロールなどでその要素が表示された時にアニメーションが発動します。
流行りのパララックスっぽい感じにする時にも便利かもしれません。
商用利用の場合有料となっているようなので、詳しくはこちらでご確認ください。
プラグインのダウンロード
下記2つをHTMLに読み込みます。
- animate.css
- wow.js(wow.min.js)
まず、下記サイトからAnimate.cssをダウンロードし、設置する。
<link rel="stylesheet" href="animate.css">コピペでOKのCDNもあります。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">更にwow.jsをダウンロードし、設置する。
- wow.jsのサイトに行き、上部メニューにある「GITHUB」をクリックする。
- GITHUBのサイトで右上にある「clone or download」をクリックしてダウンロードする。
<script src="wow.min.js"></script>こちらもコピペでOKのCDNあり。
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>;そして下記メソッドを記述する。
<script>new WOW().init();</script>HTML
動かしたい要素のクラスやIDに「WOW ○○」と記述すればOKです。
○○は動きの名前です。
下記の場合は「bounce」という飛び跳ねるような動きをします。
<div class="wow bounceIn" data-wow-duration="1s" data-wow-delay="0.1s"><img src="images/ex.png"></div>動きの種類については、下記サイトで確認できます。
また、動きのタイミングや回数を設定することが出来ます。
（””の中の数字は例です）
data-wow-duration=”0.1″
アニメーション時間
data-wow-delay=”1.0s”
アニメーションが開始するタイミング
data-wow-offset=”5″
表示されてからどれくらいの距離をスクロールしたら開始するか
data-wow-iteration=”10″
アニメーションの繰り返しの回数
このように、設定した要素に好きな動きをつけることが出来ます。
ダイナミックにも、ちょっとしたアクセントにも使うことが出来るのでオススメです。
コメント