Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

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

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

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

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

アニメーションのCSS

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

Animate.css

URLAnimate.css

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

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

<link rel="stylesheet" href="css/001/animate.css" />

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

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

  • data-wow-duration: アニメーション時間
  • data-wow-delay: アニメーションの開始時間
  • data-wow-offset: どこまでスクロールしたらアニメーションを開始
  • data-wow-iteration: アニメーションの繰り返し回数
<p class="wow" data-wow-delay="1s">1秒後にアニメーションが開始される</p>

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

HTMLを設置します STEP6

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

<div>

	<!-- 1秒後にコンテンツが揺れる -->
    <p class="wow shake" data-wow-delay="1s">1秒後にコンテンツが揺れる</p>
    
    
</div>

まとめ

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

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

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

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-Web

Copyright© Sedori Plan , 2019 All Rights Reserved.