wow.jsとanimate.cssでかんたんアニメーション!

LINEで送る
Pocket

こちらのページで多用しました。

パララックスともまた違い、要素ひとつひとつをバラバラに自在に動かすことができます。かなりいい感じ。

http://gallery-lounge.com/campaign/

本家サイト

wow.js

http://mynameismatthieu.com/WOW/index.html

animate.css

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

WOW.jsの何が凄いって超かんたん。

まずはWOW.jsとanimate.cssを読み込む。

jsは任意の場所で。ちなみに参考のページでは本家サイトの通り</body>の直上。

使用したい場所でclassにwow。

アニメーションのCSSスタイルはこちらの中から選んでもらうとわかりやすいかも。

animate.cssのサイト(ダウンロードもこちらから)

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

フェードインやスライドインなど色々なアニメーションが使えます。使えすぎて盛り過ぎに注意。(笑)

オプションもあります

data-wow-duration アニメーション時間
data-wow-delay ロードからアニメーションのスタートのタイミング
data-wow-offset 画面に表示されてからどこまでの距離をスクロールしたらスタートするか
data-wow-iteration アニメーションの繰り返し回数

使い方はかんたん

かんたんなのでご自身でお試し頂くのがわかりやすくて良いかもしれませんね!

以下wow.jsのサイトにあったサンプル3つ

2つめのサイトおもしろいです。(笑)

ぜひお試しを!

コメントを残す

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">