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

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

인터넷 기술의 지속적인 발전으로 웹 페이지의 디자인은 점점 더 다양해지고 복잡해졌습니다. 보기 좋은 웹 페이지에는 세부 사항과 혁신에 대한 주의가 필요한 경우가 많습니다. 그 중 부드러운 스크롤 배경의 빈 효과는 최근 몇 년간 점점 인기를 얻고 있는 디자인 요소 중 하나입니다. 이 효과는 웹 페이지를 더욱 생생하고 흥미롭게 보이게 하며 사용자의 관심과 관심을 끌 수 있습니다.

이 글에서는 순수 CSS를 통해 웹 페이지의 부드러운 스크롤 배경 빈 효과를 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 멋진 웹 페이지 배경 효과를 만드는 방법을 배워보세요!

먼저 기본적인 HTML 문서 구조를 만들어야 합니다. 태그에는 배경 이미지가 있는 <div> 요소를 웹페이지의 배경으로 배치합니다. 코드는 다음과 같습니다. <code>标签中，我们将放置一个带有背景图片的<div>元素作为我们的网页背景。代码如下：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;平滑滚动背景镂空效果&lt;/title&gt; &lt;style&gt; body { margin: 0; padding: 0; overflow-x: hidden; } .background { position: relative; width: 100vw; height: 100vh; background-image: url('background.jpg'); background-size: cover; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;background&quot;&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><p>上述代码中，我们定义了一个<code>.background类，其样式中包含了一个背景图片，宽高为100vw和100vh，分别表示100%屏幕宽度和100%屏幕高度，使背景图片能够完全覆盖整个屏幕。

接下来，我们需要为网页添加一个滚动效果，并在滚动时实现背景的镂空效果。这里我们使用CSS中的background-attachment和background-clip属性来实现。代码如下：

.background {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

在上述代码中，background-attachment设为fixed表示将背景图片固定在视口，使其不会随滚动而移动。background-repeat设置为no-repeat则表示不重复平铺背景图片。background-position设为center表示将背景图片居中显示。

接下来，我们通过设置-webkit-background-clip为text，并将-webkit-text-fill-color设为transparent来实现背景的镂空效果。其中，-webkit前缀是为了兼容一些不支持最新CSS规范的浏览器。

最后，我们使用JavaScript代码来实现平滑滚动的效果。代码如下：

document.addEventListener('DOMContentLoaded', () => {
  const background = document.querySelector('.background');

  window.addEventListener('scroll', () => {
    const scrollTop = window.scrollY || window.pageYOffset;

    background.style.backgroundPositionY = `${scrollTop * 0.5}px`;
  });
});

在上述代码中，我们监听scroll事件，获取滚动距离并根据滚动的距离来调整背景的位置。这里通过改变backgroundPositionY来实现滚动背景移动的效果。

通过以上的代码示例，我们可以实现一个平滑滚动背景镂空效果的网页。你也可以根据自己的需求来调整代码中的样式和参数，制作出更加个性化的网页。

总结起来，通过纯CSS实现网页的平滑滚动背景镂空效果需要使用background-attachment、background-cliprrreee

위 코드에서는 .ground 클래스를 정의합니다. 이 클래스의 스타일에는 너비와 높이가 100vw 및 100vh인 배경 이미지가 포함되어 있으며 이는 100% 화면 너비를 나타냅니다. 배경 이미지가 전체 화면을 완전히 덮도록 화면 높이를 각각 100%로 설정합니다.

다음으로 웹페이지에 스크롤 효과를 추가하고 스크롤 시 배경이 비워지는 효과를 구현해야 합니다. 여기서는 이를 달성하기 위해 CSS의 Background-attachment 및 Background-clip 속성을 ​​사용합니다. 코드는 다음과 같습니다. 🎜rrreee🎜위 코드에서 Background-attachment를 fixed로 설정하여 뷰포트의 배경 이미지가 움직이지 않도록 고정합니다. 스크롤. Background-repeat는 no-repeat로 설정되어 배경 이미지가 반복적으로 타일링되지 않음을 나타냅니다. 배경 이미지를 중앙에 배치하려면 ground-position을 center로 설정하세요. 🎜🎜다음으로 -webkit-Background-clip을 text로 설정하고 -webkit-text-fill-color를 transparent를 사용하면 배경이 비워지는 효과를 얻을 수 있습니다. 그 중 <code>-webkit 접두사는 최신 CSS 사양을 지원하지 않는 일부 브라우저와의 호환성을 위한 것입니다. 🎜🎜마지막으로 JavaScript 코드를 사용하여 부드러운 스크롤 효과를 구현합니다. 코드는 다음과 같습니다. 🎜rrreee🎜위 코드에서는 scroll 이벤트를 수신하여 스크롤 거리를 구하고 스크롤 거리에 따라 배경의 위치를 ​​조정합니다. 여기서 스크롤링 배경 이동 효과는 BackgroundPositionY를 변경하여 달성됩니다. 🎜🎜위의 코드 예제를 사용하면 부드러운 스크롤 배경 빈 효과가 있는 웹 페이지를 구현할 수 있습니다. 또한 필요에 따라 코드의 스타일과 매개변수를 조정하여 보다 개인화된 웹 페이지를 만들 수도 있습니다. 🎜🎜요약하자면, 순수 CSS를 통해 웹 페이지의 부드러운 스크롤 배경 빈 효과를 얻으려면 Background-attachment 및 Background-clip과 같은 속성을 사용해야 합니다. 부드러운 스크롤 효과를 얻기 위해 JavaScript 모니터링 스크롤 이벤트와 결합하여 배경 효과를 설정합니다. 이 효과는 웹 페이지의 시각적 매력을 향상시키고 사용자에게 더 나은 경험을 제공할 수 있습니다. 이 기사의 소개와 코드 예제를 통해 멋진 웹 페이지 배경 효과를 쉽게 얻고 웹 페이지에 독특한 매력을 추가할 수 있다고 믿습니다. 🎜🎜위 내용이 여러분에게 도움이 되기를 바라며, 멋진 웹 디자인을 작성하시길 바라겠습니다! 🎜