これでSafariにも実装できる！ スクロールをトリガーにしたアニメーションのポリフィル -Scroll-timeline Polyfill

Post on:2023年9月5日

先日の記事で、CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法を紹介しました。Chrome 115から実装された新機能ですが、ネックはSafariのサポートだと思います。

Scroll-driven Animationsの仕様で定義されているScrollTimelineとViewTimelineのポリフィルがリリースされ、これでSafariでも動作します。

スクロールをトリガーにしたアニメーションのポリフィル -Scroll-timeline Polyfill

Scroll-timeline Polyfill -GitHub

まずは、Scroll-driven Animationsの簡単な紹介を。
スクロールをトリガーにしたアニメーションは、最近のWebサイトでよく見かけます。Appleの新製品ページもスクロールをトリガーに要素をアニメーションで表示しますね。

実装にはJavaScriptを使用したり、かなり複雑なCSSが必要でしたが、数行のコードで実装できるようになります。スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーター、背景が変化するパララックスなど、実装がそれなりに手間がかかりましたが、これらが簡単に実装できます。

デモのキャプチャ

CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法
※デモや実装方法を解説しています。

Chrome 115, Edge 115でサポートされましたが、やはりSafariでのサポートがないと、、、そこでポリフィルです。

このポリフィルを使用すると、ScrollTimelineまたはViewTimelineを使用したアニメーションがSafariでも機能します。
実際の動作は、デモページでご覧ください。

サイトのキャプチャ

デモページ

ページの上部のパララックスだけでなく、ズームアウト、パノラマ、ビフォーアフターのデモもあります。
Safari 16.6で確認したところ、Chromeと同じように機能しました。

サイトのキャプチャ

デモページ

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

sponsors

top of page

©2024 coliss