WEBページをスクロールすると、上下左右からコンテンツが現れたり、ふわっとフェードインして現れる表現を見かけたことがあると思います。
管理人は長らく「jQuery+CSSのアニメーション」を使った方法で実装してきましたが、今更ながら「ScrollReveal」なるJsのライブラリを見つけて試してみたところ、簡単で使いやすかったので忘備録として、使い方や設定方法についてご紹介いたします。
このページのコンテンツ
ScrollRevealとは？
jQueryに依存しないJavaScript製のライブラリで、CDNも利用可能なので軽量です。
メリット
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('')に動かしたいクラスを指定します。また、全ての同一の要素に指定したい場合はh1やpなど、要素を指定することもできます。
//クラス名を指定する場合
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の構築・障がい者の就労支援としてホームページ制作の職業指導員も行っております。
