How to achieve smooth scrolling background hollowing effect on web pages through pure CSS

How to achieve the smooth scrolling background hollow effect of web pages through pure CSS

With the continuous development of Internet technology, the design of web pages has become increasingly diversified and complex. A good-looking web page often requires attention to detail and innovation. Among them, the smooth scrolling background hollow effect is one of the design elements that has become increasingly popular in recent years. This effect can make the web page look more vivid and interesting, and can attract the user's attention and interest.

In this article, I will introduce how to achieve the smooth scrolling background hollow effect of web pages through pure CSS, and provide specific code examples. Let’s learn how to create a cool web page background effect together!

First, we need to create a basic HTML document structure. In the tag, we will place a <div> element with a background image as the background of our web page. The code is as follows: <pre class='brush:php;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><p>In the above code, we define a <code>.background class, whose style contains a background image with a width and height of 100vw and 100vh, which represent 100% screen width respectively. and 100% screen height so that the background image can completely cover the entire screen.

Next, we need to add a scrolling effect to the web page and achieve a hollowing out effect on the background when scrolling. Here we use the background-attachment and background-clip properties in CSS to achieve this. The code is as follows:

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

In the above code, background-attachment is set to fixed to fix the background image in the viewport so that it will not move with scrolling . background-repeat is set to no-repeat which means the background image will not be tiled repeatedly. background-position is set to center to center the background image.

Next, we set -webkit-background-clip to text and set -webkit-text-fill-color Use transparent to achieve the hollowing out effect of the background. Among them, the -webkit prefix is ​​for compatibility with some browsers that do not support the latest CSS specifications.

Finally, we use JavaScript code to achieve the smooth scrolling effect. The code is as follows:

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

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

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

In the above code, we listen to the scroll event, obtain the scrolling distance and adjust the position of the background based on the scrolling distance. Here, the effect of scrolling background movement is achieved by changing backgroundPositionY.

Through the above code example, we can implement a web page with a smooth scrolling background hollow effect. You can also adjust the styles and parameters in the code according to your own needs to create a more personalized web page.

To sum up, to achieve the smooth scrolling background hollow effect of a web page through pure CSS, you need to use background-attachment, background-clip and other attributes to set the background effect, and combine JavaScript listens to scroll events to achieve smooth scrolling. This effect can improve the visual appeal of the web page and give users a better experience. I believe that through the introduction and code examples in this article, you can easily achieve a cool web page background effect and add a unique charm to your web page.

I hope the above content will be helpful to you, and I wish you write a wonderful web design!