デザイン処理がJavascriptなのかCSSなのか実現方法を教えてください。

実現したいこと

こちらの海外のサイトなのですが、
スクロールすると、Y軸トップ0-15pxくらいがぼかされます。
この方法が知りたいです。

●調べたところ、
・サイトはワードプレス。
・lenisというライブラリは使用しています。
・GSAPを使っているのか？
・丸ごとダウンロードしても、index.htmlは

<div id="content" data-template="home" data-id="2"></div> で中身がない。（サイトがPWA化しているから？）・index.cssとmain.jsというのがあるが、コードが多すぎてわからない。

●もしかして、
・CSSでfixedで固定し、その部分をabsoluteで上のレイヤーにし、blur（●px）にしている？

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

●もしかして、
・CSSでfixedで固定し、その部分をabsoluteで上のレイヤーにし、blur（●px）にしている？

いい線いってます。
index.cssにて
.navのposition: fixed;でヘッダ部分を上部に固定化
.nav_blur>div:nth-of-type(N)のbackdrop-filter: blur(Npx);で背景のぼかし効果を適用しています。（Nは各要素に対応した数値）

投稿2025/04/16 06:41