How to achieve smooth scrolling background gradient effect on web pages through pure CSS-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 25, 2023 am 11:19 AM

csssmooth scrollingbackground gradient

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

How to realize the smooth scrolling background gradient effect of web pages through pure CSS

1. Introduction

In web design, the background gradient effect can be used for websites Add beauty and dynamics. Smooth scrolling background gradients can make web pages more attractive and give users a comfortable browsing experience. This article will introduce how to achieve the smooth scrolling background gradient effect of web pages through pure CSS, and provide specific code examples.

2. Principle of realizing background gradient effect

Before realizing the smooth scrolling background gradient effect, we first understand the principle of realizing background gradient. In CSS, the background gradient effect can be achieved through the linear-gradient() function. This function accepts a start color and an end color, and fills the gradient based on the selected direction and position.

3. Steps to achieve smooth scrolling background gradient effect

Create a container with a scrolling effect.

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

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

The container uses vh units to set the height to the viewport height, and sets the overflow-y attribute to scroll to achieve a vertical scrolling effect.

Add background gradient effect.

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

In the CSS style of the container, set the background to a linear gradient with a starting color of black (#000000) and an ending color of white (#ffffff). The direction is set to to bottom to represent a gradient from top to bottom.

Add scroll event listener.

Add a scroll event listener to the container through JavaScript to update the position of the background gradient during the scrolling process.

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}%`;
});

In the callback function of the scroll event, we obtain the scroll position scrollTop of the container, the total height of the container scrollHeight, the viewport height windowHeight, and update the position of the background gradient according to the scroll progress. By calculating the proportion progress, the smooth scrolling effect of the background gradient position is achieved. Finally, apply the updated variable to the background gradient by setting the backgroundPositionY property.

4. Complete code example

<!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>

The above are the specific steps and code examples to achieve the smooth scrolling background gradient effect of web pages through pure CSS. Through the above methods, you can add dynamic background gradient effects to your website to enhance the user's browsing experience. Hope this article can be helpful to you.

The above is the detailed content of How to achieve smooth scrolling background gradient effect on web pages through pure CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Weekly Platform News: Web Apps in Galaxy Store, Tappable Stories, CSS SubgridApr 14, 2025 am 11:20 AM

In this week's roundup: Firefox gains locksmith-like powers, Samsung's Galaxy Store starts supporting Progressive Web Apps, CSS Subgrid is shipping in Firefox

Weekly Platform News: Internet Explorer Mode, Speed Report in Search Console, Restricting Notification PromptsApr 14, 2025 am 11:15 AM

In this week's roundup: Internet Explorer finds its way into Edge, Google Search Console touts a new speed report, and Firefox gives Facebook's notification

The Power (and Fun) of Scope with CSS Custom PropertiesApr 14, 2025 am 11:11 AM

You’re probably already at least a little familiar with CSS variables. If not, here’s a two-second overview: they are really called custom properties, you set

We Are ProgrammersApr 14, 2025 am 11:04 AM

Building websites is programming. Writing HTML and CSS is programming. I am a programmer, and if you're here, reading CSS-Tricks, chances are you're a

How Do You Remove Unused CSS From a Site?Apr 14, 2025 am 10:59 AM

Here's what I'd like you to know upfront: this is a hard problem. If you've landed here because you're hoping to be pointed at a tool you can run that tells

An Introduction to the Picture-in-Picture Web APIApr 14, 2025 am 10:57 AM

Picture-in-Picture made its first appearance on the web in the Safari browser with the release of macOS Sierra in 2016. It made it possible for a user to pop

Ways to Organize and Prepare Images for a Blur-Up Effect Using GatsbyApr 14, 2025 am 10:56 AM

Gatsby does a great job processing and handling images. For example, it helps you save time with image optimization because you don’t have to manually

Oh Hey, Padding Percentage is Based on the Parent Element's WidthApr 14, 2025 am 10:55 AM

I learned something about percentage-based (%) padding today that I had totally wrong in my head! I always thought that percentage padding was based on the

See all articles