スクロールに合わせてふわっと要素が浮かび上がる、ぼよよんと動きをともなって現れるなどwebサイトにアニメーションをつける為の方法です。
下準備
使うのはanimate.cssとwow.jsというライブラリです。それぞれ説明していきます。
animate.css
まずはanimate.cssをダウンロードしてくる必要があります。
公式サイトは以下で、簡単にどんなアニメーションを実装できるかを試すこともできます。
https://daneden.github.io/animate.css/
ダウンロードは以下のGitlabから可能です。
https://github.com/daneden/animate.css
右側中段あたりにある「Clone or download」という緑のボタンから「Download ZIP」でZIPがダウンロード可能です。
解凍するとanimate.cssがあるのでこちら自身のサイトから読み込みます。
<link rel="stylesheet" href="animate.css">
これでOKです。
wow.js
次はwow.jsというライブラリをダウンロードして設置します。公式サイトは以下になります。
https://wowjs.uk/
ダウンロードは同じように以下のGitlabより可能です。
https://github.com/graingert/wow
ZIPを解凍し、distフォルダの中にあるwow.jsを持ってきて設置します。
<script type="text/javascript" src="wow.js"></script>
あとはHTML内の前に以下の記述を追加します。
<script>
new WOW().init();
</script>
</body>
これで全ての準備が完了です。
ふわっと表示されるアニメーション
animate.cssの公式サイトで実際に動きを見て理想の動きのコードを調べればOKなんですが、ふわっと表示させるの代表的なものは「fadeIn」かと思います。
<div style="background-color: #CFCFCF; width: 200px; margin-bottom: 1000px;" class="wow fadeIn">
<div style="padding: 30px 50px;">ふわっと登場</div>
</div>
アニメーションさせたい要素にクラスを指定します。今回はclass=”wow fadeIn”です。
このfadeInの部分を公式サイトで調べたコードに書き換えれば簡単にアニメーションを作成できます。
ぼよよんと表示されるアニメーション
先ほどのコードのfadeInをbounceInに変えるだけでOKです。
アニメーション多様の難しさ
webサイトに動きがあるのはオシャレ感があるのですが、多用するとうざったくなる危険性が高いです。
たまに全要素がアニメーションするページがありますが、ザーッと一覧を見たい時にいちいちアニメーションを待たなくては行けなくてうっとうしく感じます。
なのでこれをうまく使えるのは一つ一つの要素をじっくり読むようなページかなと思います。
ゲームの公式サイトなんかではゲームらしく動きが多様されていてよくマッチしていると感じますが、新着記事が複数並ぶようなサイトには動きは不要なのかなと。
まとめ
クライアントからの要望などでwebサイトに動きのあるHTMLコーディングをした場合に便利なライブラリの紹介でした。
うまく使えばパララックスっぽく使うこともできたりと簡単なのに便利です。是非活用してみて下さい！