El proyecto de hoy es tonto y divertido, pero tiene un propósito real y educativo. En un artículo reciente, exploré cinco formas de usar múltiples imágenes de fondo CSS para crear efectos de desplazamiento geniales. Tenía una idea en ese artículo que no llegué simplemente porque su complejidad merecía una explicación independiente.
Este artículo es una extensión de la discusión anterior. Usaremos varios fondos para crear un efecto cinematográfico genial en el que alguien atraviese un mapa mientras el punto de vista se aleja. La mejor y más nerd-tastic manera de mostrar esto es, por supuesto, usar el cuento familiar de Frodo que cruza la Tierra Media para llegar al Monte Doom en Mordor. Empecemos.
El concepto
La idea básica para este efecto hover es simple. Hay un contenedor con dos fondos diferentes. El que está en la parte inferior de la pila llena todo el contenedor, el que está en la parte superior de la pila es mucho más pequeño. Sobre la marcha, la imagen de sangrado completo (que en realidad se extiende más allá del contenedor) se desplaza hacia la izquierda, mientras que la imagen pequeña se desplaza hacia la derecha. Esta es una técnica de animación súper fundamental que hace que parezca que el sujeto se está moviendo a través de la escena.
Para que las cosas sean aún más interesantes, quiero que la escena comience con una vista ampliada del sujeto y que luego se desplace para ver el paisaje como un todo.
¿Por qué la Tierra Media?
El uso más práctico que se me ocurrió para esta idea fue mostrar a alguien moviéndose a través de un mapa. Este es un caso de uso bastante típico. Si su empresa acaba de cambiar de ubicación o su familia acaba de irse de vacaciones, le resultará bastante fácil encontrar una excusa decente para implementar una divertida animación de mapas.
"No dude en burlarse de mí en los comentarios, después de ver la demostración, mi esposa me asegura que lo merezco".Ahora, dado que soy un gran nerd que está completamente entusiasmado con la próxima película, "The Hobbit," Mi mente inmediatamente saltó a una escena de la Tierra Media. En consecuencia, el proyecto de hoy evolucionó hasta convertirse en la punta de un sombrero hasta el último viaje cinematográfico de hobbit. Siéntase libre de burlarse de mí en los comentarios, después de ver la demostración, mi esposa me asegura que lo merezco.
¿Por qué múltiples imágenes de fondo?
¿Podríamos hacer esto mismo con imágenes introducidas en nuestro HTML? Sí. ¿Nos daría aún más libertad para manipular las imágenes? Usted apuesta
Entonces, ¿por qué no usamos HTML? Porque todo el objetivo del ejercicio es aprender a manejar múltiples imágenes de fondo en CSS, ¡por eso! Un día te verás obligado a codificar algo con varias imágenes de fondo y, afortunadamente, sabrás todo sobre ellas.
Verlo en acción
Antes de empezar a construir, echemos un vistazo a lo que estamos tratando de crear. Haga clic abajo para ver el producto terminado.
Manifestación: Haga clic aquí para lanzar la versión en vivo.
Comenzando: El HTML
Este experimento utiliza todos los CSS con un mínimo de marcado. Todo lo que realmente necesita para todo el proyecto es un solo div vacío. ¡Eso es!
Obviamente, puede agregar texto y otros objetos para hacer que el elemento sea más complejo, pero para los fines de hoy, este es todo el HTML que necesitamos.
Dimensionar la div
Antes de continuar con cualquier otra cosa, debemos decidir el tamaño de nuestro div. Esto influirá en el resto de nuestras decisiones. Elegí un rectángulo de buen tamaño: 500 px de ancho por 375 px de alto. Luego lo centré en la página y lo solté desde la parte superior de la página en 20px.
Prepara tus imagenes
Para seguir adelante, necesitarás dos imágenes: un mapa y un tema. Puede usar lo que quiera, pero elegí las dos imágenes a continuación por razones ya explicadas:
Mi mapa de Middle Earth es bastante grande: 1000px por 750px y mi imagen de Frodo es bastante pequeña: 100px por 100px.
Planea la animacion
Ahora que tenemos nuestras imágenes, debemos pensar detenidamente qué es lo que estamos tratando de hacer. Obviamente, Frodo comienza su viaje en The Shire, así que tendremos que ampliar el cuadrante noroeste del mapa y colocar la pequeña imagen en algún lugar de esa área.
Luego realiza un viaje a Mordor, que se encuentra en el cuadrante sureste, por lo que queremos que Frodo se mueva hacia abajo y hacia la derecha en una línea diagonal. Al comienzo de la animación, queremos acercarnos a The Shire, pero al final de la animación queremos ver toda la Tierra Media. Aquí están los dos estados para nuestro tamaño de mapa:
- Tamaño del mapa de inicio: 1,000 por 750 píxeles (tamaño completo)
- Tamaño del mapa final: 500 por 375 píxeles (el tamaño div)
Frodo también tendrá que cambiar de tamaño ya que estamos reduciéndonos. Ya que los números anteriores se resolvieron para cortar perfectamente el tamaño de la imagen a la mitad, haremos lo siguiente aquí:
- Tamaño inicial de Frodo: 100 por 100 píxeles (tamaño completo)
- Tamaño de Frodo final: 50 por 50 píxeles (medio tamaño)
También necesitaremos colocar las imágenes, pero eso es más fácil de hacer sobre la marcha a medida que las insertamos, así que sigamos con ese paso.
Insertar las imagenes
Ahora es el momento de tirar las imágenes a nuestro div. Lo mejor de usar fondos múltiples es que no necesita ningún prefijo de proveedor loco, ni siquiera necesita aprender una nueva sintaxis, simplemente suelte una imagen como siempre, inserte una coma y luego agregue otra.
Aquí he echado en alguna línea los retornos para mayor claridad. Añaden espacio adicional, pero ayudan a mantener el código legible. Tenga en cuenta que el orden de apilamiento en el código representará el orden de apilamiento en la versión en vivo. Aquí el mapa está en la parte inferior y el tema en la parte superior, que es exactamente lo que necesitamos (todo esto está en el selector #middleEarth).
Esto es lo que esto nos da:
La buena noticia es que el mapa está, de forma predeterminada, posicionado con la parte superior izquierda como su origen, que es exactamente lo que queremos. La mala noticia es que Frodo está posicionado de la misma manera, así que tendremos que trasladarlo a The Shire para comenzar.
Para colocar la imagen de Frodo, simplemente agregue en una posición horizontal y vertical después de "no repetir". poco. La mejor manera de hacer esto es simplemente experimentar y ver qué funciona. Se me ocurrió 150px 150px, que lo coloca justo al lado de la etiqueta de The Shire.
Nuestra configuración inicial ahora está justo donde queremos que esté.
Aplicación de tamaños de imagen separados
Para asegurarnos de que la animación funcione de manera popular, debemos asegurarnos de que acertemos en algunas cosas clave. Un paso importante es declarar nuestros tamaños de imagen de fondo.
Esto no es necesario al principio, ya que simplemente estamos usando el tamaño predeterminado, pero no podemos animar el cambio sin establecer explícitamente los parámetros de inicio y detención. Simplemente usamos el tamaño de fondo Propiedad con y tirar una coma para separar los valores. Al igual que al insertar las imágenes, podemos manipular de forma única las propiedades correspondientes de cada imagen utilizando una coma.
Estilos de Hover
Sobre la marcha, Frodo necesita desplazarse a Mordor a medida que el mapa comienza a alejarse. Ya hemos descubierto la mayor parte de lo que necesitamos para hacer esto. Esta vez nuestros tamaños de fondo deben ser de 50px por 50px y de 500px por 375px (reduce Frodo, se aleja para mostrar el mapa completo). Además, necesitamos mover Frodo hacia la Tierra Media, por lo que aumentamos el cambio horizontal y vertical a 400px y 240px respectivamente.
Esto pone al viejo Frodo justo en el corazón de Mordor.
Paso final: La animación
Ahora tenemos nuestro punto de partida y nuestro punto de parada todo configurado, todo lo que queda es la animación. Por supuesto, usaremos transiciones CSS para esto. Las animaciones de fotogramas clave de CSS serían mucho más divertidas y nos permitirían hacer mucho más (como hacer paradas apropiadas en el camino), pero no son tan ampliamente compatibles, por lo que tendremos que mantener las transiciones.
Sobre la marcha, quiero que el viaje sea agradable y largo, unos cinco segundos. Cuando dejes de moverte, la animación debería retroceder hasta donde comenzó. Sin embargo, quiero que sea mucho más rápido aquí, aproximadamente un segundo.
Para lograr esto, necesitamos configurar dos transiciones separadas. El primero va en el #tierra Media Selector y se establece en un segundo. Curiosamente, esto controlará la animación del mouse-out. La segunda transición va dentro de la #middleEarth: hover selector, esto controla la animación del mouse-in.
Aquí está nuestro CSS completo, que muestra todo lo que necesita para que todo funcione:
Conclusión
Con eso, todos hemos terminado! Ahora debería saber un montón de cosas geniales sobre el uso de fondos múltiples: cómo aplicarlos en el orden de replanteo adecuado, ubicarlos de forma independiente y animar el tamaño y la posición de cada imagen.
Asegúrese de echar otro vistazo a la demostración para ver el proyecto en acción y háganos saber lo que piensa en la sección de comentarios a continuación.