CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法

まもなくリリースされるChrome 115で実装されるScroll-driven Animationsにより、スクロールをトリガーにしたアニメーションの実装方法が大きく変わります。 スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーター、背景が変化するパララックスなど、実装がそれなりに手間がかかりましたが、数行のコードで実装できるようになります。スクロールをトリガーにしたアニメーションを実装するこれからの方法を紹介します。 Animate elements on scroll with Scroll-driven animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分が同ライセンスも含みます。 はじめに Webのアニメーション、ちょっとだけおさらい アニ

[coliss]

Chrome 115で実装されるScroll-driven animationsにより、スクロールをトリガーにしたアニメーションの実装方法が大きく変わります。

[sisya]

正直、PC(マウス)からも、スマホからも疲れるだけの操作系なのでやめてほしい。少量ギミックとして実装されているならいいのだが、縦読みコミックレベルでスクロースさせられると、内容のなさに辟易としてしまう。

[ustam]

CSSとJavaScriptでそれぞれ進化していくの、やめて欲しい。どちらを使うのが正解なのかよくわからなくなる時がある。

[snobsnog]

とにかくなんか動かしとけば素敵みたいなの早く廃れないかな

[isshyman]

MacのChrome最新版が114なので、まだ実装されていなかった

[genhou]

スクロールアニメーション、とても嫌われていて草。私も無駄だと思う。何より、そんなものを実装するのにかけている時間が無駄。

[emj1025]

使うときは意図をもって導入する

[Mecoysvase]

こんなもの廃れてしまえと思うが客が入れたいって言うからなぁ

[abababababababa]

gsapで足りてたんじゃよ。

[raebchen]

スクロールするといろいろ表示されるのマジうっとうしい😡 いちいち「×」クリックして消さなきゃならん😡 誰一人喜ばんもの実装して誰が得すんだ😡

[okishima_k]

スクロールに合わせて色々やるサイトはスマホで見ても割と鬱陶しいし、1366x768のノートで見てもキツい。デスクトップモニタだとどうなんだろう。

[croissant2003]

リーダーツールでテキストだけ抽出すると快適。対応しないもので価値のあるテキストコンテンツはごくわずかなので無視してよい。スクロールトリガーアニメなど無駄。

[ultimatebreak]

スクロールにあわせたなんらかの動きがあるサイトは見づらいし読みづらいしめんどくさいので良くないデザインだと思うんだよなあ…

[MzdA0w73tg]

登録フォームとかでユーザー心理的に進捗率表示あると良いから、1ページ登録フォームとかでこれがcssだけで出せるなら結構良いかも。

[w_bonbon]

Safariが出来ないことがどんどん増えていく…。オラっ速く開発しろオラっってGoogleが攻めてるw

[kawaosa]

Chrome115から実装