montblan9.net

デザインと、趣味と、ときどきアダルト。

2014.02.24 / 

可愛いだけじゃない!WOW.js が予想以上に使いやすい!

MontBlanc.です。

本日はWOW.jsについてお話したいと思います。

スクリーンショット 2014-02-23 23.13.40

いぬかわいい。

 

使い方

まずは公式サイトからWOW.jsをダウンロード。

次に、動作に必要となるAnimate.cssとWOW.jsを読み込む。

<!--animate.css-->
<link rel="stylesheet" type="text/css" href="css/animate.css">

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

これで完了!
あとはアニメーションをさせたいものにCLASS値を入れるだけ。
画像はもちろん、テキストなどもすすっと動きます!
アニメーションについては、ブラウザのウィンドウに表示された時点で再生されるようです。

<div class="wow bounceInDown">WOWで動くよ!</div>

サンプルはこちら

 

応用してみる

WOW.jsはAnimete.CSSというアクションを起こせるCSSのものをひとしきり使えます。

アニメーションの時間を調整する

<div class="wow bounceInDown" data-wow-duration="2s">WOWで動くよ!</div>

wowのCLASS値を入れている箇所にdata-wow-durationを入れます。
2sで2秒、1.5sのように小数点の使用も可能のようです。

アニメーションを開始する時間を調整する

<div class="wow bounceInDown" data-wow-delay="5s">WOWで動くよ!</div>

wowのCLASS値を入れている箇所にdata-wow-delayを入れます。
これも小数点の表示が可能

 

まとめ

アクションの順序を変えたり、アクションの種類など、書いていないこともありますが、
ざっくりとはこんな感じ。

導入が簡単であることが何よりの魅力ですね。jQueryも使わないってのが良い。
これを使えばけっこう簡単にパララックスなんとかってサイトも作れそう!笑

みなさんもお試しあれ!

WOW.js
animate.js

Tweet about this on TwitterShare on FacebookEmail this to someoneShare on TumblrPin on PinterestShare on LinkedInDigg this
animate.cssrevine-oldWEBデザインWOW.jsパララックス

MontBlanc. • 2014/02/24


Previous Post

Next Post

montblan9.netの情報をプッシュ通知で受け取る

montblan9.netの最新情報やイチオシ情報をプッシュ通知で受け取ることができます。>>詳しくはこちら

コメントを残す

Your email address will not be published / Required fields are marked *