通常のサイトに比べてスクロールの動きが滑らかなサイトを目にしたことはないでしょうか？
「慣性スクロール」や「スムーススクロール」と呼ばれるもので、スクロール操作を止めた後に少し余韻が残りながらスクロールが継続する表現です。
コンテンツをスムーズに閲覧できる感覚を得やすく、他のアニメーション演出と適切に組み合わせることで自分たちの会社の世界観を情緒豊かに表現できます。
「慣性スクロール」の実装例
こちらが、「慣性スクロール」を実装したもので、通常よりも滑らかな動きを実現できています。
See the Pen Lenis.js Smooth Scroll Sample by qoorus (@qoorus) on CodePen.
次に、「慣性スクロール」を実装しなかった場合の振る舞いです。
動きがさっきよりもカクカクしていますが、多くのサイトではこの表現です。
See the Pen Lenis.js Smooth Scroll Sample by qoorus (@qoorus) on CodePen.
「慣性スクロール」含め、いろいろなアニメーション技法を組み合わせると、こういった表現も可能になります。
See the Pen Untitled by qoorus (@qoorus) on CodePen.
https://lenis.darkroom.engineering
先ほど紹介した慣性スクロールの例は「Lenis」を用いて制作したものです。