recherche

Maison >interface Web >tutoriel CSS >Comment obtenir un effet de dégradé d'arrière-plan à défilement fluide sur les pages Web grâce à du CSS pur

Comment obtenir un effet de dégradé d'arrière-plan à défilement fluide sur les pages Web grâce à du CSS pur

WBOY
WBOYoriginal
2023-10-25 11:19:431639parcourir

Comment obtenir un effet de dégradé darrière-plan à défilement fluide sur les pages Web grâce à du CSS pur

Comment obtenir un effet de dégradé d'arrière-plan à défilement fluide sur des pages Web grâce à du CSS pur

1. Introduction

Dans la conception Web, l'effet de dégradé d'arrière-plan peut ajouter de la beauté et de la dynamique au site Web. Les dégradés d'arrière-plan à défilement fluide peuvent rendre les pages Web plus attrayantes et offrir aux utilisateurs une expérience de navigation confortable. Cet article expliquera comment obtenir l'effet de dégradé d'arrière-plan à défilement fluide des pages Web grâce à du CSS pur et fournira des exemples de code spécifiques.

2. Principe de réalisation de l'effet de dégradé d'arrière-plan

Avant de réaliser l'effet de dégradé d'arrière-plan à défilement fluide, nous comprenons d'abord le principe de réalisation du dégradé d'arrière-plan. En CSS, l'effet de dégradé d'arrière-plan peut être obtenu grâce à la fonction Linear-gradient(). Cette fonction accepte une couleur de début et une couleur de fin et remplit le dégradé en fonction de la direction et de la position sélectionnées.

3. Étapes pour implémenter un effet de dégradé d'arrière-plan à défilement fluide

  1. Créez un conteneur avec un effet de défilement. 
<div class="container">
  <!-- 网页内容 -->
</div>
.container {
  height: 100vh;
  overflow-y: scroll;
}

Le conteneur utilise des unités vh pour définir la hauteur sur la hauteur de la fenêtre d'affichage et définit l'attribut overflow-y pour faire défiler pour obtenir un effet de défilement vertical.

  1. Ajoutez un effet de dégradé d'arrière-plan. 
.container {
  background: linear-gradient(to bottom, #000000, #ffffff);
}

Dans le style CSS du conteneur, définissez l'arrière-plan sur un dégradé linéaire avec une couleur de départ noire (#000000) et une couleur finale de blanc (#ffffff). La direction est définie vers le bas pour représenter un dégradé de haut en bas.

  1. Ajouter un écouteur d'événement de défilement.

Ajoutez un écouteur d'événement de défilement au conteneur via JavaScript pour mettre à jour la position du dégradé d'arrière-plan pendant le défilement. 

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

Dans la fonction de rappel de l'événement scroll, nous obtenons la position de défilement scrollTop du conteneur, la hauteur totale du conteneur scrollHeight et la hauteur de la fenêtre windowHeight, et mettons à jour la position du dégradé d'arrière-plan en fonction de la progression du défilement. En calculant la progression de la proportion, l'effet de défilement fluide de la position du dégradé d'arrière-plan est obtenu. Enfin, appliquez la variable mise à jour au dégradé d'arrière-plan en définissant la propriété backgroundPositionY.

4. Exemple de code complet

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

Ce qui précède sont les étapes spécifiques et les exemples de code pour obtenir l'effet de dégradé d'arrière-plan à défilement fluide des pages Web grâce à du CSS pur. Grâce aux méthodes ci-dessus, vous pouvez ajouter des effets de dégradé d'arrière-plan dynamiques à votre site Web pour améliorer l'expérience de navigation de l'utilisateur. J'espère que cet article pourra vous être utile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css 回调函数 事件 overflow
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée des propriétés CSS : propriétés de couleurArticle suivant：Explication détaillée des propriétés CSS : propriétés de couleur

Articles Liés

Voir plus