hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Comment créer un pied de page collant uniquement CSS

Normalement, nous avons besoin de JavaScript pour effectuer des effets de défilement liés aux différentes actions de l'utilisateur sur les pages Web. Le script effectue le suivi de l'avancement d'une page vers le haut ou vers le bas et déclenche une action lorsqu'une hauteur de seuil est atteinte.

Ce n'est pas particulièrement une mauvaise chose d'utiliser JavaScript pour faire défiler les effets. En fait, il y a des cas plus complexes qui sont impossibles à résoudre sans JavaScript . Cependant, il existe des hacks CSS qui peuvent parfois remplacer ces scripts.

Ce post va vous montrer comment créer des effets de bas de page sur le défilement de la page en utilisant CSS. Nous utiliserons deux cas d'utilisation pour démontrer ceci: un pour la page entière (voir la démo) et un pour les éléments individuels de la page, tels que les articles.

Page entière

Nous devons créer un pied de page qui apparaît sous la page pendant que l'utilisateur défile vers le bas. En outre, lorsqu'ils font défiler la page, le pied de page doit être à nouveau caché sous la page.

Pour atteindre cet objectif, nous devons d'abord créer un pied de page fixe en bas de l'écran.

1. Créer un pied de page fixe

Ajoutons d'abord du contenu et un pied de page à la page. J'utilise les balises HTML

et
pour la sémantique. cependant,
fonctionne aussi bien.

Dans ma démo, il y a une image de chauve-souris montrée dans le pied de page pour un effet pas si effrayant, mais vous pouvez choisir n'importe quelle autre image que vous aimez.

Continuez à défiler jusqu'à ce que vous voyiez le pied de page

Lorem ipsum dolor sit amet...

body {font-famille: Texte cramoisi; taille de police: 13pt; marge: 0; } footer {largeur: 100%; hauteur: 200px; position: fixe; en bas: 0; couleur de fond: # DD5632; }
2. Masquer le pied de page

Appliquez la règle z-index:-1 au pied de page afin de le placer derrière tous les autres éléments de la page.

Couleur à la fois et les étiquettes blanches afin de couvrir le pied de page .

 corps, html {background-color: #fff; } footer {largeur: 100%; hauteur: 200px; position: fixe; en bas: 0; couleur de fond: # DD5632; indice z: -1; } 
3. Ajuster la marge inférieure

Définir la margin-bottom de tag égal à la hauteur du pied de page (dans mon exemple 200px).

De cette façon, il y aura suffisamment d'espace en bas pour que le pied de page soit visible lorsque l'utilisateur fait défiler la page.

 body {hauteur: 1000px; marge: 0; marge inférieure: 200 px; } 

C'est tout. L'effet de révélation de pied de page pour une page Web complète est fait. Découvrez la démo Codepen ci-dessous.

Éléments de page individuels

Cette technique peut être utilisée pour un élément HTML individuel (avec un pied de page) suffisamment long pour un effet de défilement de page approprié. La méthode est un peu hacky, car il ne fonctionne pas actuellement dans Chrome et IE, mais il a un recul décent.

1. Créer un long article

D'abord, créons un long article avec un pied de page. Pour promouvoir le code sémantique, j'ai choisi

et
.

Article 1

Lorem ipsum dolor sit amet...

Ci-dessous vous pouvez voir le style de base de l'article et le pied de page.

 article {width: 500px; couleur de fond: # FEF9F3; rembourrage: 20px 40px; } article> footer {hauteur: 100px; couleur de fond: # FE0178; } body {font-famille: cormorant garamond; } 

Mon article ressemble actuellement à ceci. Bien sûr, vous pouvez également utiliser d'autres règles de style de base.

2. Rendre le pied de page collant

Le pied de page précédent a été fixé, celui-ci va être collant . Appliquez la position:sticky règle position:sticky au pied de page, afin qu'elle se déplace dans les limites de l'article tout en conservant sa position sur l'écran pendant que l'utilisateur fait défiler vers le haut et vers le bas.

 article> footer {hauteur: 100px; couleur de fond: # FE0178; position: -webkit-sticky; position: collant; en bas: 80px; } 

La règle du bottom:80px fixe la position du pied de page 80px au-dessus du bas de l'article .

Vous pouvez ajuster sa valeur à votre goût, car elle détermine le point où le pied de page commence à apparaître ou disparaître lorsque l'utilisateur fait défiler vers le haut ou vers le bas.

Donnez la même valeur pour la marge inférieure de l'article, afin qu'il y ait suffisamment d'espace en bas pour révéler le pied de page complet.

 article {width: 500px; couleur de fond: # FEF9F3; rembourrage: 20px 40px; marge inférieure: 80px; } 
3. Ajouter un arrière-plan partiellement transparent

Maintenant, nous avons besoin d' une ouverture à côté du bas de l'article à travers lequel nous pouvons voir le pied collant défiler vers le bas et vers le haut.

Pour ce faire, remplacez la background-color de background-color de l'article par une background-image dégradé linéaire qui, du haut de l'article vers le haut du pied de page, est colorée avec la couleur de fond de l'article et la partie restante vers le bas est rendu transparent .

 article {width: 500px; rembourrage: 20px 40px; background-image: gradient linéaire (en bas, # FEF9F3 calc (100% - 120px), transparent 0); marge inférieure: 80px; } 

La fonction CSS calc(100%-120px) calcule la hauteur totale de l'article moins le pied de page . Dans mon exemple, c'est 120px (100px pour la taille et plus, 20px pour le rembourrage).

4. Placez le pied de page en arrière

Enfin, plaçons le pied de page derrière l'article en utilisant la règle CSS z-index: -1 .

 article> footer {hauteur: 100px; couleur de fond: # FE0178; position: -webkit-sticky; position: collant; en bas: 80px; indice z: -1; } 

Et voilà, l'élément de page individuel avec l'effet de révélation sur le défilement est fait. Découvrez le stylo Codepen ci-dessous. Vous pouvez également trouver les deux cas d'utilisation sur notre page Github.

8 Suivi des gadgets pour ne jamais perdre vos biens

8 Suivi des gadgets pour ne jamais perdre vos biens

Êtes-vous l'un de ces gens oublieux qui ont tendance à perdre leurs biens souvent, ou veulent suivre votre téléphone perdu ou obtenir un indice sur votre ordinateur portable volé? Si oui, alors c'est une bonne idée d' obtenir de l'aide de la technologie en utilisant des petits appareils intelligents appelés gadgets de suivi.Le mar

(Conseils techniques et de conception)

Créer, envoyer et gérer des factures sans effort avec des factures

Créer, envoyer et gérer des factures sans effort avec des factures

La facturation peut être pénible, surtout si vous êtes un pigiste, car votre force peut être dans l'écriture, la conception ou le développement web, et non dans la comptabilité. Gérer cela manuellement vous donnera probablement des maux de tête, en particulier lorsque vous êtes pressé de respecter les délais.À moins d&#

(Conseils techniques et de conception)