永遠にスクロールしていたくなる、気持ちいいエフェクト -Intersection Observer Scrolling Effects

Intersection Observerとカスタムプロパティを使用して、グリッドやリストのスクロールビューにアニメーションを適用するテクニックを紹介します。

アニメーションはスクロールに連動して動作し、GridやListなどよく見かけるUIだけでなく、水平スクロールやジッパー・回転などもあります。
どのスクロールエフェクトも軽快な動作で、ちょー気持ちいいです!

サイトのキャプチャ永遠にスクロールしていたくなる、気持ちいいエフェクト -Intersection Observer Scrolling Effects

Intersection Observer Scrolling Effects ✨

Intersection Observerやカスタムプロパティについて詳しくは、下記をご覧ください。

デモページでは、グリッドやリストなどの退屈なスクロールビューにさまざまなアニメーションを適用しています。

Intersection Observerを低閾値(threshold)とカスタムプロパティで使用し、スクロールビューのアニメーションをパワーアップさせています。

グリッドやリストの各アイテムがビューポートに入った時に下記のCSSが適用され、各アイテムのサイズが変化します。

Zipperでは、:nth-of-typeセレクタでジッパーの動きを実装しています。

実際の動作は、下記でご覧ください。

See the Pen
Intersection Observer Scrolling Effects ✨
by Jhey (@jh3y)
on CodePen.

元ネタは下記ツイートより。

sponsors

top of page

©2022 coliss