パララックス・エフェクトを使うと、インパクトのある表現が実現します。Webページは縦長のサイトが多いので、スクロールで見た目のインパクトが与えられればユーザの目を引きつけられるでしょう。 今回紹介するLocomotive Scrollはパララックス・エフェクトとDOMの表示されるタイミングを合わせたスクロールライブラリです。

Locomotive Scrollの使い方

デモです。表示される時のアニメーションもいい感じです。

細かくパララックス・エフェクトが適用されています。

表示されたタイミングで文字が動き出しています。

Locomotive Scrollはviewportもサポートされているので、マルチプラットフォームで動作します。スクロールに伴うアニメーションもスムーズです。使いこなすのはデザインも考えないといけないので大変そうですが、パララックス・エフェクトを実装する際に役立つことでしょう。

Locomotive ScrollはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Locomotive Scroll | Detection of elements in viewport & smooth scrolling with parallax effects. locomotivemtl/locomotive-scroll: ? Detection of elements in viewport & smooth scrolling with parallax.