おすすめグッズや役立つ情報ブログ

Sedori Plan

Web

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

スポンサーリンク
  • この記事を書いた人
  • 最新記事

toney

サイトの構築、プログラムを制作をしていますtoneyと申します。中小企業、個人のホームページの制作、更新作業も承ります。 筋トレで自分を追い込んでいくのが楽しみです。最近マラソンにはまって2年連続名古屋シティマラソンに出ました。

-Web

Copyright© Sedori Plan , 2018 All Rights Reserved.