Hoy vamos a embarcarnos en el desafío de crear un banner animado de fotos que se desplaza automáticamente en forma horizontal a través de un bucle infinito. La mejor parte: lo haremos sin una sola línea de JavaScript.
Para hacer que este banner sea realmente útil, nuestro objetivo será utilizar fotos individuales introducidas en nuestro HTML, no simplemente un fondo CSS largo que se repita. Esto es bastante complicado, pero te mostraremos cómo funciona exactamente. ¡Empecemos!
La idea
El concepto aquí es simple. Digamos que tiene un sitio web de fotografía o portafolio de diseño y desea un simple banner en una página web que se desplaza automáticamente en forma horizontal a través de algunas imágenes como esta:
Como puede ver, básicamente solo tenemos una tira de imágenes que mueven su posición de izquierda a derecha. Esta es una técnica bastante popular. De hecho, puedes verlo en vivo en el sitio de Gina Meola.
Este efecto es bastante fácil con JavaScript o Flash, pero como un ejercicio, veamos si podemos lograrlo en CSS puro. Con las nuevas y sofisticadas herramientas en CSS3, en realidad es un proyecto realmente fácil que es perfecto para cualquiera que quiera sumergir sus dedos en la animación CSS.
Obstáculos
Como se prometió, este es un proyecto bastante fácil, pero solo porque he hecho la mayor parte de la resolución de problemas por usted. En verdad, me tomó un tiempo averiguar cómo llevar esto a cabo como quería. La razón de esto es que hay una manera fácil y una manera difícil de hacerlo.
La manera fácil
La forma más fácil es tomar las imágenes que desea mostrar, importarlas en Photoshop y luego combinarlas en una sola imagen larga. Luego puede configurar esta imagen para su fondo en CSS, repetirla en el eje x y lanzar en una animación CSS.
Esto funciona bien y pude ponerlo en funcionamiento en solo unos minutos, pero el problema es que realmente no es una solución versátil. Por ejemplo, digamos que quería vincular cada imagen individual en algún lugar, esto sería imposible si en realidad fueran todas una imagen. Esta misma lógica significa que no puedo aplicar ningún efecto de desplazamiento especial a imágenes individuales. Además, si quiero agregar o intercambiar imágenes, se requiere otro viaje a Photoshop para actualizar el archivo. Esto definitivamente no es ideal.
El camino difícil
Abandonemos el camino fácil porque no es un desafío, ni es realmente el mejor método para lograr nuestro objetivo. La forma más difícil es insertar realmente las imágenes una a la vez en HTML y hacer que asuman la funcionalidad del banner.
La razón por la que esto es tan difícil es porque queremos que la animación sea infinita. En CSS, puedes repetir fácilmente una imagen de fondo, pero no hay un método para repetir algo en HTML. Incluso si hubiera, solo quisiéramos que una imagen se repitiera después de que todas las demás se hayan renderizado. Como puedes ver, es todo un enigma.
Aquí es donde las animaciones de fotogramas clave vienen al rescate. Lo interesante de este tipo de animación es que en realidad aumentará y se hará cargo de la repetición infinita para nosotros. tipo de Realmente reproduce la animación, no las imágenes, pero podemos usar eso para crear la ilusión de imágenes que se repiten infinitamente.
Para ver cómo funciona esto, imagine que solo configuramos una fila de imágenes y luego usamos fotogramas clave para animarlos. Tendremos un punto de inicio (0%) y un punto de parada (100%) como este:
Como puede ver, esto es incómodo porque deja un montón de espacio muerto no deseado. Además, cuando la animación comience de nuevo, habrá un destello intermitente a medida que se remonta al principio. De hecho tendremos una animación infinita, pero se verá horrible.
Si está familiarizado con los trucos de animación, la solución ya debería estar clara. Lo que debemos hacer es hacer que nuestro primer fotograma coincida perfectamente con nuestro último fotograma, luego, cuando la animación se repita, será perfecta y dará la ilusión de un flujo infinito de imágenes.
Desafortunadamente, para hacer esto, necesitaremos repetir algunas imágenes en nuestro HTML. Esto es una especie de dolor, pero no es el fin del mundo y solo necesitamos repetir suficientes imágenes para llenar el cuadro.
Vamos a construirlo
Ahora que hemos desarrollado el concepto, ¡es hora de codificar una demostración! Vamos a empezar con el HTML básico de nuestra página.
HTML
Para crear una página de demostración agradable, incluiremos un encabezado (usar html5shiv para IE) y un texto de relleno, luego un div que contiene nuestras imágenes. Observe que tenemos seis imágenes únicas, luego se repiten las primeras cuatro. La inicial muestra al menos parcialmente piezas de estas cuatro fotos.
¡Eso es todo al respecto! Con este código, su banner de imágenes comenzará su ciclo infinito a través de las seis fotos que incluimos.
Llevándolo más lejos
Para mostrar realmente los beneficios de este método, decidí ir un paso más allá y agregar un simple efecto de desplazamiento para cada imagen. Esto hubiera sido imposible con la técnica de fondo CSS.Sobre la marcha, escalaremos la imagen en un 20% y agregaremos una sombra.
Manifestación
¡Todos hemos terminado! Haga clic aquí o en la imagen de abajo para ver la versión en vivo.
Conclusión
Teníamos un objetivo difícil al principio de este artículo. Queríamos crear un banner de imágenes de desplazamiento infinito utilizando CSS puro. El mayor desafío aquí fue cómo hacer que se repitieran un montón de imágenes HTML. El truco, por supuesto, fue configurar una animación de fotogramas clave mientras se aseguraba de que nuestros primeros y últimos cuadros coincidieran perfectamente. Esto nos permitió bucear sin problemas la animación.
Deja un comentario a continuación y déjanos saber qué piensas de este efecto. ¿Cómo lo cambiarías o mejorarías?