【すぐできる】wow.jsとanimate.cssを使ってアニメーションを実装


こんにちは、アカリです。

今日は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>
 



1行目はアニメーションを3秒かけて実行します。

2行目はスクロールが要素に達してから2秒後にアニメーションを実行します。

3行目はスクロールが要素に達してからスクロール5すぎたら実行します。

4行目はアニメーションを5回繰り返します。


例えば、data-wow-durationとdata-wow-delayで要素に達してから2秒後に3秒かけて実行させるなど、上記の4つを組み合わせて使う事もできます。

これを使えば簡単に動きのあるサイトを作れるかと思います。


いろんな組み合わせで試して使ってみてください。




以上です。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です