Maison> interface Web> tutoriel CSS> le corps du texte

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

PHPz
Libérer: 2023-10-19 11:37:49
original
1170 Les gens l'ont consulté

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

Comment obtenir l'effet creux d'arrière-plan de défilement fluide des pages Web grâce au CSS pur

Avec le développement continu de la technologie Internet, la conception des pages Web est devenue de plus en plus diversifiée et complexe. Une belle page Web nécessite souvent une attention aux détails et à l’innovation. Parmi eux, l’effet creux d’arrière-plan à défilement fluide est l’un des éléments de conception qui est devenu de plus en plus populaire ces dernières années. Cet effet peut rendre la page Web plus vivante et plus intéressante, et peut attirer l'attention et l'intérêt de l'utilisateur.

Dans cet article, je vais vous présenter comment obtenir l'effet creux d'arrière-plan de défilement fluide des pages Web grâce à du CSS pur et fournir des exemples de code spécifiques. Apprenons ensemble à créer un effet d'arrière-plan de page Web sympa !

Tout d’abord, nous devons créer une structure de document HTML de base. Dans la balise, nous placerons un élément

avec une image de fond comme arrière-plan de notre page Web. Le code est le suivant : 标签中,我们将放置一个带有背景图片的
元素作为我们的网页背景。代码如下:
<!DOCTYPE html> <html> <head> <title>平滑滚动背景镂空效果</title> <style> body { margin: 0; padding: 0; overflow-x: hidden; } .background { position: relative; width: 100vw; height: 100vh; background-image: url('background.jpg'); background-size: cover; } </style> </head> <body> <div class="background"></div> </body> </html>
Copier après la connexion

上述代码中,我们定义了一个.background类,其样式中包含了一个背景图片,宽高为100vw和100vh,分别表示100%屏幕宽度和100%屏幕高度,使背景图片能够完全覆盖整个屏幕。

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

.background { background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: cover; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
Copier après la connexion

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

接下来,我们通过设置-webkit-background-cliptext,并将-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`; }); });
Copier après la connexion

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

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

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

Dans le code ci-dessus, nous définissons une classe .background, dont le style contient une image de fond d'une largeur et d'une hauteur de 100vw et 100vh, qui représentent 100% de la largeur de l'écran. et 100 % respectivement. Hauteur de l'écran afin que l'image d'arrière-plan couvre complètement tout l'écran.

Ensuite, nous devons ajouter un effet de défilement à la page Web et obtenir un effet de creux sur l'arrière-plan lors du défilement. Ici, nous utilisons les propriétés background-attachmentet background-clipen CSS pour y parvenir. Le code est le suivant : rrreeeDans le code ci-dessus, background-attachmentest défini sur fixedpour corriger l'image d'arrière-plan dans la fenêtre afin qu'elle ne bouge pas avec défilement. background-repeatest défini sur no-repeatpour indiquer que l'image d'arrière-plan ne sera pas carrelée à plusieurs reprises. Définissez background-positionsur centerpour centrer l'image d'arrière-plan. Ensuite, nous définissons -webkit-background-clipsur textet -webkit-text-fill-colorsur transparent pour obtenir l’effet creux de l’arrière-plan. Parmi eux, le préfixe -webkitest destiné à la compatibilité avec certains navigateurs qui ne prennent pas en charge les dernières spécifications CSS. Enfin, nous utilisons du code JavaScript pour obtenir un effet de défilement fluide. Le code est le suivant : rrreeeDans le code ci-dessus, nous écoutons l'événement scroll, obtenons la distance de défilement et ajustons la position de l'arrière-plan en fonction de la distance de défilement. Ici, l'effet de défilement du mouvement d'arrière-plan est obtenu en modifiant backgroundPositionY. Avec l'exemple de code ci-dessus, nous pouvons implémenter une page Web avec un effet creux d'arrière-plan à défilement fluide. Vous pouvez également ajuster les styles et les paramètres du code en fonction de vos propres besoins pour créer une page Web plus personnalisée. Pour résumer, pour obtenir l'effet creux d'arrière-plan à défilement fluide d'une page Web via du CSS pur, vous devez utiliser des attributs tels que background-attachmentet background-clippour définir l'effet d'arrière-plan, combiné à l'événement Scroll de surveillance JavaScript pour obtenir un effet de défilement fluide. Cet effet peut améliorer l’attrait visuel de la page Web et offrir aux utilisateurs une meilleure expérience. Je pense que grâce à l'introduction et aux exemples de code de cet article, vous pouvez facilement obtenir un effet d'arrière-plan de page Web sympa et ajouter un charme unique à votre page Web. J'espère que le contenu ci-dessus vous sera utile et je vous souhaite d'écrire un merveilleux design Web !

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!