Locomotive Scrollについて

Locomotive ScrollはどんなJavaScriptライブラリ？

公式サイト・デモ：https://locomotivemtl.github.io/locomotive-scroll/
Github：https://github.com/locomotivemtl/locomotive-scroll

Locomotive Scrollはパララックスやアニメーション、横方向にコンテンツを展開させるなど、スクロールエフェクトを実装する為のJavaScriptライブラリです。
要素をふわっと登場させるだけの演出ではなくよりリッチな演出の実装がとても簡単になります。
Locomotive Scrollを使用する場合、jQueryは必要ありません。

また使用する前に知っておきたい点として、ブラウザデフォルトのJavaScriptで強制的に置き換える行為はアクセシビリティやユーザビリティを犠牲にしてしまう可能性があるという事です。
Locomotive Scrollも本来ブラウザが請け負うスクロール機能を置き換える事になりますので注意してください。

Locomotive Scrollの作例

Locomotive Scrollを使って制作・公開されているサイトと共にLocomotive Scrollで表現できる事を紹介します。

1.慣性スクロール

Locomotive Scrollにも様々な機能がありますが、慣性スクロールさせるだけでもWebサイトをの印象が少し違った演出にできます。

1. SNOWS - SNOWS＜スノー＞　
   https://snows-winter.com/

2. オールコネクト 採用サイト
   https://www.all-connect.jp/recruit/

2.要素の固定表示

逆に一部の要素をスクロールさせずにその場に固定させる事もできます。
CSSでposition: stickyを設定するようなイメージですね。

1. 経営哲学 | 株式会社x garden
   https://x-garden.co.jp/philosophy/

少しわかりずらいかもしれませんが、こちらのページ中盤で「CEO MESSAGE」というテキストが画面中央で固定されます。

3.横スクロール

いくつかの設定でおおまかに横スクロールレイアウトが実装できます。
相当個性的なサイトに仕上がりますね。

1. sakata
   https://sakata-kasuri.jp/

Locomotive Scroll実装サイト事例

こちらのページでLocomotive Scrollを使って制作されたサイト事例をまとめています。
実際のサイトやコードを参考にしてみください。

Check WebTech 「Locomotive Scroll が採用されたサイト事例一覧」
https://cwt.jp/category/85