ブログ

【JavaScript】コンテンツのフェードインなどアニメーションを簡単に設定できる「ScrollReveal」の設定と使い方

WEBページをスクロールすると、上下左右からコンテンツが現れたり、ふわっとフェードインして現れる表現を見かけたことがあると思います。

管理人は長らく「jQuery+CSSのアニメーション」を使った方法で実装してきましたが、今更ながら「ScrollReveal」なるJsのライブラリを見つけて試してみたところ、簡単で使いやすかったので忘備録として、使い方や設定方法についてご紹介いたします。

ScrollRevealとは?

jQueryに依存しないJavaScript製のライブラリで、CDNも利用可能なので軽量です。

メリット

  • jQueryに依存しないので軽量
  • フェードインなどの動作は予めオプションとして定義されてるので動作用のCSSが不要
  • とにかく実装が簡単!

ScrollRevealの設定方法

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

ライブラリの読み込み

<script src="https://unpkg.com/scrollreveal"></script>

動かしたい要素にクラスを付与

アニメーションさせたい要素にクラスを付与します。

<div class="wrap">
<ul>
<li class="fade">テキスト1</li>
<li class="fade">テキスト2</li>
<li class="fade">テキスト3</li>
<li class="fade">テキスト1</li>
<li class="fade">テキスト2</li>
<li class="fade">テキスト3</li>
<li class="fade">テキスト1</li>
<li class="fade">テキスト2</li>
<li class="fade">テキスト3</li> 
</ul>
</div>

アニメーションの実装

ライブラリからScrollReveal関数を呼び出しreveal()メソッドでアニメーションを作成。

reveal('')に動かしたいクラスを指定します。また、全ての同一の要素に指定したい場合はh1pなど、要素を指定することもできます。

//クラス名を指定する場合
ScrollReveal().reveal('.fade');

//要素を指定する場合
ScrollReveal().reveal('h1');

デモを見る

ScrollRevealのオプション

ScrollRevealには豊富なオプションが用意されています。オプションを指定することでアニメーションを詳細に指定することが可能です。

以下は.fade1.fade3までの要素を1秒開かけて再生し、開始時間を0.5秒ずつずらしてフェードインさせます。

ScrollReveal().reveal('.fade1', {
	// アニメーションが完了するまでの時間
  duration: 1000,
	// アニメーション開始までの時間
  delay: 500
});

ScrollReveal().reveal('.fade2', {
	// アニメーションが完了するまでの時間
  duration: 1000,
	// アニメーション開始までの時間
  delay: 1000 
});

ScrollReveal().reveal('.fade3', {
	// アニメーションが完了するまでの時間
  duration: 1000,
	// アニメーション開始までの時間
  delay: 1500
});
<div class="wrap">
<p>↓スクロールしてください。</p>
<ul>
<li class="fade1">テキスト1</li>
<li class="fade2">テキスト2</li>
<li class="fade3">テキスト3</li>
</ul>
</div>

デモを見る

オプション項目

オプション 効果 設定値
delay アニメーション開始までの時間をミリ秒(1秒=1000ミリ秒)単位で設定 数値
distance 要素を動かす場合に指定。
※どの方向から動くかを指定するには「origin」で指定。
px / em / % /
duration アニメーションが完了するまでの時間を、ミリ秒(1秒=1000ミリ秒)単位で設定 数値
opacity アニメーション開始時の要素の不透明度を設定 数値
0~1
※CSSのopacity設定と同様
origin アニメーション開始時に、要素がどの方向から動いてくるかを設定 top、right、bottom、left
rotate 要素を回転させながら表示したい場合に設定 数値(X軸、Y軸、Z軸の3次元設定を行う)
scale 要素を拡大縮小しながら表示したい場合に設定。
開始時の大きさの設定
数値
desktop デスクトップブラウザでアニメーションを有効/無効にする true/false
mobile モバイルブラウザでアニメーションを有効/無効にする true/false
useDelay アニメーションをいつ発生させるかを設定
要素が画面に映る時は常にアニメーションさせるか、1回アニメーションした要素は対象外とするか、ページを読み込んだときに実行するか
・always(いつでもアニメーション適用)
・once(最初の1回だけアニメーション適用)
・onload(ページを読み込んだ時にアニメーション適用)

この記事を書いた人管理人

SAKURAGRAPHICA代表
会社員の傍ら、フリーランスでWEBサイトの制作やWordPressによるCMSの構築・障がい者の就労支援としてホームページ制作の指導を行っております。

SAKURAGRAPHICAができること

最近の記事 おすすめ記事
PAGE TOP