Spotlight List
カードにスポットライトが当たって色が反射するような、ちょっとだけ贅沢なUIを作成してみました。
- Tokyo Tower 🗼PCにてご覧ください 🙏
- Good Beer 🍺PCにてご覧ください 🙏
June 2024
画像付きのリストUI（Bento Grid等）で使用する、マウスストーカーのようなギミックを実装してみました。実際には、カーソルの動きに要素が追従しているわけではなく、radial-gradientで作成したグラデーションを変化させています。
- onMouseMoveとgetBoundingClientRectを用いて、カード内での座標を算出
- radial-gradientの円の基点を動的にする
x0
y0
g.style.backgroundImage = `radial-gradient(circle at ${x}px ${y}px ,rgba(255,255,255,0.2), transparent 70%)Copied
子要素（カード）ごとにグラデーションを設置しており、親要素 のonMouseMoveで子要素のグラデーション全てを操作しています。
是非、ご参考にされてみてください。
まるで工芸品のようなクラフト型コンテンツ
プロダクトの魅力を伝えるための、機能的なウェブコンテンツを発信しませんか？
CMSやマークダウンを用いた、従来の単なるテキストによる記事型コンテンツではなく、技術者が直接コードを書いて執筆することで、より顧客と積極的に関わり合いを持てるようなデジタル体験を提供することが可能です。
あなたのサイトをもっと魅力的にみせるお手伝いが出来るかもしれません。メディアサイト制作、ウェブコンテンツ制作をご希望の企業様は、お気軽にお問い合わせください。