WEB制作

2015-04-10(Fri)

Atsuko

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/


このブログを書いた人

Atsuko

実はJavascriptとか会社入るまでやったことなかったことは内緒です。
酉年生まれのせいか、話を聞いても三歩あるけば忘れます。

最近書いた記事

関連する記事