순수 CSS를 통해 웹 페이지에서 부드러운 스크롤 배경 그라데이션 효과를 얻는 방법-CSS 튜토리얼-php.cn

순수 CSS를 통해 웹 페이지에서 부드러운 스크롤 배경 그라데이션 효과를 얻는 방법

WBOY

풀어 주다： 2023-10-25 11:19:43

원래의

1672명이 탐색했습니다.

순수 CSS를 통해 웹 페이지에서 부드러운 스크롤 배경 그라데이션 효과를 얻는 방법

순수한 CSS를 통해 웹 페이지에서 부드러운 스크롤 배경 그라데이션 효과를 얻는 방법

1. 소개

웹 디자인에서 배경 그라데이션 효과는 웹 사이트에 아름다움과 역동성을 더할 수 있습니다. 부드러운 스크롤 배경 그라데이션은 웹 페이지를 더욱 매력적으로 만들고 사용자에게 편안한 탐색 경험을 제공할 수 있습니다. 이 기사에서는 순수 CSS를 통해 웹 페이지의 부드러운 스크롤 배경 그라데이션 효과를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

2. 배경 그라데이션 효과 구현 원리

부드러운 스크롤 배경 그라데이션 효과를 구현하기 전에 먼저 배경 그라데이션 구현 원리를 이해해야 합니다. CSS에서는 선형 그라데이션() 함수를 통해 배경 그라데이션 효과를 얻을 수 있습니다. 이 함수는 시작 색상과 끝 색상을 받아들이고 선택한 방향과 위치에 따라 그라데이션을 채웁니다.

3. 부드러운 스크롤 배경 그라데이션 효과 구현 단계

스크롤 효과가 있는 컨테이너를 만듭니다.

<div class="container">
  <!-- 网页内容 -->
</div>

로그인 후 복사

.container {
  height: 100vh;
  overflow-y: scroll;
}

로그인 후 복사

컨테이너는 vh 단위를 사용하여 높이를 뷰포트 높이로 설정하고, 스크롤할 오버플로우-y 속성을 설정하여 수직 스크롤 효과를 얻습니다.

배경 그라데이션 효과를 추가하세요.

.container {
  background: linear-gradient(to bottom, #000000, #ffffff);
}

로그인 후 복사

컨테이너의 CSS 스타일에서 배경을 검정색(#000000)의 시작 색상과 흰색(#ffffff)의 끝 색상으로 선형 그라데이션으로 설정합니다. 위에서 아래로의 그라데이션을 나타내기 위해 방향은 아래로 설정됩니다.

스크롤 이벤트 리스너를 추가하세요.

스크롤하는 동안 배경 그라데이션의 위치를 업데이트하려면 JavaScript를 통해 컨테이너에 스크롤 이벤트 리스너를 추가하세요.

const container = document.querySelector('.container');

container.addEventListener('scroll', () => {
  const scrollTop = container.scrollTop;
  const scrollHeight = container.scrollHeight;
  const windowHeight = window.innerHeight;
  const progress = (scrollTop / (scrollHeight - windowHeight)) * 100;

  container.style.backgroundPositionY = `${progress}%`;
});

로그인 후 복사

스크롤 이벤트의 콜백 함수에서 컨테이너의 스크롤 위치 scrollTop, 컨테이너의 전체 높이 scrollHeight 및 뷰포트 높이 windowHeight를 얻고 스크롤 진행에 따라 배경 그라데이션의 위치를 업데이트합니다. 비율 진행률을 계산하여 배경 그라데이션 위치의 부드러운 스크롤 효과를 얻습니다. 마지막으로 backgroundPositionY 속성을 설정하여 업데이트된 변수를 배경 그라데이션에 적용합니다.

4. 전체 코드 예시

<!DOCTYPE html>
<html>
<head>
  <title>平滑滚动背景渐变效果</title>
  <style>
    .container {
      height: 100vh;
      overflow-y: scroll;
      background: linear-gradient(to bottom, #000000, #ffffff);
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 网页内容 -->
  </div>

  <script>
    const container = document.querySelector('.container');

    container.addEventListener('scroll', () => {
      const scrollTop = container.scrollTop;
      const scrollHeight = container.scrollHeight;
      const windowHeight = window.innerHeight;
      const progress = (scrollTop / (scrollHeight - windowHeight)) * 100;

      container.style.backgroundPositionY = `${progress}%`;
    });
  </script>
</body>
</html>

로그인 후 복사

위는 순수 CSS를 통해 웹페이지의 부드러운 스크롤 배경 그라데이션 효과를 구현하는 구체적인 단계와 코드 예시입니다. 위의 방법을 통해 웹사이트에 동적 배경 그라데이션 효과를 추가하여 사용자의 탐색 경험을 향상시킬 수 있습니다. 이 기사가 도움이 되기를 바랍니다.

위 내용은 순수 CSS를 통해 웹 페이지에서 부드러운 스크롤 배경 그라데이션 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!