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

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

PHPz

풀어 주다： 2023-10-24 09:02:25

원래의

1418명이 탐색했습니다.

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

순수한 CSS를 통해 웹 페이지의 부드러운 스크롤 배경 효과를 얻는 방법

배경은 웹 디자인에서 매우 중요한 부분으로, 페이지의 시각적 효과와 사용자 경험을 향상시킬 수 있습니다. 기존 웹 페이지 배경은 일반적으로 정적이지만 순수 CSS 기술을 사용하면 부드러운 스크롤 배경 효과를 얻을 수 있어 웹 페이지에 더욱 역동적이고 생생한 시각적 효과를 추가할 수 있습니다. 이 기사에서는 CSS를 사용하여 부드러운 스크롤 배경 효과를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 준비

부드러운 스크롤 배경 효과를 구현하기 전에 기본적인 HTML 및 CSS 코드를 준비해야 합니다. 먼저 기본 HTML 파일을 만든 다음 CSS 파일을 삽입하여 CSS 파일에 코드를 작성하여 부드러운 스크롤 배경 효과를 얻을 수 있도록 해야 합니다. 다음은 기본 HTML 구조의 예입니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="background"></div>
  <div class="content">
    <!-- 网页内容 -->
  </div>
</body>
</html>

로그인 후 복사

위의 예에서는 배경 레이어(div.Background)와 콘텐츠 레이어(div.content</code >)를 만들었습니다. , 배경 레이어는 부드러운 스크롤 배경 효과를 구현하는 데 사용되고 콘텐츠 레이어는 다른 웹 콘텐츠를 배치하는 데 사용됩니다. <code>div.background）和一个内容层（div.content），背景层将用来实现平滑滚动背景效果，而内容层将用来放置其他网页内容。

二、实现平滑滚动背景效果

接下来，让我们来编写CSS代码，实现平滑滚动背景效果。以下是代码示例：

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* 占满整个可视区域 */
  background-image: url(background.jpg); /* 背景图片路径 */
  background-size: cover; /* 背景图片适应屏幕尺寸 */
  background-position: center; /* 背景图片居中显示 */
  z-index: -1; /* 确保背景层在内容层下方 */
  animation: scrollBackground 30s linear infinite; /* 启用滚动动画 */
}

@keyframes scrollBackground {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(50%);
  }
}

로그인 후 복사

在上面的CSS代码中，我们首先将网页的body元素的overflow属性设为hidden，以隐藏滚动条。然后，我们使用position: fixed将背景层固定在视口中，width: 100%和height: 100vh将背景层的大小设置为和可视区域一样，background-image和background-size属性用来指定背景图片的路径和缩放方式，background-position属性用来控制背景图片的位置。最后，我们使用animation属性将滚动动画应用到背景层上，其中scrollBackground是我们定义的动画名称，30s表示滚动一次的时间，linear表示动画的过渡方式是线性的，infinite表示动画无限循环播放。在动画的@keyframes规则中，我们使用transform属性的translateY

2. 부드러운 스크롤 배경 효과 달성

다음으로 부드러운 스크롤 배경 효과를 얻기 위한 CSS 코드를 작성해 보겠습니다. 다음은 코드 예입니다.

rrreee

위 CSS 코드에서 먼저 웹페이지 body 요소의 overflow 속성을 hidden, 스크롤바를 숨깁니다. 그런 다음 <code>position:fixed를 사용하여 뷰포트의 배경 레이어를 고정하고 width: 100% 및 height: 100vh를 사용하여 크기를 설정합니다. 배경 레이어의 가시 영역과 마찬가지로 배경 이미지 및 배경 크기 속성은 배경 이미지, 배경의 경로 및 크기 조정 방법을 지정하는 데 사용됩니다. -position 속성은 배경 이미지의 위치를 제어하는 데 사용됩니다. 마지막으로 animation 속성을 사용하여 스크롤 애니메이션을 배경 레이어에 적용합니다. 여기서 scrollBackground는 우리가 정의한 애니메이션의 이름이고 30s는 한 번 스크롤됨을 의미하고, linear는 애니메이션 전환이 선형임을 의미하고, infinite는 애니메이션이 무한 루프로 재생된다는 것을 의미합니다. 애니메이션의 @keyframes 규칙에서는 transform 속성의 translateY 함수를 사용하여 수직 스크롤 효과를 얻습니다.

3. 효과를 사용해 보세요

위 코드를 완성한 후 브라우저에서 HTML 파일을 열어 부드러운 스크롤 배경 효과를 볼 수 있습니다. 페이지를 스크롤하면 배경 레이어가 부드러운 스크롤 방식으로 나타나 마치 그곳에 있는 듯한 느낌을 줍니다. 🎜🎜요약🎜🎜순수한 CSS 기술을 통해 웹 페이지의 부드러운 스크롤 배경 효과를 쉽게 얻을 수 있습니다. 단 몇 줄의 CSS 코드만으로 웹 페이지에 역동적이고 생생한 시각 효과를 추가할 수 있습니다. 이 글의 내용이 여러분에게 도움이 되기를 바라며, 만족스러운 부드러운 스크롤 배경 효과를 얻을 수 있기를 바랍니다! 🎜

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