コーディングの勉強

【簡単】wowで要素をふわっと表示させたりシュッと表示させるアニメーションをつける

こんにちは。mito(@mito_works)です。

今回は、jQueryのライブラリーを使って要素がふわっと登場するアニメーション
を簡単に実装する方法です。

momo
momo
こんな動きが簡単にできるよ!

こんな人におすすめ

Webサイトに動きをつけて個性や世界観を表現したい人

mito
mito
使い方、順を追って解説します!

ダウンロード

ソースコードをgithub上から取得します。
https://github.com/graingert/wow

momo
momo
WOW.js本家の商用利用には有料の公式ライセンスが必要なので、無料で商用利用できるMIT版をダウンロードしたよ!

フォルダへの配置

ダウンロードするとたくさんファイルやフォルダがありますが、必要なものはdistフォルダとanimate.cssのみです。

mito
mito
distフォルダとanimate.cssをコーディングしているフォルダに配置します。

HTMLの記述

HTMLの手順
  1. ライブラリを読み込む
  2. アニメーションの指定をする
    <link rel="stylesheet" href="css/animate.css">
    <script src="dist/wow.min.js"></script>

 

momo
momo
wow.min.jsはjqueryを読み込まないと動かないので必ずjqueryの記述の後に書いてね。
<div class="col-lg-4 col-md-6 col-sm-12">
    <div class="card wow bounceInLeft" data-wow-duration="1s" data-wow-delay="1s">
       <img class="card-img-top" src="img/card-img.svg" alt="">
           <div class="card-body text-left">
              <h4 class="card-title">タイトルタイトル</h4>
              <p class="card-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
           </div>
     </div>
</div>
mito
mito
wow bounceInLeft この部分で左からシュッと出てくるアニメーションの指定をしています。

wowクラスはスクロールが来た時にアニメーションを動かすための宣言。

bounceInLeftクラスはアニメーションの種類です。

オプションの解説

data-wow-duration アニメーションの時間
data-wow-delay アニメーションがスタートするまでの時間
data-wow-offset アニメーションスタートの距離
data-wow-iteration アニメーション繰り返しの回数
mito
mito
アニメーションの時間(data-wow-duration)とアニメーションがスタートするまでの時間(data-wow-delay)この2つの指定で十分かと思います!

jQueryの記述

jsでwowを使いますということを宣言しないと使えません。
(以下はscript.jsでの記載内容です)

new WOW().init();

 

スクロールされるたびに動きをつけたい場合

data-wow-iterationでアニメーションの回数を指定するのではなくて、スクロールされるたびに動きをつけたい場合は以下のように書きます。

    $(window).scroll(function(){
        new WOW().init();
    });

 

アニメーションの種類

momo
momo
こちらにアニメーションの種類一覧があるので自分好みのアニメーションを見つけてみてね!

https://github.com/daneden/animate.css

mito
mito
ちなみに私は「flipInX、rollIn」が好きです!

まとめ

jQueryのライブラリーwowのご紹介でした。
簡単に様々な種類のアニメーションが実装できることがお分りいただけたと思います。

ただし、あくまでスクロールというアクションがないと動作しないのでご注意ください!

ABOUT ME
mito
こんにちは!mitoです。 2児の母で、会社員。 現在は複業でWebデザイナーをしています。 2019年1月からWebデザインの勉強を始めました。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、フリーランスを模索しています。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。