ScrollRevealは、要素が可視範囲に入った時に、アニメーションさせながら要素を表示させることができるスクリプトです。jQueryや他のCSSに依存せず、ScrollReveal単体で動作します。また、サイズも軽量でわずか8.8KBしかありません。
動きについては、以下デモサイトでご確認いただけます。
今回は、このScrollRevealを使ってパララックス効果を加える方法をご紹介したいと思います。
ScrollRevealの導入手順
ステップ1. ScrollRevealのダウンロードと設置
まずはGitHubからScrollRevealをダウンロードします。ダウンロードしたファイル一式を解凍し、scrollreveal.min.jsをサーバーにアップロードしてください。
サーバーにファイルを設置したら、scrollreveal.min.jsを読み込みます。
<script src="js/scrollreveal.min.js"></script>
ファイルパスは適宜変更してください。
ファイルを自サーバーに設置したくない場合は、CDN経由でも提供されています。
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
ステップ2. HTMLのマークアップ
HTML側では、パララックス効果を加えたい要素にクラスを追加しておきます。
<div class="parallax">パララックス効果を加えたい要素</div>
クラス名は任意のもので大丈夫です。
ステップ3. ScrollRevealの実行
最後に、ScrollRevealを実行するためのスクリプトを記述します。記述場所は、</body>の直前でOKです。
<script>
window.sr = ScrollReveal();
sr.reveal('.parallax');
</script>
「.parallax」のところで、HTML側に付与しているクラスを指定します。
オプションも指定する場合は、以下のように記述しましょう。
<script>
window.sr = ScrollReveal();
sr.reveal('.parallax', {
easing: 'ease', //イージング('ease' 'ease-in' 'ease-out' 'ease-in-out'など)
origin: 'bottom', //アニメーションの基点
duration: 500, //アニメーションの時間
distance: '50px', //アニメーションの距離
delay: 0, //アニメーションの遅延
useDelay: 'always', //遅延の条件('always' 'once' 'onload')
opacity: 0, //アニメーション開始時の透明度
scale: 0.8, //アニメーション開始時のスケール
container: '.fooContainer', //アニメーションを実装するコンテナ
rotate: { x: 0, y: 0, z: 0 }, //アニメーション開始時の傾き
mobile: true, //falseにするとモバイルでのアニメーション停止
reset: false, //trueにすると表示の度にアニメーション再生
viewFactor: 0.2, //アニメーションを開始するために必要な要素の表示割合
viewOffset: { top: 0, right: 0, bottom: 0, left: 0 } //要素のオフセット。固定ヘッダーなどがある場合に指定
});
</script>
オプションを指定することで細かく動きを制御できますね。
あとがき
実装も簡単なので、サイトにパララックス効果を追加したい時は、ScrollRevealを導入してみてはいかがでしょうか。