Aujourd'hui, nous allons nous amuser un peu plus avec les transitions CSS3. Il existe un truc jQuery populaire qui étend le recadrage d'une image lorsque vous la survolez et je voulais la reproduire à l'aide de CSS uniquement. Pour aller plus loin, je mets cet effet en action dans une galerie de vignettes.
Continuez votre lecture pour voir la démo en direct et suivez étape par étape pendant que nous expliquons comment cela fonctionne et construisons le tout à partir de zéro.
Ce que nous construisons
Juste au cas où vous seriez le genre de personne qui aime aller à la fin d'un livre et jeter un coup d'œil à la façon dont tout cela se passe, voici une démo terminée de ce que nous allons créer.
Démo en direct: Cliquez ici
Preuve de concept
Avant de nous lancer dans la conception d'une page de galerie complète, construisons une petite version juste pour avoir une idée de ce que nous voulons accomplir. L'idée de base est d'avoir une galerie de vignettes où chaque vignette est rognée pour ne montrer qu'une partie d'une image plus grande. Ensuite, lorsque vous passez la souris sur une image, la vignette s’agrandit pour afficher tout le contenu.
HTML
Pour commencer, créez une page HTML de base et ajoutez quelques div, comme indiqué ci-dessous. Ici, j'ai un conteneur de base, puis trois images. Pour ce que nous faisons, nous ne pouvons pas simplement styliser les images directement sans quelques étirements maladroits, nous sommes donc obligés de les placer dans leur propre division.
Maintenant, avec juste ce code, nous allons obtenir les modifications de mise en page de base que nous souhaitons. Ceci est important car cela signifie que tous les navigateurs qui ne prennent pas en charge ce que nous faisons ensuite continueront à fonctionner correctement sur cette page, bien que de manière simplifiée.
Pour rendre l'effet plus intéressant, introduisons une transition CSS de base. Tout d'abord, nous spécifions que la largeur correspond à ce que nous voulons cibler, puis nous implémentons une durée et la manière dont nous voulons que l'animation progresse (assouplissement). Enfin, comme toujours, nous veillons à couvrir nos bases avec les préfixes du navigateur.
Si vous avez des doutes sur une transition CSS3 ou sur une autre syntaxe, consultez CSS3Maker.com, qui générera le code pour vous à partir de contrôles simples.
Aperçu
C'est tout ce qu'on peut en dire! Avec cela, nous avons un effet de portes coulissantes cool similaire à quelque chose que vous voyez fréquemment dans jQuery. Cliquez ici ou sur l'image ci-dessous pour voir un aperçu en direct de ce que nous venons de construire.
Comme vous pouvez le constater, lorsque vous survolez une image, celle-ci s’agrandit lentement. La mise en page s'adapte bien lorsque les autres images se déplacent. C'est super simple mais assez amusant à jouer.
Aller plus loin: une galerie de vignettes
Maintenant que notre concept de base est défini et fonctionne correctement, il est temps de voir comment concevoir une page Web complète autour de ce concept. Au lieu de trois images, nous allons développer une plus grande galerie de vignettes. Commençons avec du HTML.
Images HTML
La première chose à faire est de disposer nos images comme avant. Cette fois cependant, nous aurons deux rangées de quatre. Notez que je les ai séparés en deux sections distinctes. Mon idée de départ était de faire en sorte que la galerie se refasse de sorte que, lorsqu'une image est agrandie et que les autres soient avancées, elles passent automatiquement à la rangée suivante. Cela a bien fonctionné au début, mais j’ai remarqué que le survol de la dernière image de la série était problématique, car elle sauterait vers le bas pendant que vous planiez. Cela a fonctionné, mais était tout simplement trop maladroit. Je pense que cette solution est beaucoup plus élégante et reste facilement extensible.
Avec ce code, notre galerie est complète. Les animations sont fluides et le fait d'avoir plusieurs lignes rend l'effet plus impressionnant. Si vous souhaitez ajouter une autre ligne, copiez et collez un galleryRow div; plus de CSS est nécessaire.
Voici à quoi ressemble la galerie maintenant. Notez que l'image agrandie a exactement la même largeur que les deux images plus petites situées en dessous.
Finition de la page: HTML
Je n'aime jamais laisser un exemple aussi simple, alors finissons-en. Pour ce faire, nous ajoutons un en-tête et un paragraphe de base expliquant la galerie.
Je vais également jeter cet extrait dans ma tête afin que je puisse utiliser? Oswald? de la bibliothèque de polices Google.
Finition de la page: CSS
Notre dernière étape consiste à styler ces deux parties de texte. Notez que j'utilise un raccourci pour la police, ce qui économise beaucoup d'espace dans notre code CSS. Vous pouvez voir que j'ai déclaré la police Oswald comme n'importe quelle autre. Bien que les options restent assez limitées, j'aime vraiment la simplicité et la non-restriction de la bibliothèque de polices de Google.
Produit fini
Notre petit projet est maintenant terminé. Jetez un coup d'œil à la démonstration en direct ci-dessous pour la voir en action. N'est-ce pas formidable que nous puissions maintenant accomplir sans une seule ligne de JavaScript?
Démo en direct: Cliquez ici
Laissez un commentaire ci-dessous et dites-nous ce que vous pensez de cet effet. Veillez également à mentionner vos idées pour l’améliorer!