JavaScriptのIntersection Observerでスクロールに合わせてグラデーションの色を変更する2023年2月7日 JavaScript 新しいMacbook Proが発売され、特設ページが公開されています。そのページの中で私の目に止まったのは、Macbook Proのスペックではなく、スクロールに合わせて動くグラデーションカラーのテキストでした。今回はこれをJavaScriptの Intersection Observer を使って実装した例を紹介します。 この記事は動画でも紹介しています。動画派の方はこちらを御覧ください！ このテキストを実装したい！ Macbook Proの紹介ページにあるグラデーションカラーのテキストです。スクロールするとグラデーションの位置も変わるのがわかりますね！ Intersection Observerとは？ 従来、スクロールに合わせて要素を操るには scroll というイベントを利用していました。ただ、それだと画面サイズが変わったら再計算しないといけ
CSSグラデーションで作った背景パターンのサンプル - NxWorld
CSS Gradient Set - Creative VIP
メタルの質感が美しい、ゴールドとシルバーのグラデーション素材
新着記事
