スクロールに合わせて要素をアニメーション！ ScrollRevealの使用方法

こんにちは。都築です。
Webページを魅力的に見せる方法は多々あるかと思います。
ScrollRevealを使用すると、ページのスクロールに合わせ、アニメーションの様な見せ方をすることができます。
今回は、ScrollRevealの使い方をご紹介したいと思います。

環境

今回の説明で使用している開発環境は以下のとおりです。

デモ

まず、ページのスクロールに合わせアニメーションの様な見せ方とはどのような感じか、以下に公式のデモがありますので、ご覧頂ければと思います。http://scrollrevealjs.org
ページのスクロールに合わせて、様々な色のバーが表示されていくのが分かるかと思います。
このようにScrollRevealを使用することで、アニメーションのようなページを作成することができます。

ScrollRevealのダウンロード

ScrollRevealはGitHubからダウンロードできます。


「Download ZIP」をクリックでzipファイルをダウンロードし、zipファイルを解凍するとフォルダの中に「scrollreveal.min.js」が入っています。

ScrollRevealの使い方

ScrollRevealは大きく分けると以下の3ステップで使用することができます。
基本的に「どの要素」を「どう動かすか」を指定するだけですので、とても簡単に実装することが可能となっています。

1. ScrollReveal.min.jsをhtmlに読み込む
2. ScrollRevealでアニメーションする要素の初期化を行う
3. ScrollRevealでアニメーションする要素にクラスと動作を設定する

それでは、3ステップを詳しく見ていきます。

ScrollReveal.min.jsをhtmlに読み込む

ダウンロードで入手したScrollReveal.min.jsをHTMLに読みこみます。
※パスの指定は環境に合わせて修正してください。

<script src="js/scrollreveal.min.js"></script>

ScrollRevealでアニメーションする要素の初期化を行う

アニメーションする要素に指定するクラスを指定し、アニメーションする要素の初期化を行います。
※要素によって動作を変える場合は各要素のクラス全ての初期化も行います。

<style>
  .sr{
    visibility: hidden;
  }
</style>

ScrollRevealでアニメーションする要素にクラスと動作を設定する

アニメーションする要素にクラスと動作を記述します。
記述方法はこちらです。

前段で初期化したScrollReveal用のクラス「sr」を設定し、どのような動作をするか「.srOpt-項目1_値–項目2_値–…」の形式で設定します。
※値に小数を指定する場合は「ドット」の代わりに「f」を記載します。

例えば、アニメーションの開始時は20%の大きさで2000ミリ秒かけて表示する場合は下記の様に設定します。

<div class="sr srOpt-scale_0f2-duration_2000" ></div>

ScrollRevealでのアニメーションの設定

最後にどのような動作を設定できるのかまとめたものを記載します。
下記設定を組み合わせることによって、要素にアニメーションを設定します。

まとめ

Webページを作成する上で、どうすれば魅力的なページになるかはとても難しい課題かと思います。
スクロールに合わせ、簡単なアニメーションにするだけで、印象が変わりますので、ぜひ試して頂ければと思います。