「wow.js」を使って動きのあるコンテンツを作る(サンプル付き)

動きのあるサイトを多く見かけるようになりました。
1ページで縦に長いコンテンツでスクロールすると動いてコンテンツが出てくるサイトです。

1600+ iOS7 Vector Icons
レンタルサーバー ヘテムル

やりすぎるとサイト表示が遅くなるかもしれないので適度に入れてサイトをカッコよくしたいですね！

今回は、動きのあるコンテンツを作ることができるwow.jsを使ってみます。

URLWOW.js

ファイルをダウンロード STEP1

サイトの上部に「Github」がありますのでクリックしてください。

Zipファイルをクリックしてファイルをダウンロードしてください。

データを解凍します STEP2

データが入っています。

HTMLに実際に動く記述を書きます STEP3

HTMLに記述します。　wow.min.jsはdistフォルダの中に入ってます。

アニメーションのCSSをダウンロード STEP4

アニメーションのCSSと一緒に使うと面白いコンテンツが作れそうです。

URLAnimate.css

Download Animate.cssからダウンロードします。

ダウンロードしたら設置します。

環境に合わせて設置してください。

Wow.jsのオプションメニュー STEP5

• data-wow-duration: アニメーション時間
• data-wow-delay: アニメーションの開始時間
• data-wow-offset: どこまでスクロールしたらアニメーションを開始
• data-wow-iteration: アニメーションの繰り返し回数

classでwowを入れて、data-wow-durationなどを動かしたい要素の中に入れます。

HTMLを設置します STEP6

先ほど紹介したアニメーションcssの中でshakeを使ってみます。
使いたいアニメーションを選んでclassのなかに入れます。

まとめ

[サンプル] 動きのあるコンテンツ

動きのあるコンテンツを作るwow.jsの紹介でした。
ランディングページなどに使えそうですね！