ライセススタッフが書くブログ。

wow.jsとanimate.cssでhtml要素に簡単に動きをつける!

| Web制作のこと

ブログ更新が少し滞りましたーー(^p^;)

ネタはいっぱいあるのですが、更新する時間を見つけるのが大変ですね♪

 

今回は最近ランディングページ系のホームページでよく見られる、スクロールすると「動くぞコイツ!?」みたいな奴の作り方を紹介していきます。

参考例にすてきなホームページを下記へリンクを貼っておきましたので、併せてご覧下さい。

下へスクロールしていくとお洒落な感じで動きがついて楽しいホームページですね♪

IN NATURAL

 

まず用意するものから。

練習用サンプルのbootstrapテンプレート bootstrap-3.3.5-dist.zip

動きを制御するjsファイル wow.js

動きのもとのcssファイル animate.css

 

以上3つのダウンロードしたら、bootstrapテンプレートファイルにwow.jsとanimate.cssのリンクパスを引いて紐づけてあげましょう!

10-14行目のハイライトされた部分をhtmlファイルのheadへ追記して下さい。

ファイルへのパスはjsファイルとcssファイルを設置した場所へとなります、パスは環境によりけりになりますが、今回のサンプルではwow.jsはjsフォルダへ、animate.cssはcssフォルダへ設置すると上記ソースコード通りになります。

 

次に動きをつけたい要素(divなど)にclassを指定しましょう!

例では分かりやすいheadingのdiv要素に動きをつけていきます。

150722image1

 

 

4行目にあるcontainer > row > col-md-4へ wow fadeInLeft と追記してみました。

ここまで正しく記述できていればローカルのファイルをブラウザで開いて見ると動きがついたのが確認できます。

fadeInLeft部分をanimate.cssに記述されている他の動きのクラス名に書き換えると動きが変更されます。

ここでは試しにdiv要素のcol-md-4全てに適当な動きをつけてみたいと思います。

無駄に長くてすみませんXD

animate.cssではナウい動きがいっぱいコンパイルされていて見てるだけでも楽しいので、ナイスなアニメーションを是非探してみて下さい。

 

今回のサンプルソースの完成がこちらになります。

完成サンプル

 

今回紹介出来ませんでしたが。

wow.jsではもっと動きを制御してあげる事も可能です、例えばスクロール量が300pxを超えたらアニメーションスタート、何回再生させるか、などなど。

お時間ある時にまたご紹介します。




Webを作るのは人。

INFORMATION

raisez(ライセス)に興味を持った方は、是非チェックをしてください。

Webを楽しむのは人。

CONTACT

Web制作、Webビジネスのご相談はお気軽にご連絡ください。

お問い合わせ
TOPへ戻る