クリック単価11円の男 / セールス
クリック単価11円の男 / セールス
2020.01.27
#207
それいけ!フロントエンド

ScrollReveal.jsを使ってスクロールしたらふわっと表示される動きを作ってみよう

ぜんちゃん

こんにちは!

2019年11月に入社しました、フロントエンドエンジニアのぜんちゃんです。

もともとはシステム開発の運用をしており、主にSalesforceやデータベースを触っていましたが、自社HPのリニューアルに携るきっかけがあり、Web制作に興味を持ちました。

Webサイト制作の手伝いをしたり、自分でWebアプリケーションを作ってみたりと、スキルアップのために行動していたところ、この度フロントエンドエンジニアとしてLIGに入社することになりました!

フロントの中でも、とくにアニメーション実装に興味があります。アニメーション実装の基礎などをこれからブログ記事書いていきたいと思っておりますので、よろしくお願いします!!

今回は、スクロールしたらふわっと表示されるアニメーションを、ScrollRevealを使って簡単に実装してみたいと思います!

ScrollRevealとは

JavaScript library to animate elements as they scroll into view.
スクロールして表示される要素をアニメーション化するJavaScriptライブラリ

要素が画面に表示されたら、指定したアニメーションを実行してくれる優れものです。

「ふわっと表示」「下から表示」「遅れて表示」など簡単に実装することができます。

公式サイト:https://scrollrevealjs.org/

ScrollRevealの使い方

ライブラリ読み込み

使い方は簡単。ライブラリをscriptタグで読み込み、対象の要素にクラスを与えてJavaScriptからアニメーションを指定するだけです。

CDNは公式サイトのインストールから読み込みます。

// 最新バージョンの場合
<script src="https://unpkg.com/scrollreveal"></script>

// バージョン指定
<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>

npm でインストールする場合は下記コマンドを実行してインストールして下さい。

npm install scrollreveal --save

対象の要素にクラスを与える

次にアニメーションをつけたい要素にクラスを追加します。

土台となるHTMLを用意しました。これにJavaScriptを追加してアニメーションを実装していきます。

今回は、アニメーションをつけたい要素にboxクラスを指定しました。

アニメーション実装

次に、1で読み込んだライブラリからScrollRevealという関数を呼び出し、reveal()メソッドを使ってアニメーションを作成します。

一行! それだけ!!!

ScrollReveal().reveal('.box');

この一行を追加するだけで、スクロールでふわっと表示されるようになります。

ScrollRevealのオプション追加

ScrollRevealでは下記のようにオプションを指定することで、アニメーションの詳細な動きを指定することができます。

ScrollReveal().reveal('.box', { 
  duration: 800, // アニメーションの完了にかかる時間
  viewFactor: 0.2, // 0~1,どれくらい見えたら実行するか
  reset: true   // 何回もアニメーション表示するか
});

どのようなオプションがあるかは公式サイトより確認することができます。

今回は公式サイトの中から、一部抜粋してまとめました。

オプション 説明
delay ミリ秒単位の時間 アニメーションが実行されるまでの時間
distance px/em/% 表示された時に要素が移動する距離
duration ミリ秒単位の時間 アニメーションの完了にかかる時間
duration CSS timing function(ease,ease-inなど) アニメーションがどのように遷移するか
delay ミリ秒単位の時間 アニメーションが実行されるまでの時間
interval ミリ秒単位の時間 各公開間の時間
opacity 0~1 表示される前の不透明度
origin top/right/bottom/left 要素がどの方向から来るか
scale 数字 表示される前の要素のサイズ
desktop true/false デスクトップブラウザでアニメーションを有効/無効にする
mobile true/false モバイルブラウザでアニメーションを有効/無効にする
reset true/false viewportを離れる時に初期化された位置に戻る要素を有効/無効にする

いろいろな表示アニメーションを試してみる

先ほどのオプションを指定して、いろいろなパターンを試してみました。

まとめ

こういったアニメーションは使いどころを考える必要がありますが、適切な場面で使えば大きな効果が出ると思います。

使う場面があればぜひこちらのライブラリを使用してみてください。

それではまた! ぜんちゃんでした。