BACKDROP-FILTER EFFECT DEMO
スクロールして
透過ヘッダーの
ぼかしを確認
このページでは、スクロール時に
backdrop-filter を適用したヘッダーがどのように見えるかを確認できます。
背景の変化に注目してください。
このページは以下の記事のデモです。
デモの使い方や詳細な解説は、記事内でご覧いただけます。
サンプルタイトル1
ヘッダーに backdrop-filter を適用すると、背景の要素がぼかされ、視覚的な奥行きが生まれます。この効果により、ページ全体のデザインに一体感を持たせながら、ナビゲーションの可読性を保つことができます。
スクロールして異なる背景に切り替わると、フィルターの強弱がどのように影響するのかを確認できます。
サンプルタイトル2
ヘッダーに backdrop-filter を適用すると、背景の要素がぼかされ、視覚的な奥行きが生まれます。この効果により、ページ全体のデザインに一体感を持たせながら、ナビゲーションの可読性を保つことができます。
スクロールして異なる背景に切り替わると、フィルターの強弱がどのように影響するのかを確認できます。
サンプルタイトル3
ヘッダーに backdrop-filter を適用すると、背景の要素がぼかされ、視覚的な奥行きが生まれます。この効果により、ページ全体のデザインに一体感を持たせながら、ナビゲーションの可読性を保つことができます。
スクロールして異なる背景に切り替わると、フィルターの強弱がどのように影響するのかを確認できます。
サンプルタイトル4
ヘッダーに backdrop-filter を適用すると、背景の要素がぼかされ、視覚的な奥行きが生まれます。この効果により、ページ全体のデザインに一体感を持たせながら、ナビゲーションの可読性を保つことができます。
スクロールして異なる背景に切り替わると、フィルターの強弱がどのように影響するのかを確認できます。
サンプルタイトル5
ヘッダーに backdrop-filter を適用すると、背景の要素がぼかされ、視覚的な奥行きが生まれます。この効果により、ページ全体のデザインに一体感を持たせながら、ナビゲーションの可読性を保つことができます。
スクロールして異なる背景に切り替わると、フィルターの強弱がどのように影響するのかを確認できます。
サンプルタイトル6
ヘッダーに backdrop-filter を適用すると、背景の要素がぼかされ、視覚的な奥行きが生まれます。この効果により、ページ全体のデザインに一体感を持たせながら、ナビゲーションの可読性を保つことができます。
スクロールして異なる背景に切り替わると、フィルターの強弱がどのように影響するのかを確認できます。