この記事は2017年6月23日に書かれたもので、内容が古い可能性がありますのでご注意ください。
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