スクロール時のトップに影の追加方法

2024-02-16 04:49 スクロール影 CSS

CSS box-shadow プロパティを使用する方法: CSSのbox-shadowプロパティを使用すると、要素に影を追加することができます。以下は基本的な例です。
```
.scroll-element {
 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
```
上記の例では、.scroll-elementというクラスを持つ要素に対して、10pxのぼかし半径を持つ黒色の影を追加しています。必要に応じて、色やぼかし半径を調整してください。
JavaScriptを使用する方法: JavaScriptを使用して、スクロールイベントを監視し、要素に影を追加することもできます。以下は簡単な例です。
```
window.addEventListener('scroll', function() {
 var scrollElement = document.querySelector('.scroll-element');
 if (window.scrollY > 0) {
   scrollElement.style.boxShadow = '0px 0px 10px rgba(0, 0, 0, 0.5)';
 } else {
   scrollElement.style.boxShadow = 'none';
 }
});
```
上記の例では、.scroll-elementというクラスを持つ要素を取得し、スクロール位置に応じて影を追加または削除しています。

これらの方法を使用することで、スクロール時に要素のトップに影を追加することができます。コード例は基本的なものですので、必要に応じてカスタマイズしてください。