AMG Solution

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

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

環境

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

ScrollReveal 3.3.2
OS Windows 8.1
ブラウザ Google Chrome 54.0.2840.71

デモ

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

ScrollRevealのダウンロード

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

「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に読みこみます。
※パスの指定は環境に合わせて修正してください。

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

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

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

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

sr srOpt-項目1_値–項目2_値–…

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

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

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

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

         内容 設定可能な値
origin     アニメーションの開始方向 ‘bottom’, ‘left’, ‘top’, ‘right’
distance アニメーションで移動する距離 ‘5rem’, ‘10%’, ’20vw’, etc
duration アニメーションの時間 数値(単位はmilliseconds)
delay アニメーション開始までの待機時間 数値(単位はmilliseconds)
opacity アニメーション開始時の不透明度 0(完全に透明)~1(完全に不透明)
scale アニメーション開始時の要素の大きさ 数値(1で100%の大きさ)
easing アニメーションの種類 ease, ease_in_out, linear, etc.
mobile モバイル端末でも実行するか true, false(trueの場合はモバイル端末でも実行)
reset 要素がページに入る度に実行するか true, false(trueの場合は毎回実行)
useDelay delayで設定した値を使用するか

always:毎回, once:最初の1度だけ, onload:最初のロード時のみ。
viewFactor 要素がどの程度ページに入った時に、アニメーションを実行するか 数値(単位は%)
beforeReveal         アニメーションの開始前に実行する処理 function (domEl) {}
beforeReset アニメーションのリセット前に実行する処理 function (domEl) {}
afterReveal アニメーションの開始後に実行する処理 function (domEl) {}
afterReset アニメーションのリセット後に実行する処理 function (domEl) {}

まとめ

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

TSUDUKI'S BLOG

都築健二の記事

都築健二の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

マイナビ2019 採用エントリーはじめました。
LOADING