制作のご相談はこちら
パーツごとにふわっと表示させるプラグイン「ScrollReveal」を設置してみる

2017年06月23日

パーツごとにふわっと表示させるプラグイン「ScrollReveal」を設置してみる

WEBサイトをリッチコンテンツにさせる方法は多々あるかと思います。
よく見かけるのがコンテンツのパーツごとにふわっとフェードインさせるアニメーションです。
動きのあるサイトになるので、サイトの質がワンランクアップしますよ。

今回はScrollRevealというプラグインを使用します。
設置が簡単でわかりやすいのでおすすめです。

JSファイルをダウンロード、HTMLファイルへ読み込む

githubからscrollreveal.min.jsをダウンロードして、HTMLファイルに読み込みをします。

<script src="…任意のディレクトリ…/scrollreveal.min.js"></script>

トリガーオプションを追記

動かし方のオプションを任意のクラス名で設定します。
この記述をscrollreveal.min.jsの後に追加します。

window.sr = ScrollReveal({ アニメーション全体のオプションをここで設定});
sr.reveal( '任意のクラス名', { クラス別のオプションをここで設定});

オプション一覧

origin: アニメーションの方向
distance: どれくらい離れた位置からアニメーションを始めるか
duration: アニメーションが完了するまでの時間
delay: どのくらい遅れてアニメーションを始めるか
scale: アニメーションを始めた時の大きさ
opacity: アニメーションを始めた時の不透明度
mobile: モバイル時でもアニメーションを適用するか
reset: 要素が見えるたびにアニメーション表示させるか
useDelay: delayで設定したアニメーションを適用するタイミング
viewFactor: 要素がどのくらい見えた時点でアニメーションを適用するか

その他オプションはこちらからご確認ください。

設定例

window.sr = ScrollReveal({ reset: true ,mobile: true});
sr.reveal( '.top', { origin: 'top' , distance: '20%', duration: 500 , scale: 1.0, delay :200 ,opacity: 0,});

動かしたいHTMLにクラス名を追加

<p class="top">動かしたいコンテンツ</p>

デモページを作成しましたのでこちらからご確認ください。
DEMO