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

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

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

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

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

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

URLWOW.js

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

WOW.js

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

WOW.js

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

データを解凍します STEP2

データを解凍します

データが入っています。

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

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

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

アニメーションのCSS

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

Animate.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の紹介でした。
ランディングページなどに使えそうですね!

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

コメントを残す

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

*