Aujourd'hui, nous allons relever le défi de créer une bannière animée de photos qui défile automatiquement horizontalement dans une boucle infinie. La meilleure partie: nous allons le faire sans une seule ligne de JavaScript.
Pour que cette bannière soit vraiment utile, notre objectif sera d’utiliser des photos individuelles insérées dans notre code HTML, et non pas simplement un long arrière-plan CSS répétitif. C'est assez délicat, mais nous allons vous expliquer exactement comment cela fonctionne. Commençons!
L'idée
Le concept ici est simple. Supposons que vous ayez un site Web de photographie ou un portefeuille de projets de conception et que vous souhaitiez une simple bannière sur une page Web qui fait défiler automatiquement certaines images comme celle-ci:
Comme vous pouvez le constater, nous ne disposons en principe que d’une bande d’images qui déplacent leur position de gauche à droite. C'est une technique assez populaire. En fait, vous pouvez le voir au travail en direct sur le site de Gina Meola.
Cet effet est assez facile avec JavaScript ou Flash, mais comme exercice, voyons si nous pouvons le retirer en CSS pur. Avec les nouveaux outils sophistiqués de CSS3, il s’agit d’un projet très simple qui convient parfaitement à tous ceux qui souhaitent se plonger dans l’animation CSS.
Haies
Comme promis, il s'agit d'un projet assez facile, mais uniquement parce que j'ai résolu la plupart des problèmes pour vous. En vérité, il m'a fallu un certain temps pour comprendre comment résoudre ce problème comme je le souhaitais. La raison en est qu’il existe un moyen facile et difficile de le faire.
La manière facile
Le moyen le plus simple est de prendre les images que vous souhaitez afficher, de les importer dans Photoshop, puis de les combiner en une seule image longue. Vous pouvez ensuite définir cette image sur votre arrière-plan en CSS, la répéter sur l'axe des x et intégrer une animation CSS.
Cela fonctionne très bien et j'ai pu le mettre en place en quelques minutes à peine, mais le problème est que ce n'est vraiment pas une solution polyvalente. Par exemple, supposons que je veuille lier chaque image individuelle quelque part, ce serait impossible si elles étaient en réalité une seule image. Cette même logique signifie que je ne peux appliquer aucun effet spécial de survol à des images individuelles. De plus, si je veux ajouter ou échanger des images, un nouveau voyage vers Photoshop est nécessaire pour mettre à jour le fichier. Ce n'est certainement pas idéal.
À la dure
Laissons tomber la solution de facilité, car ce n'est ni un défi, ni la meilleure méthode pour atteindre notre objectif. Le plus difficile est d’insérer les images une par une dans le code HTML et de les faire prendre en charge par la bannière.
La raison pour laquelle c'est si difficile est que nous voulons que l'animation soit infinie. En CSS, vous pouvez facilement répéter une image d’arrière-plan, mais il n’existe aucune méthode permettant de répéter quelque chose en HTML. Même s'il y en avait, nous ne voudrions qu'une image à répéter après le rendu de toutes les autres. Comme vous pouvez le constater, c'est tout un casse-tête.
C'est ici que les animations d'images clés viennent à la rescousse. La chose intéressante à propos de ce type d’animation est qu’il va réellement s’intégrer et prendre en charge la répétition infinie pour nous? sorte de. Il s'agit en réalité d'une animation et non d'images, mais nous pouvons l'utiliser pour créer l'illusion d'images qui se répètent à l'infini.
Pour voir comment cela fonctionne, imaginons que nous configurions une rangée d'images, puis utilisions des images clés pour les animer. Nous aurons un point de départ (0%) et un point d'arrêt (100%) comme ceci:
Comme vous pouvez le constater, cette situation est délicate car elle laisse un tas d’espace mort indésirable. De plus, lorsque l'animation reprendra, il y aura un flash discordant qui remontera au début. Nous aurons bien une animation infinie, mais ça aura l'air horrible.
Si vous connaissez les astuces d'animation, la solution devrait déjà être claire. Ce que nous devons faire, c'est que notre première image corresponde parfaitement à notre dernière image, puis, lorsque l'animation se répète, elle sera transparente et donnera l'illusion d'un flux d'images infini.
Malheureusement, pour ce faire, nous devrons répéter quelques images dans notre code HTML. C'est un peu pénible, mais ce n'est pas la fin du monde et il suffit de répéter suffisamment d'images pour remplir le cadre.
Construisons-le
Maintenant que le concept est élaboré, il est temps de coder une démo! Commençons par le code HTML de base de notre page.
HTML
Pour créer une belle page de démonstration, nous allons inclure un en-tête (utilisez html5shiv pour IE) et du texte de remplissage, puis un div contenant nos images. Notez que nous avons six images uniques, puis les quatre premières sont répétées. La première montre au moins partiellement des morceaux de ces quatre photos.
C'est tout ce qu'on peut en dire! Avec ce code, votre bannière d’images commencera sa boucle infinie à travers les six photos que nous avons incluses.
Prenant plus loin
Pour vraiment mettre en valeur les avantages de cette méthode, j'ai décidé d'aller plus loin et d'ajouter un simple effet de survol pour chaque image. Cela aurait été impossible avec la technique d'arrière-plan CSS.En survol, nous redimensionnons l'image de 20% et ajoutons une ombre.
Démo
Nous avons tous fini! Cliquez ici ou sur l'image ci-dessous pour voir la version en direct.
Conclusion
Nous avions un objectif difficile au début de cet article. Nous voulions créer une bannière d’images défilant à l’infini en CSS pur. Le plus gros défi ici était de savoir comment faire pour qu'un tas d'images HTML se répète. L'astuce était bien sûr de mettre en place une animation d'images clés tout en veillant à ce que nos première et dernière images correspondent parfaitement. Cela nous a permis de boucler l'animation de manière transparente.
Laissez un commentaire ci-dessous et dites-nous ce que vous pensez de cet effet. Comment changeriez-vous ou amélioreriez-vous?