L'idée ici est de créer l'apparence d'un diaporama sans le carrousel. En d'autres termes, nous faisons une série d'images la diapositive de gauche à droite et répétons une fois la fin des images atteinte. L'astuce est que nous utilisons une seule image de fond avec des animations CSS pour (…)
L'idée ici est de créer l'apparence d'un diaporama sans le carrousel. En d'autres termes, nous faisons une série d'images la diapositive de gauche à droite et répétons une fois la fin des images atteinte.
L'astuce est que nous utilisons une seule image d'arrière-plan avec des animations CSS pour la déplacer sur l'écran et la répéter lorsque c'est fait. Cela crée l'illusion d'une galerie d'images lorsque nous utilisons vraiment une seule image.
Configurer le HTML
Voici un schéma de la manière dont notre HTML doit être structuré:
Nous travaillons avec deux éléments: celui que nous appelons .containerqui correspond à la largeur exacte de la fenêtre et un autre que nous appelons .sliding-backgroundqui se trouve derrière .containeret le déborde. Essentiellement, nous utilisons le .containercomme masque pour masquer toute la largeur de la .sliding-backgroundpendant qu'elle défile sur l'écran.
Cela signifie que nous n'avons besoin que de créer deux éléments dans le balisage HTML:
Positionnement des éléments
Allons-y et ajoutons du CSS qui positionnera correctement nos deux éléments.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Notre .containerutilise la overflowpropriété qui masquera tout ce qui est visuellement contenu à l'extérieur. Pensez-y comme un recadrage sur une photo. Il peut y avoir des choses supplémentaires à l'extérieur du conteneur, mais le conteneur nous empêche de le voir.
C'est là que notre .sliding-backgroundentre en jeu. Il est défini sur une largeur ridicule qui déborderait la plupart des fenêtres. Et c'est le truc: ça devrait être quelque chose qui déborderait du conteneur. Dans ce cas, nous utilisons une 5076pxlargeur choisie quelque peu arbitrairement qui devrait dépasser la plupart des fenêtres de navigateur.
Création de l'image d'arrière-plan
Nous avons besoin d'une image si nous créons l'illusion d'une galerie de diaporamas, non? C'est notre prochain ordre du jour.
Rappelez-vous comment nous avons mentionné que la 5076pxlargeur quelque peu arbitrairement choisie pour le fond coulissant? Eh bien, c'est arbitraire, mais intentionnel dans le sens où il est bien divisible par 3, ce qui correspond au timing d'une boucle d'une minute, qui reviendra un peu plus tard. Cela signifie que la toile de notre image d'arrière-plan est 5076 / 3ou 1692px. En fin de compte, notre arrière-plan se répétera un total de trois fois en une minute dans une boucle infinie. Math pour la victoire!
La 500pxhauteur est vraiment arbitraire. Cela peut être ce que vous voulez et à condition que ce soit également la taille réelle du fichier image d'arrière-plan.
Le fichier Photoshop utilisé pour créer l'image d'arrière-plan de la démo au début de ce chapitre est disponible au téléchargement si vous recherchez un point de départ.
Une fois l'image enregistrée (et optimisée!), Voici ce que nous utiliserons comme image de fond dans le CSS:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Génial! Cela nous donne l'image gigantesque qui déborde du conteneur et peut maintenant être utilisée pour faire défiler l'écran à l'infini.
Animation de l'arrière-plan
Très bien, faisons bouger cette chose. Nous voulons qu'il aille de gauche à droite dans une boucle qui se répète encore et encore pour créer un effet transparent que l'image continue pour toujours.
Tout d'abord, définissons l'animation CSS:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Nous utilisons la transformpropriété pour positionner l'image de gauche sur le bord gauche du conteneur lorsque l'animation commence, comme ceci:
Au moment où l'animation sera terminée, elle aura transformé la position négativement (de gauche à droite) d'une quantité correspondant à la largeur exacte de notre image. Et, étant donné que la .sliding-backgroundlargeur est trois fois la largeur de l'image réelle, l'image se répète trois fois entre 0% et 100% avant de recommencer.
Remarque: la raison pour laquelle nous utilisons un
background-positionsur le principal transformpour faire le mouvement, ce qui est beaucoup plus performant.
OK, arrondissons les choses en appelant notre slideanimation sur la .sliding-backgroundclasse:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )La animationpropriété indique à l ' .sliding-backgroundd'utiliser l' slideanimation et de l'exécuter pendant une minute à la fois dans une boucle linéaire et infinie.
Mettre tous ensemble
.container ( overflow: hidden; ) .sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; ) @keyframes slide( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); ) )