wow.jsとanimate.cssを使ってアニメーションをつける方法

コンテンツ制作 2018.09.25

wow.jsとanimate.cssを使ってアニメーションをつける方法を簡単にご紹介します。
デフォルト機能で上下左右からスライドさせることができますが、今回はサイト制作時に斜め下から表示するように「animate.css」をカスタマイズしましたので、そちらも合わせてご紹介します。

wow.jsを使うとスクロールにあわせて、要素をアニメーション表示させることができます。
アニメーションの種類が豊富で簡単に使え、cssを書き換えることで好きな動きにカスタマイズできるので、ちょっと動きをつけたい時には便利です。

使用方法

公式サイト
https://daneden.github.io/animate.css/
公式サイトからanimate.cssをダウンロードするか、CDNを使って設置することもできます。
特にカスタマイズは必要ないという方は、こちらを利用すると便利です。

[Link]https://cdnjs.com/libraries/animate.css
<link href=”https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css” rel=”stylesheet” type=”text/css” media=”all” >

[Link]https://cdnjs.com/libraries/wow
<script src=”https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js”></script>

jsの記述

animate.css、wow.jsを読み込む
====================================
<script>
new WOW().init();
</script>
====================================

スマホでアニメーションを解除したい場合は、「mobile: false」を記述することで、簡単に設定できます。
====================================
<script>
new WOW({
mobile: false
}).init();
</script>
====================================

htmlの記述

htmlへの記述は、動かしたい要素にclassで「wow」と実装したいアニメーションの指定を記述するだけなので、とても簡単です。
各動き、アニメーション名は公式サイト[https://daneden.github.io/animate.css/]で確認できます。

例)要素をフェードインさせる場合。
====================================
html
<p class=”wow fadeIn”></p>
====================================
また、オプションを使い読み込むタイミングやアニメーションの回数、時間などを指定することができます。

オプション

data-wow-duration 要素を秒数をかけて要素を表示(アニメーション開始)させる
data-wow-delay スクロールで要素まで達してから、指定した秒数送らせてアニメーションをスタートさせる
data-wow-offset スクロールが要素に達してから、アニメーションを開始する距離(基準位置は画面下)
data-wow-iteration アニメーションを繰り返す回数

使用例
<p class=”wow fadeIn” data-wow-duration=”1.0s”></p>
<p class=”wow fadeIn” data-wow-delay=”1.0s”></p>
<p class=”wow fadeIn” data-wow-offset=”10″></p>
<p class=”wow fadeIn” data-wow-iteration=”10″></p>

■animate.cssのカスタマイズ
transformプロパティを使いanimate.cssをカスタマイズして、オリジナルの動きを作成します。

斜め下から表示させる場合のカスタマイズ

左からフェードインさせる「fadeInLeft」機能のデフォルト
====================================
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}

to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}

to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
====================================

数値を変更し、アニメーションが始まる位置を変更。
transform:translate3d(X方向の距離, Y方向の距離, Z方向の距離)X方向とY方向とZ方向の距離で3D移動を指定。
要素をfadeInさせる場合、デフォルトでは上下左右の動きのみですが、斜め下からフェードインさせたかったので下記のように変更しました。

「fadeInLeft」のカスタマイズ
====================================
@-webkit-keyframes fadeInLeftUp {
from {
opacity: 0;
transform: translate(-100px,200px);
}
to {
opacity: 1;
transform: translate(0,0);
}
}
@keyframes fadeInLeftUp {
from {
opacity: 0;
transform: translate(-100px,200px);
}
to {
opacity: 1;
transform: translate(0,0);
}
}
.fadeInLeftUp {
-webkit-animation-name: fadeInLeftUp;
animation-name: fadeInLeftUp;
}
====================================

さらに斜め下から回転しながらfadeInさせる

====================================
@-webkit-keyframes fadeInLeftUp {
from {
opacity: 0;
transform: rotate(5deg) translate(-100px,200px);
}
to {
opacity: 1;
transform:rotate(0deg) translate(0,0);
}
}
@keyframes fadeInLeftUp {
from {
opacity: 0;
transform: rotate(5deg) translate(-100px,200px);
}
to {
opacity: 1;
transform: rotate(0deg) translate(0,0);
}
}
.fadeInLeftUp {
-webkit-animation-name: fadeInLeftUp;
animation-name: fadeInLeftUp;
}
====================================

transform: rotate(回転角度deg);
transform: translate(X横方向の距離, Y縦方向の距離);//X方向とY方向の距離で2D移動を指定。
各数値を調整して、好きな動きにカスタマイズできます。

■まとめ
classとオプションの記述のみで、簡単に作成でき、jQueryの記述も不要なため、軽いのもメリットです。
ご紹介した、ちょっとしたカスタマイズもcssで行えるため、手軽に利用できるかと思います。