CSS에서 스크롤 효과를 얻는 방법

CSS는 스크롤 효과를 구현합니다

스크롤 효과는 일반적으로 웹 사이트 페이지 디자인의 다양한 상호 작용, 애니메이션 및 탐색에 사용됩니다. 대부분의 기존 웹사이트 스크롤 효과는 HTML+CSS를 통해 얻을 수 있습니다. 이 기사에서는 그 중 몇 가지를 간략하게 소개합니다.

1. 오버플로 및 위치 속성 사용

HTML 태그 래핑된 콘텐츠(예: div)의 오버플로 속성은 스크롤이며, 위치 속성을 사용하여 콘텐츠 영역의 위치를 ​​결정하여 스크롤 효과를 얻습니다. 코드는 다음과 같습니다.

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

2. 변환 속성을 사용하세요

변환 속성의 번역Y 또는 번역X를 사용하여 스크롤 효과를 얻고 변위를 통해 콘텐츠를 스크롤합니다. 코드는 다음과 같습니다.

.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);

3. 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);
   }
}

4. 휠 이벤트 모니터링 사용

휠 이벤트를 듣고 요소의 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;
});

Summary

위는 스크롤 효과를 얻기 위한 몇 가지 일반적인 CSS 방법을 사용하는 경우 특정 요구 사항에 따라 가장 적절한 방법을 선택합니다. CSS를 사용한 구현은 코드를 단순화할 뿐만 아니라 웹 페이지를 더욱 유동적이고 동적으로 만들고 사용자 경험, 구성 요소 관리 및 디버깅을 용이하게 합니다.

위 내용은 CSS에서 스크롤 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!