Share
Grâce à la flexbox, nous pouvons maintenant construire des mises en page très attrayantes et modernes avec une relative facilité. Dans ce didacticiel, nous allons examiner une interface récemment utilisée pour les parcs nationaux de Google et voir comment flexbox peut nous aider à l'améliorer..
Comme toujours, avant d'aller plus loin, voyons ce que nous allons construire (vous devrez peut-être consulter la version la plus grande, car le plein effet débute dans des fenêtres d'une largeur supérieure à 800 pixels):
Veillez à survoler les liens pour déclencher les effets correspondants.
Commençons par examiner le balisage que nous allons utiliser pour construire cette présentation. Nous définissons un div élément comportant cinq liens (vous pouvez utiliser les éléments que vous jugez appropriés). Chacun de nos liens contient un div avec la classe de recouvrir. Ci-dessous, vous pouvez voir le squelette de notre code:
Avec le balisage prêt, nous commençons à définir certains styles CSS initiaux, notamment:
Accentsconagua
div comme conteneur flexible et définissez sa hauteur égale à la hauteur de la fenêtre avec hauteur: 100vh.flex: 1. De plus, tous nos liens auront une image d’arrière-plan (provenant de unsplash.com) qui couvre la hauteur de la fenêtre. Comme solution de secours (au cas où une image ne serait pas disponible), nous spécifions également une couleur de fond unique pour chaque image..Lorsque nous survolons un lien, sa taille devient trois fois plus grande que celle des autres liens. Nous faisons cela en modifiant la valeur de la fléchir propriété du lien cible. Heureusement, cette propriété appartient aux propriétés CSS animées, ce qui nous permet de générer un effet de transition fluide (du moins dans les navigateurs les plus récents)..
Voici une partie du code CSS démontrant ce que nous avons décrit ci-dessus:
.flex-wrapper display: flex; hauteur: 100vh; .flex-wrapper a position: relative; flex: 1; taille du fond: couverture; position de fond: centre; répétition de fond: non répétée; transition: flex .4s; .flex-wrapper .one image-fond: url (IMAGE_PATH); couleur de fond: rouge; .flex-wrapper a: hover flex: 3;
Jusqu'ici, si nous visionnons la démo dans un navigateur prenant en charge flexbox, nous verrons le résultat suivant:
Notre prochaine étape consiste à attribuer quelques styles à la superposition. Voici ce que nous ferons:
.superposition-intérieure élément) verticalement et horizontalement.Voici les styles CSS associés:
.flex-wrapper .overlay display: flex; align-items: centre; justifier-contenu: centre; rembourrage: 0 10px; position: absolue; en haut: 0; à droite: 0; en bas: 0; gauche: 0; transition: couleur de fond .4s; .flex-wrapper a: survolez .overlay background-color: rgba (0, 0, 0, .5);
Maintenant, il est temps de styliser les parties intérieures de notre superposition. Par défaut, ceux-ci sont masqués et ne doivent apparaître que lorsque nous survolons le lien parent correspondant. Mais pas tout de suite, nous les révélerons après un petit délai. Ce délai est important. si nous ne le définissons pas spécifiquement, l'effet de transition aura l'air un peu moche. Supprimez-le et testez la démo pour comprendre ce que je veux dire..
Donc, pour récapituler, le lien grossit d’abord, puis les éléments superposés deviennent visibles. Nous utilisons aussi le translate3d () créer des effets de diapositive. Dernier point mais non le moindre, nous utilisons le transformer-style: preserve-3d pirater (ou un similaire) pour éviter les effets de scintillement sur différents navigateurs.
Et voici les styles CSS associés:
.flex-wrapper .overlay-inner * visibilité: caché; opacité: 0; transformer-style: preserve-3d; .flex-wrapper .overlay h2 transform: translate3d (0, -60px, 0); .flex-wrapper .overlay p transform: translate3d (0, 60px, 0); .flex-wrapper a: survolez .overlay-inner * opacity: 1; visibilité: visible; transformer: aucun; transition: tous .3s .3s;
Voyons ce que cela nous a donné.
La page a fière allure sur les grands écrans, mais peut-être sur les petits, voire sur les écrans moyens, nous devrons faire quelques ajustements. Par exemple, voici quelques choses que nous pouvons faire:
direction de flexion: colonne à cela. Ce faisant, les éléments flexibles vont circuler de haut en bas.Notre requête multimédia basée sur le premier ordinateur de bureau ressemble à ce qui suit (j'ai utilisé 800px uniquement parce que cela convient aux démos intégrées de cette publication: vous pouvez choisir celui qui vous convient le mieux):
Écran @média et (largeur maximale: 800px) .flex-wrapper direction-flex: colonne; .flex-wrapper a: hover flex: 1; .flex-wrapper a: survolez .overlay background-color: transparent; .flex-wrapper .overlay h2, .flex-wrapper .overlay p opacity: 1; visibilité: visible; transformer: aucun;
Voici la dernière apparition de notre navigation:
La démo fonctionne dans tous les navigateurs récents qui supportent flexbox.
Dans certains navigateurs, vous remarquerez peut-être que l’animation de la fléchir la propriété n'est pas aussi lisse qu'elle devrait être, ou peut-être ne fonctionne pas du tout. Par exemple, IE11 n'anime pas cette propriété, contrairement à Edge. C'est assez raisonnable, compte tenu du fait que la flexbox est un nouveau mode de mise en page qui continue de gagner du terrain..
Dans ce tutoriel, nous avons amélioré nos connaissances en matière de flexbox en apprenant à créer une présentation de navigation élégante. J'espère que vous avez apprécié ce que nous avons construit ici et que vous vous êtes inspiré de vos prochains projets.!
Si vous construisez une présentation similaire, n'oubliez pas de nous montrer l'approche (solution purement CSS ou JavaScript) que vous avez utilisée..
Avant de terminer, j'aimerais partager avec vous quelques sites qui utilisent une présentation similaire à celle que nous venons de créer:
