jQuery 2014-05-29

パララックスのようなスクロール アニメーションが超簡単に出来る 軽量スクリプト WOW.js使い方

wow

ユーザーがスクロールした時やブラウザビューポートに任意の距離に達した時などパララックスのような要素が様々なアニメーションで表示・非表示が出来るWOW.js(5KB)という軽量スクリプトのご紹介です。
特設ページやLPやパララックスなど1カラムのページに使えそうなスクリプトなのでとても重宝するとは思います。下記リンク先にデモページを用意しましたのでご参考頂ければと思います。

デモページ

こちらのスクリプトは、jQuery本体を読み込まなくても動作致します。
だからといってjQueryを読み込んでも不都合などはありませんのご心配なく。

また、アニメーションはAnimate.cssを利用していますので、多彩なアニメーションが用意されていますので自分好みのアニメーションを探すもいいですし、オリジナルで作っても良いかとは思います。
※今回のスクリプトは、CSS3のアニメーションを利用しています。※

ファイルのダウンロードは、下記リンク先よりダウンロードして下さい。

WOW.js 一式ダウンロード

必要なファイル

それでは、ダウンロード後はご自身で解凍して下さい。
単純に動作に必要なファイルは、下記の2ファイルです。

  • wow.js
  • Animate.css

wow.jsは、distというフォルダの中にあります。
Animate.cssは、css > libsというフォルダの中にあります。

利用方法

それでは、利用方法を記載していきたいと思います。
cssやjsのファイル階層は必ずご自身のサイトの階層に合わせて下さい。

css・jsの読み込み

まずは、<head>~</head>の間にanimate.cssを読み込ませます。


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

次にWOW.js・スクリプトを記載していきます。
コードは、</body>の上に記載してきます。


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

</body>

アニメーションを加えたい要素にCSSクラスを追加

次にアニメーションを加えたい要素に【.wow】と【animate.cssのcssクラス】を追加していきます。

<div class="wow bounceInUp">  アニメーションします  </div >
<div class="wow bounceIn">  アニメーションします  </div >

上記のコードまで記載すれば、要素に対してアニメーションが始まります。

デモページ

様々なオプション機能

上記だけでも十分良いのですが、WOW.jsにはオプション機能もありますのでそちらもご紹介していきたいと思います。

要素に直接data属性使った機能

WOW.jsでは、要素に直接独自のdata属性を加えて、アニメーションの遅延やスタート位置などを任意に変更が可能となっております。

  • data-wow-duration (アニメーションの再生時間の変更)
  • data-wow-delay(アニメーションが開始されるまでの遅延時間の変更)
  • data-wow-offset(アニメーションが開始される距離の変更※ブラウザの下からになります。)
  • data-wow-iteration(アニメーションが繰り返される数)

それでは、先ほどの要素にdata属性を追加していきたいと思います。

<div class="wow bounceInUp" data-wow-duration="2s" data-wow-delay="3s">  アニメーションします  </div >
<div class="wow bounceIn" data-wow-offset="100" data-wow-iteration="5">  アニメーションします  </div >

最初の要素はアニメーションの再生時間が2秒で3秒後にアニメーションが始まるように変更しています。
次の要素は、ブラウザの下から100に要素が達したらアニメーションが始まり、5回同じアニメーションが繰り返されます。

最後に

意外と使えそうな機能もあったり、簡単に設置出来る点からとても良いスクリプトではないのかとは思います。
特に、遅延機能や距離の変更なんかを利用すれば、おもしろいページなんかも作れるとは思います。
WOW.jsを使ったデモページもありますのでそちらもご参考下さい。また、デモページのコードも載せときます。

デモページ

<body>
<h1>Glow-Factory wow.js 動作デモ</h1>
<p>ボックス内に記載している文字がアニメーションクラスとなります。</p>
<section class="box wow slideInRight" style="background-color: #f1c40f;"><p>slideInRight</p></section>
<ul class="clearfix">
	<li class="wow bounce" data-wow-duration="3s">bounce</li>
	<li class="wow pulse" data-wow-duration="2s">pulse</li>
	<li class="wow shake" data-wow-duration="4s">shake</li>
	<li class="clear wow rollIn">rollIn</li>
	<li class="wow bounceIn">bounceIn</li>
	<li class="wow rotateInUpLeft">rotateInUpLeft</li>
	<li class="clear wow fadeInLeftBig" data-wow-delay="0.5s">fadeInLeftBig</li>
	<li class="wow fadeInLeftBig">fadeInLeftBig</li>
	<li class="wow fadeInRightBig" data-wow-delay="1s">fadeInRightBig</li>
	<li class="clear wow fadeOutLeftBig" data-wow-delay="1s">fadeInLeftBig</li>
	<li class="wow fadeOutLeftBig" data-wow-delay="1.4s">fadeInLeftBig</li>
	<li class="wow fadeOutRightBig" data-wow-delay="0.7s">fadeInRightBig</li>
	<li class="clear wow fadeInLeftBig" data-wow-delay="0.5s" data-wow-duration="3s">fadeInLeftBig</li>
	<li class="wow fadeInLeftBig" data-wow-duration="3s">fadeInLeftBig</li>
	<li class="wow fadeInRightBig" data-wow-delay="1s" data-wow-duration="3s">fadeInRightBig</li>
</ul>
  <script src="wow.min.js"></script>
  <script>
    wow = new WOW(
      {
        animateClass: 'animated',
        offset:       200
      }
    );
    wow.init();
  </script>
</body>

オススメ書籍・アイテム

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

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

PREVIOUS img-upload

ワードプレス 投稿画面にて記事内に画像を挿入・アップロード方法

NEXT timer

サクッと導入出来るjavascriptを使ったカウントダウンタイマー