Les galeries de vignettes sont une source constante de fascination pour moi. Il y a tellement plus de plaisir à créer que de simplement créer une grille de carrés et de l'appeler un jour. D'autant plus que CSS3 nous offre une multitude de nouveaux outils puissants à utiliser.
Aujourd'hui, nous allons mélanger l'ancienne galerie d'images standard ennuyeuse en la transformant en une série de cercles animés. En cours de route, nous allons apprendre une tonne de connaissances CSS utiles qui vous aideront dans toutes sortes de projets futurs.
Aperçu
Si vous êtes le genre de personne qui aime aller jusqu'au bout afin de savoir où vous allez, consultez la démonstration en direct du produit fini ci-dessous. J'ai inclus trois versions différentes de l'animation pour vous donner quelques idées sur la manière de faire varier l'effet.
Démo: Cliquez ici pour lancer.
Le concept
Avant de commencer à construire la galerie de vignettes, parlons un peu de ce que nous essayons de faire. Le but ici est d’avoir une grille d’images circulaires qui s’animent en vol stationnaire. Lorsque la souris entre dans le cercle, l'image d'arrière-plan doit être décalée et une légende précédemment masquée doit apparaître. Cela semble assez simple, non? Il y a cependant une courbe majeure.
Lorsque je planifiais comment accomplir cet exploit, je suis tombé sur un petit problème. Le moyen le plus simple et le plus simple d'implémenter l'effet d'image glissante consiste à utiliser des images d'arrière-plan CSS. Cette route présente de nombreux avantages pratiques pour nous.
Image de fond
- L'image sera automatiquement placée derrière le texte
- Il est facile de couper l'image sur son parent
- L'animation de l'image est facile, il suffit de décaler la position de l'arrière-plan
Comme vous pouvez le constater, il existe un argument de poids en faveur de cette voie. Le principal avantage est probablement le premier. Si nous mettons tout notre contenu en HTML, le texte déplacera l'image au lieu de flotter au-dessus de celle-ci; nous devrons donc effectuer du CSS voodoo.
Si je ne travaillais qu'avec une seule image, ce serait certainement la voie que je prendrais. Cependant, comme nous travaillons avec une galerie d'images, il semble erroné de supprimer les images du code HTML. Ils sont vraiment au centre du contenu de la page, alors je pense qu'ils devraient être en accord avec le contenu. J'y réfléchis peut-être trop, mais j'ai le sentiment que les images de la galerie de vignettes doivent être insérées via HTML lorsque cela est possible. Quoi qu'il en soit, emprunter cette route rend la tâche plus ardue, ce qui est excellent pour des objectifs éducatifs! Regardons quelques complications auxquelles nous allons faire face avec cette méthode.
Contre des images HTML
- Il est un peu plus difficile d'obtenir l'image à couper en cercle
- Déplacer l'image ne sera pas aussi simple
- Notre ordre d'empilement sera tout foiré
- Utiliser un positionnement relatif avec des coins arrondis est un gâchis
Comme vous pouvez le constater, nous avons du pain sur la planche. Heureusement, ce n’est pas aussi difficile que cela puisse paraître et avec un peu d’ingéniosité, notre galerie sera opérationnelle en un rien de temps. Commençons!
Le HTML
Le balisage pour cette galerie va être très bref. Nous avons seulement besoin d’une liste non ordonnée. À l'intérieur de chaque élément de la liste, placez un morceau de texte suivi d'une image (vous pouvez éventuellement lier l'image à un endroit, je l'ai laissée de côté pour des raisons de simplicité).
Notez que la largeur du conteneur n'est pas arbitraire. Il permettra quatre images à 200px par pièce avec 50px de marge sur chacune (250 * 4 = 1 000).
Mise à jour en cours
À ce stade, votre arrière-plan doit être sombre et les points de la liste des éléments de votre liste doivent disparaître. Sinon, ça sera en grande partie le même que la dernière fois. Cliquez ici pour lancer le live Dabblet.
Line 'Em Up, Round' Em Off
Ensuite, nous devons cibler les éléments de la liste. Veillez à utiliser un sélecteur plus spécifique que? Li? comme vous ne voudrez sans doute jamais que tous vos éléments de liste aient ce style. La galerie? La classe fournit un crochet pratique pour rendre ces styles spécifiques à toutes les galeries que vous avez configurées.
Malgré le fait que nos images soient au carré de 400 pixels, nous souhaitons en réalité que les cercles de la page aient un carré de 200 pixels. Pour ce faire, il suffit de définir 200px comme hauteur et largeur pour les éléments de la liste. Pour arrondir les éléments de la liste, définissez le bord de la bordure sur 50%. Vous ne verrez ceci prendre effet que si vous appliquez le? Overflow: hidden? commander. Veillez également à les faire flotter à gauche afin qu’elles apparaissent en ligne droite.
Il est important de noter le fait que nous faisons tout cela pour l'élément de liste, pas pour les images. Cela signifie que les images conserveront leur taille d'origine plus grande, elles seront simplement coupées à la taille de l'élément de la liste, ce qui leur permettra de glisser plus tard.
Mise à jour en cours
Après cela, votre galerie devrait prendre forme. Vous devez avoir quatre images circulaires par ligne avec le conteneur parent centré. La partie étrange est que nos cercles sont à plat sur le dessus! Ceci est simplement dû au fait que nos images doivent être mises en place, ce que nous traiterons ensuite. Cliquez ici pour lancer le live Dabblet.
Scoot et définir l'animation
Comme nous l'avons vu dans la dernière étape, nos images sont en réalité trop loin.Nous pouvons résoudre ce problème en ciblant toutes les images dans les éléments de notre liste de galeries et en appliquant une marge négative au sommet.
Pendant que nous sommes ici, nous allons également mettre en place l'animation. Nous venons d'apprendre que nous pouvons parcourir l'image en utilisant les marges, c'est donc la propriété que nous allons cibler dans la transition.
Mise à jour en cours
La seule différence visuelle que vous remarquerez cette fois-ci est que le sommet plat des cercles a été corrigé. Cliquez ici pour lancer le live Dabblet.
Style les paragraphes
Vous avez probablement remarqué que jusqu'à présent, nos paragraphes ont été complètement cachés. En effet, ils sont empilés au-dessus des images et en dehors des limites de l'élément de liste coupé. Résoudre ce problème n'est pas aussi facile que vous ne le pensez.
La première idée qui me vint à l’esprit fut simplement d’utiliser le vieux tour de positionnement absolu / relatif. Cela implique de définir la position des éléments de paragraphe en absolu et l'élément de liste en relatif. Cela nous permettrait de placer le paragraphe en place par rapport au point de départ de l'élément de la liste. Malheureusement, il existe un problème avec la façon dont la plupart des navigateurs rendent le rayon de la bordure, comme illustré dans l'image ci-dessous.
Comme vous pouvez le constater, dès que nous appliquons un positionnement relatif à notre élément parent, celui-ci perdra ses angles arrondis. C'est certainement une gêne, mais ce n'est pas la fin du monde. Au lieu de cela, nous allons simplement utiliser le positionnement relatif sur notre paragraphe et le mettre en place en haut et à gauche.
Cela mettra notre paragraphe en évidence et nous permettra d’appliquer un style de texte de base. Nous allons également configurer l'animation pour le texte, mais au lieu d'utiliser margin comme avant, nous utiliserons la propriété top.
Notez que j'ai mis le? Top? propriété à 75% dans cette étape. Il s’agit simplement de trouver un terrain d’entente pour le dernier point de repos des paragraphes. En réalité, nous souhaitons qu'ils soient masqués. Définissez donc la valeur maximale à 110%.
Mise à jour en cours
Après cette étape, vos extraits de texte devraient maintenant être visibles au bas de vos cercles. Cliquez ici pour lancer le live Dabblet.
Définissez vos styles de survol
Maintenant que tout est configuré et positionné comme il se doit, tout ce que nous avons à faire est de tout déplacer lorsque l'utilisateur survole les éléments de la liste. Pour ce faire, nous allons utiliser une astuce intéressante en ciblant les éléments de la liste en survol, puis en choisissant un enfant de cet élément à modifier. Pour commencer, nous ciblons les éléments de la liste en survol, puis davantage indiquent que les images sont ce que nous changeons. Nous répétons ensuite cette astuce avec les paragraphes.
Pour les images, appliquez un décalage vertical et horizontal dans la marge et pour le paragraphe, ramenez la valeur supérieure aux 75% précédemment définis.
Mise à jour en cours
Avec cela, notre démo fonctionne enfin comme nous le souhaitons! Survolez chacune des images pour voir l'effet en action. Cliquez ici pour lancer le live Dabblet.
Produit fini
Nous avons tous fini! Comme je l’ai mentionné dans l’introduction, la page de démonstration inclut également quelques versions alternatives de l’effet. Il y en a trois au total: panoramique, zoom avant et zoom arrière. Cliquez sur le lien ci-dessous pour le vérifier.
Démo: Cliquez ici pour lancer.
Conclusion
Ce projet a élargi notre zone de confort en adoptant une approche différente du fond d’animation. Au lieu d'utiliser CSS pour placer l'image, nous avons pu supprimer l'effet avec le texte et l'image dans notre balisage. C'est un peu l'opposé du typique, "moins de marge bénéficiaire". stratégie, mais c’est une bonne expérience d’apprentissage. Etre capable de travailler avec l'un ou l'autre scénario fera de vous un meilleur codeur, capable de gérer beaucoup d'obstacles différents.
Par ailleurs, l’un des problèmes qui me préoccupent toujours avec CSS est le fait que ces effets déclenchent souvent des effets visuels inattendus lors du chargement de la page. Ainsi, au fur et à mesure que la page est dessinée, les transitions rendent le processus normalement instantané long et difficile. Je sais que cela peut être résolu avec JavaScript, mais si vous avez une solution CSS pure, j'aimerais bien l'entendre. Pour la démo, j'ai simplement appliqué les animations aux sélecteurs de survol, mais cela tue l'animation de survol. Connaissez-vous un meilleur moyen? Faites-moi savoir dans les commentaires ci-dessous.