10秒で実装！スクロールすると下から横からふわっとコンテンツを表示させる方法

画面をスクロールすることで、画面の端からふわっとコンテンツが表示されるWEBサイト良いですよね。
アニメーションのタイミングやスピードでそのサイトの世界観を作り上げる事が出来るので、是非取り入れたいテクニックの一つではないでしょうか。

ふわっと表示させる系はライブラリが豊富でいろいろな実装方法がありますが、今回はおそらく最も手軽に「ふわっと表示されるコンテンツ」を実装できるjsライブラリ「ScrollReveal.js」をご紹介致します。

ScrollReveal.jsの導入方法

ScrollReveal.jsは、特定の要素に対して「表示 or 非表示」のアニメーションを手軽に実装できるJavaScriptライブラリです。
MicrosoftのPowerPointなどでお馴染みのアニメーション「フロートイン」と「フロートアウト」などを、コードをコピペするだけで再現することができます。

公式サイトはこちらですhttps://scrollrevealjs.org/

では早速、ScrollReveal.jsの導入方法を見ていきましょう。

scriptタグの書き方

公式サイトからファイルもダウンロードできますが、ScrollReveal.jsはCDNを利用出来るのこちらの方がお手軽で速いです！
以下のCDNをhead内に記述しましょう。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Funpkg.com%2Fscrollreveal%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

要素の指定方法

次はアニメーション効果を実装する要素をつくっていきましょう。
たとえばh1タグををアニメーションさせたい場合は次のように書きます。

<h1 class="アニメーションさせる要素のクラス名">
ふわっと表示する見出し
</h1>

そしてscriptで下記を読み込むだけ。

$(function(){
            ScrollReveal().reveal('.アニメーションさせる要素のクラス名');
        });

なんとたったこれだけで、要素をフェードイン表示することができます！

僅か10秒で実装できてしまいましたね。

ScrollReveal.jsのオプション

ひとまずこれだけでも「ふわっと表示」を実現することはできますが、ScrollReveal.jsはオプションも豊富。
活用することで更に素敵なアニメーションにすることができます。

ScrollReveal.jsのオプションの種類

	説明	値
delay	アニメーション発生のタイミングを遅延させることができます。	数値型。ミリ秒単位で設定可能
distance	要素を移動させながら表示する場合に設定します。px、%などを指定し、どのくらいの距離を移動させるのかを設定します。	文字列型。px/em/%
origin	オプション「distance」と一緒に使います。要素がどの方向から移動してくるのかを設定します。	文字列。top/right/bottom/left
duration	アニメーション完了までの速度を遅延させることができます。要素の表示を早めるorゆっくりさせるときに使います。	数値型。ミリ秒単位で設定可能
opacity	アニメーション開始前の要素の不透明度を設定できます。デフォルトでは、要素は完全非表示になっています。	数値型。0〜1
rotate	要素を回転させながら表示させるときに設定します。	X、Y、Z軸で回転を指定できます。rotate: { x: 0, y: 0, z: 0 }
scale	アニメーション開始時点での要素の大きさを設定します。要素を拡大させながら表示させたいときに使います。	数値型。デフォルトは0.9。2倍なら2、半分なら0.5
delay	アニメーション発生のタイミングを遅延させることができます。	数値型。ミリ秒単位で設定可能

以上が、アニメーションをグレードアップさせるためによく使いそうなオプションです。
今回紹介したオプションはあくまで一部です。より詳細に設定したい方は、ぜひ公式サイトでオプションの種類と使い方ご確認ください。

ScrollReveal.jsのオプションの使い方

ではこれらのオプションの使い方をみていきましょう。
「ScrollReveal.jsの導入方法」で書いたコードに手を加えていきます。

今回は、以下の条件のアニメーションを作っていきます。

• アニメーションの発生を、500ミリ秒遅延させる
• 要素は右側から200px移動させながら表示する

これらの条件を達成するためには「delay」「distance」「origin」の3つのオプションを設定する必要があります

では早速取り掛かっていきましょう。
bodyタグ内に入力したコードを、以下のように書き換えます。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%09ScrollReveal().reveal('.%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%95%E3%81%9B%E3%82%8B%E8%A6%81%E7%B4%A0%E3%81%AE%E3%82%AF%E3%83%A9%E3%82%B9%E5%90%8D'%2C%20%7B%20delay%3A%20500%2C%20distance%3A%20'50px'%2C%20origin%3A%20'right'%20%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

これで条件に合致するアニメーションを再現することができました。

しかしこれではコードが見づらいですね。
オプションが1つ2つの場合は良いのですが、複数設定する場合は今後のことをふまえて下記のようにコードをきれいに整えていきましょう。

先ほど書いたコードを以下のように書き換えます。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%09var%20%E4%BB%BB%E6%84%8F%E3%81%AE%E5%A4%89%E6%95%B0%E5%90%8D%3D%20%7B%0A%09%09delay%3A%20500%2C%20%2F%2F%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E7%99%BA%E7%94%9F%E3%82%BF%E3%82%A4%E3%83%9F%E3%83%B3%E3%82%B0%0A%09%09distance%3A%20'200px'%2C%20%2F%2F%E8%A6%81%E7%B4%A0%E3%81%AE%E7%A7%BB%E5%8B%95%E8%B7%9D%E9%9B%A2%0A%09%09origin%3A%20'right'%20%2F%2F%E8%A6%81%E7%B4%A0%E3%81%8C%E7%A7%BB%E5%8B%95%E3%81%97%E3%81%A6%E3%81%8F%E3%82%8B%E6%96%B9%E5%90%91%0A%09%7D%3B%0A%09ScrollReveal().reveal('.%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%95%E3%81%9B%E3%82%8B%E8%A6%81%E7%B4%A0%E3%81%AE%E3%82%AF%E3%83%A9%E3%82%B9%E5%90%8D'%2C%20%E4%BB%BB%E6%84%8F%E3%81%AE%E5%A4%89%E6%95%B0%E5%90%8D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

オプションを配列変数化し、その変数を引数として与えるようにしました。
このようにコードを記述することで、保守のときにも迷わず編集できるのではないでしょうか？

まとめ

カッコいいアニメーションがコピペだけで実装できるなんて、すごくありがたいライブラリですよね。
こういったアニメーションはjQueryで実装する場合が多いですが、こちらはjQueryに依存せず単体で実現可能です。

jQueryについては以下の記事で詳しく解説しております。

他のアニメーション用ライブラリを実装しない案件であれば、このScrollReveal.jsが最適ですね。
皆様もぜひ使ってみてください。