こんにちはデザインチームオカベです。
最近横スクロールサイトに触れる機会があり、その際に使用したJSライブラリ「Locomotive Scroll」が中々面白かったのですが、あまり解説サイトが見つからなかったのと、思い通りに動かすのに苦労したので備忘録的にまとめたいと思います。
Locomotive Scrollとは
Locomotive Scrollは、今回は題名を横スクロールとしましたが、本来はスクロールに伴い要素をアニメーション表示させたり、パララックスエフェクトを簡単に実装できるライブラリです。
PC・スマホの両方で動作します。
スクロールがスムーズで各要素が独特なアニメーションをしているかと思います。
横スクロールのサンプル
公式デモページは通常の縦サイトでしたので、横スクロールデモを用意しました。(スマホは縦スクロールです)
Locomotive Scrollの設定方法
基本設定
GitHubからライブラリをダウンロードし、「locomotive-scroll.min.js」を読み込ませます。
<script src="js/locomotive-scroll.min.js"></script>
LocomotiveScrollを適用させたい領域に「data-scroll-container」を追記する。
<div data-scroll-container></div>
jsファイルに以下を記述し、LocomotiveScrollを起動します。
var scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true,
direction: 'horizontal',
multiplier: 1,
horizontalGesture: true
});
ここでポイントになるのが、「direction:'horizontal'」です。このオプションを追加することで横スクロール対応になります。
「multiplier: 1」はスクロールの速度で、数字が大きいほどスクロール速度が早くなります。
要素のアニメーション設定
要素をアニメーションさせるには、下記の記述を追記していきます。逆に記述の無いものはアニメーションはしません。
基本設定
アニメーションさせたい要素に「data-scroll」を追記します。これを記述することでスクロールした時にその要素が現れたタイミングで処理が発生します。
<span data-scroll>アニメーションさせたい要素</span>
速度をコントロール
速度は「data-scroll-speed」で設定します。数値が大きいほどアニメーション速度が早くなります。正負の値が設定でき、正の場合はスクロールに対して逆方向（近づいてくる感じ）で負の場合はその逆（遠ざかる感じ）です。
この設定を要素毎にバラつかせることで、個々のアニメーションにズレが起きパララックスの表現が実現できます。
<span data-scroll data-scroll-speed="-2">アニメーションさせたい要素</span>
基準位置を設定
アニメーションの起点になる基準を設定できます。「left」「right」「center」があり、デフォルトはcenterのようです。rightにすると位置調整がかなり難しくなるので基本はleftで良いと思います。
<span data-scroll data-scroll-speed="-2" data-scroll-position="left">アニメーションさせたい要素</span>
タイミングを設定
「data-delay」を設定するとアニメーションのタイミングをずらすことができます。要素が現れてすぐアニメーションさせるのではなく、少し間を開けて動かしたい場合などで使用します。
<span data-scroll data-scroll-speed="-2" data-scroll-position="left" data-delay="0.05">アニメーションさせたい要素</span>
縦方向に動かす
「data-scroll-direction」を「vertical」にすることで上下方向にも要素を動かすことができます。
<span data-scroll data-scroll-speed="-2" data-delay="0.05" data-scroll-direction="vertical">アニメーションさせたい要素</span>
ページ内リンクの設定
ページ内リンクにも対応しています。
ただ注意点として、リンクに以下の記述が必要なのと、リンク自体を「data-scroll-container」要素の中に設置する必要があります。それ以外が通常のページ内リンクの設定と同じです。
<a href="#section1" data-scroll-to>section1</a>
といった感じで「Locomotive Scroll」の利用自体はそこまで難しくはないのですが、横スクロールさせるのにレイアウトの調整や、アニメーションさせる要素の位置調整などCSSの調整が必要で癖が強いライブラリだなぁという印象でした。
ただ横スクロールさせるなら手っ取り早いとも思いますので、機会がある方は利用してみてください。
