こんにちは、アカリです。
今日はwow.jsとanimation.cssを使ったアニメーションの実装のやり方を紹介します。
スポンサードサーチ
目次
wow.jsとanimation.cssを使ったアニメーションの実装
animate.cssはWebサイトにアニメーションをつけます。wow.jsと合わせて使う事でスクロールのタイミングでアニメーションをつけたりできます。
animate.cssのサイト自体がアニメーションになっているのでここで色々試す事ができます。
続いてwow.jsですがこちらもサイト自体がアニメーションになっています。
それぞれサイトからダウンロードするか、CDNで読み込むこともできます。
CDNで導入する場合は、以下のコードをHTMLの<head></head>内に記述すればOKです。
CDNコード
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
上のCDNのすぐ下に以下のコードを記述します。
<script>
new WOW().init();
</script>
もちろんmain.jsなどに記述してもOKです。
あとはアニメーションをつけたい要素のclass内に（wow + 付けたいアニメーション）を書くだけで簡単に動きます。
例えば以下のような感じです。
<h1 class="wow bounce">bounce</h1> <h1 class="wow flash">flash</h1> <h1 class="wow pulse">pulse</h1> <h1 class="wow rubberBand">rubberBand</h1> <h1 class="wow shake">shake</h1> <h1 class="wow swing">swing</h1> <h1 class="wow tada">tada</h1> <h1 class="wow wobble">wobble</h1> <h1 class="wow jello">jello</h1>
classにinfiniteを追加するとずっと同じ動きを繰り返します。
アニメーションの種類はまだまだたくさんあります。
スポンサードサーチ
アニメーションの種類
- bounce
- flash
- pulse
- rubberBand
- shake
- swing
- tada
- wobble
- jello
- bounceIn
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceInUp
- bounceOut
- bounceOutDown
- bounceOutLeft
- bounceOutRight
- bounceOutUp
- fadeIn
- fadeInDown
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- fadeOut
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
- flipInX
- flipInY
- flipOutX
- flipOutY
- lightSpeedIn
- lightSpeedOut
- rotateIn
- rotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
- rotateOut
- rotateOutDownLeft
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
- hinge
- rollIn
- rollOut
- zoomIn
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- zoomOut
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
- slideInDown
- slideInLeft
- slideInRight
- slideInUp
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp
ぜひ全部試してみてください。
要素内にオプションを記述すると、アニメーションの動き方を細かく指定することができます。
wow.jsのオプション
| オプション | 動き |
| data-wow-duration | アニメーションの時間 |
| data-wow-delay | スクロールが要素に達してからアニメーションがスタートする時間 |
| data-wow-offset | スクロールが要素に達してからアニメーションがスタートする距離 |
| data-wow-iteration | アニメーションの繰り返し回数 |
例えば以下のような感じです。
<h1 class="wow bounce" data-wow-duration="3s">bounce</h1> <h1 class="wow flash" data-wow-delay="2s">flash</h1> <h1 class="wow pulse" data-wow-offset="5">pulse</h1> <h1 class="wow rubberBand" data-wow-iteration="5">rubberBand</h1>
１行目はアニメーションを3秒かけて実行します。
２行目はスクロールが要素に達してから2秒後にアニメーションを実行します。
３行目はスクロールが要素に達してからスクロール５すぎたら実行します。
４行目はアニメーションを５回繰り返します。
例えば、data-wow-durationとdata-wow-delayで要素に達してから2秒後に3秒かけて実行させるなど、上記の４つを組み合わせて使う事もできます。
これを使えば簡単に動きのあるサイトを作れるかと思います。
いろんな組み合わせで試して使ってみてください。
以上です。
