CSSでスクロール効果を実現する方法-フロントエンドQ&A-php.cn

CSSでスクロール効果を実現する方法

PHPz

リリース： 2023-04-21 14:09:43

オリジナル

2283 人が閲覧しました

スクロール効果を実現するCSS

スクロール効果は通常、Webサイトのページデザインにおけるさまざまなインタラクション、アニメーション、ナビゲーションに使用されます。従来の Web サイトのスクロール効果のほとんどは HTML CSS によって実現できますが、この記事ではそのいくつかを簡単に紹介します。

オーバーフロー属性と位置属性を使用する

コンテンツ (div など) をラップする HTML タグのオーバーフロー属性はスクロールであり、位置属性を使用してコンテンツの位置を決定します。コンテンツ領域をスクロール効果を実現します。コードは次のとおりです。

<div style="width:400px; height:200px; overflow:scroll; position:relative">
   <div style="width:600px; height:600px; position:absolute; top:0; left:0"> <!-- 内容区域 -->
     <!-- 内容部分 -->
   </div>
</div>

ログイン後にコピー

transform 属性の使用

transform 属性の translationY または translationX を使用すると、スクロール効果を実現し、ディスプレイスメントによってコンテンツをスクロールできます。コードは次のとおりです。

.container{
   width:400px;
   height:200px;
   overflow:hidden;
}
.content{
   width:600px;
   height:600px;
   transform: translateY(0);
   transition: transform 0.2s ease-out;
}

ログイン後にコピー

JS コード部分は次のとおりです。

let content = document.querySelector('.content');
let offsetY = 0; //内容向上偏移的距离
setInterval(() => {
   content.style.transform = `translateY(-${offsetY}px)`;
   offsetY += 1;
}, 50);

ログイン後にコピー

CSS アニメーションを使用する

CSS アニメーションでスクロール効果を実現できます。シンプルでスムーズなインタラクションエフェクト。コードは次のとおりです。

.container{
   width:400px;
   height:200px;
   overflow:hidden;
}
.content{
   width:600px;
   height:600px;
   animation: scroll 5s linear infinite;
}
 @keyframes scroll {
   0% {
     transform: translateY(0);
   }
   100% {
     transform: translateY(-400px);
   }
}

ログイン後にコピー

ホイールイベントモニタリングを使用する

ホイールイベントをリッスンし、要素のscrollTop値またはscrollLeft値を変更することで、手動スクロール効果。コードは次のとおりです:

<div style="width:400px; height:200px; overflow:scroll">
  <div style="width:600px; height:600px"> <!-- 内容区域 -->
    <!-- 内容部分 -->
  </div>
</div>

ログイン後にコピー

JS コード部分は次のとおりです:

let content = document.querySelector('.content');
let step = 100; //每次滚动的距离
document.querySelector('.container').addEventListener('wheel', function(event){
   event.preventDefault();
   content.scrollTop += event.deltaY > 0 ? step : -step;
});

ログイン後にコピー

概要

上記は、スクロール効果を実現するためのいくつかの一般的な CSS 方法です。、特定のニーズに応じて最も適切なものを選択してください。 CSS を使用した実装は、コードを簡素化するだけでなく、Web ページをより流動的かつ動的にし、ユーザーエクスペリエンス、コンポーネントの管理、およびデバッグを容易にすることもできます。

以上がCSSでスクロール効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。