Dévoiler l'effet magique derrière l'effet KPR Verse Footer

Je parcourais le site Web de KPR-verse lorsque j'ai remarqué cet effet sympa en bas. Chaque fois que je vois quelque chose comme ça, j'ai toujours envie de le recréer. Mon processus est simple : je commence par essayer de reproduire l'effet, puis je crée un blog pour expliquer comment cela se fait, dans le but de décomposer des conceptions complexes en étapes faciles à comprendre.

Au début, je doute souvent de pouvoir réussir, mais après mûre réflexion, je trouve généralement un moyen de briser le design en morceaux. En connectant ces pièces, j'arrive à obtenir l'effet. Assez parlé : voyons comment vous pouvez le préparer vous-même !

Décomposer l'effet de pied de page du verset KPR

À la fin du site, vous trouverez la bannière KPR en arrière-plan. À première vue, cela peut paraître un peu complexe, mais ce n’est pas si compliqué.

Tout d’abord, créez un div avec la classe .container. Ce sera l'élément racine de notre tutoriel.

Ensuite, divisez le .container en deux parties : .subcontainer-wrapper et footer. L'élément de pied de page contiendra la bannière KPR.

Maintenant, divisez davantage le .subcontainer-wrapper en deux parties. La partie supérieure contient tout le contenu de notre site Web, tandis que la partie inférieure est laissée vide, sans arrière-plan – essentiellement invisible, mais elle a toujours la largeur et la hauteur de la fenêtre d'affichage. La moitié inférieure est cruciale car elle nous permet de voir le pied de page.

Jusqu'à présent, tous les éléments sont dans le flux HTML normal, c'est-à-dire de haut en bas. Maintenant, nous devons rompre cet ordre en plaçant le pied de page derrière et en amenant le .subcontainer-wrapper devant. Pour ce faire, nous allons définir le .subcontainer-wrapper sur position : absolue par rapport à son .container parent. Cela supprimera le .subcontainer-wrapper du flux DOM normal.

C'est tout ce dont nous avons besoin pour configurer l'effet. Maintenant, remplissez la partie supérieure du .subcontainer-wrapper avec du contenu, mais laissez la partie inférieure (le div invisible) vide. Ajoutez également du contenu au pied de page.

Une fois que vous avez ajouté le contenu, il devrait ressembler à ceci.

La partie supérieure masque l'arrière-plan, et lorsque vous faites défiler vers le bas, lorsque le contenu visible se termine, la section invisible révèle le pied de page. Voilà ! Voilà, simple et facile.

_Merci d'avoir suivi ! J'espère que vous avez trouvé ce guide utile et facile à comprendre. Restez curieux et continuez à explorer !

original : KPR-verset

Site de démonstration : Demo Link , Pour cette démonstration, j'ai utilisé le site Google I/O (https://io.google/2024/) et je l'ai adapté pour présenter un concept similaire.

Code source : Github Link_

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!