2014年7月4日 2:54 PM  カテゴリー: javascript, jQuery, Tips, web制作

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

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

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つめのサイトおもしろいです。(笑)

ぜひお試しを!

ABOUT

仕事と子育てを楽しむパパです。 趣味は漫画、映画、海外ドラマ、波乗り、スノボ、カメラ。 最近いけてないけど旅行も大好き。仕事はweb以外にも企業向け技術教育事業、投資、ディレクション、アパレル、写真、店舗プロデュースなどなどなんでもこなします。

Twitter