[WEB] jQueryで簡単に動きを付ける
25 02 2016
簡単に動きを付けれるjQueryをご紹介致します。
今回ご紹介するjQueryはHPに簡単に動きが付けれる「wow.js」です。
HPをスクロールして表示されたら、指定した色々なアニメーションで表示させることが出来ます。
デモサイトはこちらWOWデモサイト
動きのバリエーション「animate.css」を利用しています。
動きのバリエーションは、こちらから確認できます。Animate.css
【 使い方の説明 】
01.WOW.jsファイルをダウンロードします。GitHub WOW
<head>に「animate.css」「wow.js」「スクリプト」をセットします。
<head> ... <link rel="stylesheet" href="css/libs/animate.css"> <script src="js/jquery-1.10.1.min.js"></script> <script src="dist/wow.js"></script> <script> new WOW().init(); </script> ... </head>
02.「wow.js」の要素を設定します。
「class="wow"」を入力します。
<div class="wow"> 動きをつけたいコンテンツ </div>
03.「Animate.css」の動きを設定します。
Animate.cssから好きな動きを確認し、今回は「bounceInUp」を使用した場合下記コードのように書きます。
<div class="wow bounceInUp"> 動きをつけたいコンテンツ </div>
これで完成です。
