BLOG ブログ

2015.04.10

wow.jsとanimate.cssで楽しいページが作れちゃう!

wow.jsとanimate.css

要素に動きをつけることができる「animate.css」と

Animate.css

「animate.css」を動かすタイミングを調節できる「wow.js」の組み合わせで

Reveal Animations When Scrolling — WOW.js

とっても簡単

head内で「animate.css」を読み込む

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

bodyの閉じタグの前で「wow.jp」を読み込む

<script src="js/wow.js"></script>


スクリプトを記述

<script>
    new WOW().init();
</script>

あとはclass名を付けるだけ

↓こう記述すると↓

<div class="wow rollIn">
   <p>こんな感じで</p>
</div>

↓こうなる↓

こんな感じで

アニメーションのスピードなども設定できます。

  • data-wow-duration
      アニメーションのスピード
  • data-wow-delay
      アニメーションを動かすまでの待ち時間
  • data-wow-offset
      アニメーションを動かすタイミング(ブラウザ下からの距離)
  • data-wow-iteration
      アニメーションが繰り返される回数

詳しくはこちらで

Animate.css http://daneden.github.io/animate.css/

Wow.js http://mynameismatthieu.com/WOW/

kato

このブログを書いた人

酉年生まれのせいか、話を聞いても3歩歩けば忘れます。 こんな私ですが、よろしくお願いします。

RELEVANCE 関連記事

お問い合わせ TOPへ