CSSで実装できるのか! iPhone 15 Proのページで見かけたスクロール駆動のダイナミックアイランドを実装するテクニック

先週発表されたiPhone 15のWebページに、面白い仕掛けが実装されていました。Appleは新製品のページにはスクロール駆動のアニメーションを多数取り入れており、今回のはスクロール駆動のダイナミックアイランドです。

このスクロール駆動のダイナミックアイランドをCSSで実装するテクニックを紹介します。下記のアニメーションは少しゆっくりめにしています。

AppleのiPhone 15 Proのページで見かけたスクロール駆動のダイナミックアイランドをCSSで実装するテクニック

ダイナミックアイランド(Dynamic Island)とは、iPhone 14 Proで実装された機能で、カメラのパンチホール部分のスペースを利用して実行しているアプリのアクティビティを表示します。サイズはアプリごとに最適化されます。
参考: iPhone 14 ProのDynamic Islandの使い方 | Appleサポート

で、今回のiPhone 15 Proのページにスクロール駆動のダイナミックアイランドが多数実装されています。コンテンツによって、要素やサイズが変わるのもうまく再現されています。

サイトのキャプチャ

iPhone 15 Pro -Apple

このスクロール駆動のダイナミックアイランドを再現したデモページは、下記からどうぞ。
※デモはChrome 115+でご覧ください。

See the Pen
Apple Style CTA Reveal with CSS scroll-driven animations
by coliss (@coliss)
on CodePen.

実装のポイントは、JavaScriptを使用せずに、@containerのスタイルクエリとスクロール駆動のアニメーションを使用して実装されています。

アイデアは、下記の通り。

  1. ダイナミックアイランドがある各セクションをスコープとするスクロール駆動のアニメーションを使用して、カスタムプロパティ値(--activate)を1から0に変更します。
  2. @containerのスタイルクエリを使用して、transition-delayを利用して各移動部分の遷移シーケンスを設定します。
  3. アニメーションには、liner()イージングを使用しています。

これらは単独でも強力ですが、組み合わせることでさらに強力になります。

さらに詳しくは、下記をご覧ください。

元ネタは下記ポストより。

sponsors

top of page

©2024 coliss