Hoy vamos a tener todo tipo de diversión con la función de fondos múltiples CSS. Aprenderá cómo usar múltiples fondos de una manera sencilla y cómo ir mucho más lejos al combinar la técnica con acciones de hover y transiciones CSS para crear algunos efectos realmente geniales.
Continúe mientras codificamos cinco aplicaciones diferentes de esta idea que puede copiar y pegar para crear sus propios hovers impresionantes.
Lo que estamos construyendo
Aquí hay un adelanto de lo que crearemos hoy. Pase el ratón sobre los círculos y piense en cómo lograría estos efectos con CSS puro.
Manifestación: Haga clic aquí para iniciar la demostración.
Fondos Múltiples
Hasta hace poco, nunca había jugado con el uso de varias imágenes de fondo en mi CSS. Sabía que la característica existía pero realmente no había encontrado una forma única de usarla. Los cielos nublados de paralaje son increíbles, pero todos los están haciendo y no quería simplemente seguir a la multitud.
La solución que se me ocurrió fue descubrir algunos efectos de gran desplazamiento que utilizarían múltiples fondos para crear una especie de animación de apertura. Es un truco muy fácil, pero no lo había visto hacer antes, así que pensé en mostrarte cómo funciona.
Hay un millón de maneras diferentes de correr con él, hoy construiremos cinco versiones diferentes para que realmente puedas sentir lo que es posible.
El concepto
Su típica animación de desplazamiento de CSS es bastante básica: una imagen se aleja para revelar otra, algo gira o rebota, los colores se desvanecen y más; tienes la idea
Cuando lanzamos múltiples fondos al escenario, de repente tenemos algunas variables con las que trabajar. Con muy poca configuración, podemos crear algunas animaciones aparentemente complejas usando solo transiciones CSS, que por ahora aún tienen mejor soporte para el navegador que las animaciones de fotogramas clave.
Por ejemplo, digamos que queremos tener un efecto de apertura de puertas. Podemos animar dos imágenes de fondo en diferentes direcciones y lograr esta ilusión con facilidad:
Ahora que tenemos la explicación fuera del camino. Vayamos a la parte divertida y comencemos a construir nuestros efectos de desplazamiento.
Puertas corredizas: horizontales
Tomemos el ejemplo hipotético de arriba y veamos si podemos construir algo que use este efecto. Para empezar, necesitamos dos imágenes de fondo.
Ya que estamos mostrando una idea, no importa qué imágenes uses, solo asegúrate de que una de ellas sea una textura que se convierta en mosaico. Usaré la textura de madera oscura de patrones sutiles y un pictograma del WC gratis Sold Out A Bta.
CSS base
Cree una división vacía en HTML y aplique una clase que use un estilo básico. Aplicaremos esta clase a cada uno de los ejemplos que construimos hoy.
Estaré lanzando un montón de estos en un solo documento, así que tengo algunos estilos de diseño, pero lo más importante aquí es el radio del borde establecido en la mitad del alto / ancho, lo que nos dará un buen círculo.
Nuestras imágenes de fondo se apilarán, pero aquí se extienden con el radio de borde aplicado.
Aplicando múltiples imágenes de fondo
Lo primero que vamos a hacer es aplicar ambas imágenes de fondo, pero como una bola curva usaremos la textura de la madera dos veces para obtener un total de tres aplicaciones de imagen de fondo.
Aplicar varias imágenes de fondo en CSS es tan fácil como es posible, simplemente aplique una como de costumbre, luego introduzca una coma y aplique otra.
Estas imágenes tendrán un orden de apilamiento natural que se correlaciona con el orden en el que se enumeran: la primera es la imagen superior y la última la inferior.
Puedes ubicar los fondos con taquigrafía, pero para este ejemplo creo que es mejor mantener las cosas separadas para facilitar las cosas a los lectores. Con esto en mente, echamos en el posición de fondo propiedad para que podamos mover nuestras imágenes en su lugar.
Obviamente, cada conjunto de valores de posicionamiento se correlaciona con una de las imágenes que hemos aplicado. El primer valor de cada conjunto mueve la imagen a la derecha (valor positivo) e izquierda (valor negativo) y el segundo valor lo mueve hacia arriba (valor positivo) y hacia abajo (valor negativo).
Como puede ver, he dividido el círculo justo en el medio para que una versión de la imagen de madera esté a la izquierda y la otra a la derecha con la imagen del automóvil justo en el centro.
Parece una locura ubicar las imágenes de madera de esta manera porque solo podrías usar una, pero esto nos permitirá hacer una buena animación.
Animando las imagenes
Ahora, ya que podemos mover cada una de estas imágenes de fondo de manera independiente, podemos obtener algunos resultados bastante buenos si aplicamos transiciones.
Para configurar esto, agregamos todos los prefijos del navegador y creamos una transición simple que dura un segundo o menos. Luego, configuramos un selector flotante que mueve el fondo de madera izquierdo más a la izquierda y el fondo de madera derecho más a la derecha.
Con eso, hemos terminado con el primer ejemplo. Ahora, cuando se desplaza sobre el círculo de madera, las puertas se abrirán para revelar la imagen que se encuentra debajo.
Puertas corredizas: verticales
Ahora que hemos pasado por un ejemplo, cambiar este efecto es muy fácil. Aquí usamos las mismas transiciones de CSS e imágenes de fondo, lo único que cambia es el posicionamiento de las dos imágenes de textura de madera. Esta vez los colocamos uno encima del otro y los movemos hacia arriba y hacia abajo a medida que el usuario se desplaza.
Romper aparte: al cuadrado
Avancemos un poco las cosas y utilicemos un total de cinco imágenes para la transición. Básicamente, cuando pasas el ratón sobre el círculo, la imagen se dividirá en cuatro partes y quedará fuera de la vista.
Alineamos las cuatro imágenes superiores para que se encuentren vertical y horizontalmente en el centro del círculo. Luego en el vuelo nos movemos hacia arriba y hacia afuera.
Romper aparte: redondeado
Repetir estos efectos con una imagen redondeada es un poco más complicado porque uno, tiene que usar PNG transparentes y dos, porque tiene que hacer que las imágenes se superpongan en el estado predeterminado. Esto último causa problemas complicados con la creación de texturas, pero si usa algo como una simple textura de ruido, entonces es bastante fácil.
Gira y grita
Este es difícil de entender de la imagen de arriba. Básicamente, es lo mismo que la transición de separación anterior, solo que he agregado el elemento adicional de una rotación que se produce antes de que las imágenes se separen y revelen lo que hay debajo.
Esto implica algunas peculiaridades. El problema con la rotación es que rota todas las imágenes de fondo, incluido el automóvil debajo. Para dar cuenta de esto, giré el auto de antemano para que la rotación de transición lo coloque en su lugar. Se vislumbra el automóvil durante la rotación, pero solo aumenta el efecto.
Otra cosa interesante es el momento de las transiciones. Observe que en realidad pongo diferentes duraciones en las transiciones de rotación y movimiento. Esto demuestra lo increíblemente complejo que puedes obtener con esta idea.
Echar otro vistazo
Ahora que ha visto el código, eche otro vistazo a la demostración para ver estas técnicas en acción.
Manifestación: Haga clic aquí para iniciar la demostración.
Conclusión
El objetivo de este artículo era que pienses más allá de los efectos de paralaje sobre cómo aplicar múltiples fondos de una manera interesante.
Deja un comentario y déjanos saber qué piensas de los ejemplos anteriores. ¿Has hecho algo con varias imágenes de fondo? ¡Queremos verlo!