通常のサイトに比べてスクロールの動きが滑らかなサイトを目にしたことはないでしょうか？
「慣性スクロール」や「スムーススクロール」と呼ばれるもので、スクロール操作を止めた後に少し余韻が残りながらスクロールが継続する表現です。

コンテンツをスムーズに閲覧できる感覚を得やすく、他のアニメーション演出と適切に組み合わせることで自分たちの会社の世界観を情緒豊かに表現できます。

「慣性スクロール」の実装例

こちらが、「慣性スクロール」を実装したもので、通常よりも滑らかな動きを実現できています。

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」を用いて制作したものです。

関連記事

【2025年最新・初心者向け！】Photoshopで画像の背景を自然に伸ばす方法

2025-11-13

【Adobeユーザー必見】Macが重い・容量が減らない原因はコレ！「システムデータ」をスッキリ減らす方法

2025-11-12

【2025年最新 作業時間1分】Photoshopで髪の毛の色を変える小技

2025-09-26

【設定でつまずいて進めない#3】Instagramで広告を出す方法を徹底解説

2025-09-15