スクロールと連動したアニメーションが簡単に実装できる「wow.js」

こんばんは！社員Aです👩

ここ最近はやっと毎日ブログ更新が続けられています。これを習慣にして、有益な記事をたくさん書けるように頑張りたいと思います。

ブログのネタは主に今まで勉強したことの備忘録か新しいニュースを書いているんですが、備忘録の方はまだまだ沢山残しておきたいことがあるので、整理して今後うまく更新していければなと思っています！

さて、今回はスクロールと連動したアニメーションが簡単に実装できる「wow.js」の使い方について書いていきます。

主流になったスクロール連動型アニメーション

最近のWEBサイトには、結構な確率でこのスクロール連動アニメーションが導入されているのを見かけます。

スクロールするたびにコンテンツがふわっと浮き出たり、左右から出てきたりするアニメーションです！

私は今まで何度か、お客様のサイトでスクロールアニメーションを実装してきたことがあるのですが、その度に色々なjsを試してみて、今回ご紹介する「wow.js」が一番簡単だったので、最近はこのjsに落ち着いています。

こちらのブログにも使用しています。

「サイトに実装したいけどどの方法が良いかわからなくて調べている」「お客さんからこのアニメーションを要望されたけどどうやって実装するの？」という方に見ていただけると嬉しいです。

早速使っていきましょう！

私がこのjsを使う前に色々と調べてみて、「wow.js」と「animate.css」を一緒に使うとカスタマイズ性が広がるということがわかったので、今回はこのやり方でご紹介していきます。

ダウンロード

「animate.css」と「wow.js」はそれぞれ下記の公式サイトからダウンロードしてください。

daneden.github.io

 

5 Tweets

2120 Shares

739 Users

6957 Pockets

Animate.css

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

mynameismatthieu.com

 

2391 Shares

135 Users

1435 Pockets

Reveal Animations When Scrolling — WOW.js

http://mynameismatthieu.com/WOW/

WOW.js is a JavaScript plugin that reveals animations when you scroll. Very Animate.css Friend.

サイトに読み込む

ダウンロードした「animate.css」と「wow.js」を読み込みます。

<link rel="stylesheet" type="text/css" href="/css/animate.css">
<script src="/js/wow.js"></script>
<script>
new WOW().init();
</script>

サイトのパスに合わせて変えてくださいね！☺

アニメーションを実装したいパーツにクラスを付与

サイトに読み込んだら、続けてアニメーションをつけたいパーツにクラスを付与します。

今回はテキストがスイングするアニメーションを実装しました。

<div class="animated swing wow">テキスト</div>

付与するクラスは、下記の3つです。

• ・アニメーションを有効にするクラス「.animated」
• ・アニメーションのクラス「.swing」（※後述のクラスから好きなものを選べます。）
• ・wow.jsを有効にする「.wow」

2番目のアニメーションのクラスは、どの様なアニメーションをつけたいかによって変わります。

公式サイトから選べますので、下記ご覧ください。（ドロップダウンから効果のデモとクラス名が見られます。）

daneden.github.io

 

5 Tweets

2120 Shares

739 Users

6957 Pockets

Animate.css

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

応用して時間差で表示させることも可能

前項でご紹介した部分にdate属性を追加すれば、アニメーションスタートのタイミングや持続時間を設定できます。

例えば、下記のように追加すれば、3秒後にアニメーションが始まり、1秒持続します。

<div class="animated wow shake" data-wow-duration="1s" data-wow-delay="3s">テキスト</div>

まとめ

animate.cssとwow.jsを組み合わせれば、かなりの種類のスクロールアニメーションが実装できます！

デザイナーやお客さんの要望通りの実装ができること間違いなしです。

スクロールアニメーションを実装することで、動いているコンテンツに自然と目が行きますし、写真やイラストであればインパクトが出せますね。

主流となったスクロールアニメーションを簡単に実装できるので、是非試してみてください！

このパターンさえ覚えておけば、今後もスクロールアニメーション楽勝！！（笑）