永遠にスクロールしていたくなる、気持ちいいエフェクト -Intersection Observer Scrolling Effects
Post on:2022年8月23日
sponsors
Intersection Observerとカスタムプロパティを使用して、グリッドやリストのスクロールビューにアニメーションを適用するテクニックを紹介します。
アニメーションはスクロールに連動して動作し、GridやListなどよく見かけるUIだけでなく、水平スクロールやジッパー・回転などもあります。
どのスクロールエフェクトも軽快な動作で、ちょー気持ちいいです！
Intersection Observer Scrolling Effects ✨
Intersection Observerやカスタムプロパティについて詳しくは、下記をご覧ください。
- Intersection Observerが簡単で便利！要素がビューポートに表示されているかを判定できる
- Intersection Observerを使用すると実装が簡単に！Vue.jsでスクロールイベントをトリガーする方法
- CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説
デモページでは、グリッドやリストなどの退屈なスクロールビューにさまざまなアニメーションを適用しています。
Intersection Observerを低閾値（threshold）とカスタムプロパティで使用し、スクロールビューのアニメーションをパワーアップさせています。
|
1 |
el.style.setProperty('--shown', entry.isIntersecting ? 1 : 0) |
グリッドやリストの各アイテムがビューポートに入った時に下記のCSSが適用され、各アイテムのサイズが変化します。
|
1 |
li { scale: calc(0.25 + (var(--shown, 1) * 0.75));} |
Zipperでは、:nth-of-typeセレクタでジッパーの動きを実装しています。
|
1 2 3 4 5 6 7 8 |
.card { --distance: 250%; transform: translateX(calc((var(--distance) * -1) + (var(--shown, 1) * var(--distance)))); } li:nth-of-type(4n) .card { --distance: -250%; } |
実際の動作は、下記でご覧ください。
See the Pen
Intersection Observer Scrolling Effects ✨ by Jhey (@jh3y)
on CodePen.
元ネタは下記ツイートより。
JavaScript && CSS Tip! ✨
Use IntersectionObserver(IO) with a low threshold and custom properties to power list animations 🔥https://t.co/rYj0GJ5Xks.setProperty('--shown', entry.isIntersecting ? 1 : 0)
li { scale: calc(0.25 + (var(--shown, 1) * 0.75));}
Demo link below! 👇 https://t.co/KC9Q3roJWM pic.twitter.com/sWfMJYxdkV
— Jhey 🔨🐻✨ (@jh3yy) August 13, 2022
sponsors
