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

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

2. 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.

3. 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

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!