Le projet d'aujourd'hui est une autre exploration des types d'applications pratiques que vous pouvez réaliser avec un peu d'ingéniosité et quelques CSS assez basiques. Vous serez époustouflé par tout ce que vous pouvez réaliser avec seulement quelques lignes de code.
Le résultat final est un excellent moyen d’afficher une bande de petites vignettes d’image que l’utilisateur peut survoler pour voir des images plus grandes. Nous allons plonger et voir comment ça marche.
Le concept
La mise en page de base ici est assez simple. Nous voulons une bande de vignettes et une grande image. La partie la plus délicate consiste à faire changer l'image sélectionnée lorsque l'utilisateur passe la souris sur l'une des miniatures.
Aperçu: Cliquez ici pour lancer le produit fini.
Avec CSS, vous ne pouvez pas créer deux divs distincts, puis le contenu de l’un servir de point d’action pour l’autre. C'est assez facile en JavaScript, mais CSS vous donne moins de liberté dans la manière dont vous empilez vos sélecteurs.
Cependant, si nous sommes intelligents dans la structure de notre code HTML, ce projet est en réalité assez simple à réaliser. Voyons à quoi cela ressemble.
Le HTML
Pour que cela fonctionne, nous aurons besoin de quatre images miniatures et quatre images en taille réelle. La clé pour que les premiers agissent sur les derniers consiste à les envelopper comme suit:
La raison pour laquelle nous définissons une hauteur et une largeur spécifiques est que nous pouvons faire glisser une image en dehors des limites du conteneur et la faire masquer. À cette fin, nous appliquons également une valeur de dépassement de masqué et finissons par centrer le tout avec des marges automatiques.
Vérification des progrès
Nous avons l'air assez durs à ce stade, mais ne vous inquiétez pas, tout va bien!
Tout position
Comme vous venez de le voir sur la capture d'écran, vos images vont être partout à ce stade, il est donc temps de tout contraindre à sa place.
Encore une fois, cela prend un peu de réflexion. Nous voulons que toutes nos vignettes se regroupent et que toutes nos grandes images se regroupent, mais ce n'est pas ainsi que le code HTML est structuré.
Étant donné que chaque type d'image (petite et grande) a sa propre classe, nous pouvons faire flotter toutes nos ancres vers la gauche, puis séparer les grandes images en appliquant un positionnement absolu.
Il est très important de comprendre comment cela fonctionne, alors parcourons-le. Flottant nos liens vers la gauche fait tout des images apparaissent en ligne, l'une après l'autre. Cependant, le positionnement absolu sur les grandes images les tire de ce flux et les place spécifiquement à l'emplacement que nous avons désigné à l'aide des propriétés top et left. Cela ne laisse que les images miniatures à faire flotter.
Vérification des progrès
Avec très peu de code, nous avons pu transformer notre fouillis d'images en une mise en page bien agencée. Notez que vous ne verrez qu'une seule grande image à ce stade car les autres sont empilées sous celle-ci.
Apportez-le à la vie
Maintenant que tout est en place, il est temps de le faire fonctionner. La première chose que nous souhaitons faire est de déplacer toutes les grandes images, à l'exception de la couverture présentée, hors des limites du conteneur. Cela implique de prendre du recul et de réviser certains de nos codes précédents.
Revenez en arrière et réglez toutes les grandes images sur 900px à partir du haut. Cela les poussera hors du fond de notre conteneur. Pendant que vous y êtes, vous devez également configurer une transition. Ciblez la propriété supérieure et définissez la durée de la transition sur une seconde et la fonction de minutage pour faciliter.
Ce code pousse tout des grandes images hors limites, y compris notre image de couverture. Utilisez le code ci-dessous pour le ramener.
Ici, nous avons utilisé les valeurs du haut et de la gauche que nous avions établies auparavant pour fixer la couverture à un endroit. La valeur z-index garantit que cette image restera au bas de la pile. Si nous ne le faisons pas, nous ne pourrons même pas voir les autres images lorsqu'elles glisseront!
Styles de survol
Maintenant que nous avons placé toutes les grandes images à l'extérieur du conteneur, nous devons les ramener lorsque l'utilisateur survole. Ceci est accompli en ciblant les grandes images et en renvoyant la propriété supérieure à 260 pixels. J'ai également ajouté un effet d'ombre aux vignettes pour que le survol prenne effet.
En raison de la manière dont nous avons configuré notre code HTML, chaque vignette correspond automatiquement à la grande image qui l'accompagne.Ainsi, même si nous survolons la vignette, le navigateur la voit comme une seule ancre et ne craint pas de manipuler uniquement la pièce avec la grande classe appliquée. Assez chouette non?
Voyez-le en action
Avec cela, nous avons tous terminé avec notre slider génial. Jetez un œil à la démonstration en direct ci-dessous et survolez les vignettes pour la tester. Pour montrer la polyvalence de ce projet, j'ai inclus deux versions alternatives dans la démo qui implémentent des animations légèrement différentes. Assurez-vous de les vérifier également.
Démo: Cliquez ici pour lancer.
Conclusion
Si vous portiez une attention particulière, vous avez appris beaucoup de choses dans ce tutoriel. Tout d'abord, nous avons relevé le défi d'utiliser un élément d'un document HTML pour agir sur un autre en utilisant uniquement du CSS, ce qui n'est pas une mince affaire. En plus de cela, nous avons appris quelques techniques de positionnement sympas et même un peu manipulé l'ordre de superposition des images via z-index.
Si vous avez aimé ce tutoriel, laissez un commentaire et faites-le nous savoir. Avez-vous d'autres utilisations pour les survols à distance, comme nous l'avons utilisé ici? Je veux les entendre!