Hazlo nevar en tu sitio web con animaciones de fotogramas clave CSS

La temporada de vacaciones está en su punto máximo y para algunas personas afortunadas en climas apropiados para el clima, el invierno está en pleno apogeo. Vivo en Phoenix, de modo que el verdadero invierno, y en consecuencia la nieve, es realmente un sueño lejano. ¡Así que me veo obligado a recurrir a nerdery para obtener mi corrección!

Hoy vamos a repasar una técnica CSS muy simple que puedes usar para hacer que nieve en tu sitio web. Solo le llevará unos minutos como máximo y sirve como una excelente introducción al uso de múltiples imágenes de fondo y animaciones de fotogramas clave en CSS.

Webkit FTW

Para mantener las cosas simples, comenzaré con todo este código usando el -kebkit prefijo del vendedor. Esto mantendrá nuestro código más limpio y más fácil de leer a medida que aprendemos. La razón por la que elegí Webkit es simple: la animación de fotogramas clave CSS es genial. Incluso Firefox, que recientemente agregó soporte para fotogramas clave, realmente no lo cortará tan bien como Safari.

Luego, analizaremos cómo agregar los prefijos de otros proveedores y qué tipo de experiencia puede esperar en cada navegador. En última instancia, si realmente está buscando un efecto sólidamente compatible que funcione en tantos navegadores como sea posible, le recomiendo que busque un complemento de jQuery snow. Sin embargo, si estás preparado para una divertida experiencia de aprendizaje de CSS, ¡sigue leyendo!

Comenzando: Nosotros Tres PNGs

La configuración para este proyecto es tres imágenes de fondo nevadas. Definitivamente, puede agregar más si lo desea, pero usaremos tres aquí para mantener las cosas simples y agradables. Básicamente, todo lo que necesitas son tres archivos PNG de fondo transparente de tamaño variable con pequeños puntos blancos al azar en ellos.

Aquí está mi proceso para configurar estos. Primero, creé una imagen cuadrada de 500px y usé un pincel pequeño con una dureza total. Puede configurar un pincel de dispersión si lo desea, pero me gusta el control de colocar manualmente los puntos alrededor del lienzo. Luego, para asegurarme de que tuviera un buen mosaico, fui a Filtro> Otros> Desplazamiento.

Desde que comencé con una imagen cuadrada de 500 píxeles, lo cortaré por la mitad y lo compensaré en 250 píxeles tanto horizontal como verticalmente.

Después de ejecutar este comando, es posible que tenga algunos puntos desordenados cerca del centro, estos deben ser fáciles de limpiar con un poco de borrado. La parte importante es que los bordes se envuelven muy bien para que la mitad de la imagen se pueda cambiar como quieras.

Ahora guarde su PNG y repita todo este proceso para obtener una imagen cuadrada de 400px y una imagen cuadrada de 300px. Para estos dos últimos, hice que los copos de nieve se pusieran un poco borrosos y reduje un poco la opacidad.

Aplicando los fondos

Ahora vamos a aplicar estas imágenes a nuestro fondo en CSS. Los estoy lanzando usando el selector de cuerpo, pero siéntase libre de aplicarlos a algo más específico.

Implementar múltiples fondos es exactamente igual que aplicar solo un fondo, la única diferencia es que usted lanza una coma después de la primera URL de la imagen y agrega otra. Así es como se verá nuestro código, tenga en cuenta que todas las imágenes de fondo se repetirán de forma predeterminada.

Los fondos múltiples tienen un gran soporte general, la única cosa real de la que tiene que preocuparse es, lo adivinó, versiones anteriores de IE. Al igual que con casi todo lo demás en CSS avanzado, se admiten varios fondos en IE9, pero nada más antiguo. ¡Esperamos que el nuevo programa de actualización automática de IE ponga fin a este tipo de problemas!

Configuración de los fotogramas clave

En el pasado, hemos hecho algunas animaciones de fotogramas clave bastante complejas en Design Shack, pero esta vez podemos mantenerlas de manera muy simple.

A pesar de que me estoy refiriendo a esto como? Simple? hay mucha verdad en esta sintaxis, así que vamos a desglosarla pieza por pieza. Lo que se está haciendo es configurar una animación que luego podemos activar en cualquier otra parte de nuestro CSS. La sintaxis básica es? @Keyframes? pero aquí estamos implementando la versión Webkit, así que usamos "@ - webkit-keyframes". ¿La nieve? Parte es el nombre que elegí para la animación. Tienes algo de libertad aquí, pero trata de elegir algo descriptivo y útil.

A continuación iniciamos dos cuadros. El primero es cómo se verá nuestra página al comienzo de nuestra animación, el segundo es cómo se verá al final. Al principio, coloqué todas nuestras imágenes de fondo en la parte superior izquierda de la página usando? 0px 0px. Luego, al final, moví cada imagen a una nueva ubicación. Al igual que cuando colocamos cada imagen, separaremos cada conjunto de valores de posición con una coma.

La logica de posicion

La posición de cada imagen al final de la animación puede parecer arbitraria, pero en realidad esto es muy intencional. Para que la animación funcione correctamente, debes comprender algunas cosas.

? Una vez que una única instancia de una animación haya seguido su curso, volverá a comenzar. Si no coloca sus imágenes correctamente, verá un punto en este punto.

La razón por la que estamos usando animaciones de fotogramas clave en lugar de la propiedad de transición más simple y mucho mejor admitida es porque podemos hacer un bucle de una animación de fotogramas clave sin cesar, por lo que continuará nevando indefinidamente. Teniendo esto en cuenta, debes recordar que una vez que una única instancia de una animación haya seguido su curso, volverá a comenzar. Si no coloca sus imágenes correctamente, verá un punto en este punto.

El truco es utilizar el tamaño de sus imágenes para asegurarse de que el cuadro final coincida con el cuadro inicial, creando así una transición perfecta.Por ejemplo, mi segunda imagen de fondo era de 400px por 400px, así que moví el fondo de 400px hacia abajo durante el curso de la animación, lo mismo para mi tercera imagen a 300px. Para mi primera imagen hice algo un poco diferente. Quería que se moviera más rápido, así que doblé la altura y la moví 1.000 píxeles. Como este es un múltiplo de la altura, el último fotograma aún coincidirá con el primero.

También note que moví la posición horizontal de las imágenes también. Esto agrega un poco de viento a la ecuación para que la nieve no caiga perfectamente verticalmente. Si desea que la nieve se balancee hacia adelante y hacia atrás a medida que cae, simplemente agregue unos cuantos cuadros más.

Implementando la animación

Nuestro último paso es volver al selector de cuerpo y lanzar? -Webkit-animation? Para crear una instancia de la animación. Primero indicamos el nombre de la animación que queremos usar, en este caso “nieve”. luego indicamos la duración de la animación (20 segundos), a continuación elegimos una función de sincronización (lineal) y, finalmente, hacemos un bucle infinito de la animación.

¡Con eso, tu sitio web debería estar nevando como loco en Safari! Echemos un vistazo a ampliar esto un poco.

Otros prefijos del navegador

Ahora para agregar más soporte de navegador. Nuestra sección de configuración de fotogramas clave debe ampliarse a lo siguiente. Comencé con la sintaxis básica sin un prefijo de navegador, luego utilicé los prefijos para Mozilla, Webkit y Microsoft.

Luego hacemos lo mismo para los estilos en el cuerpo. Todos los diversos navegadores usan la misma sintaxis, solo el prefijo cambia.

Tenga en cuenta que el soporte de IE aquí es puramente para el futuro. Solo IE 10 tiene soporte para animaciones de fotogramas clave y aún está en desarrollo.

?¿No tan rapido? dice Firefox

En este punto, quería terminar con el tutorial, pero, por desgracia, abrí Firefox y encontré un problema: ¡no hay animación! Después de algunas excavaciones, resultó que el problema está en la implementación de fondo múltiple.

El tema es extraño. Firefox admite varias imágenes de fondo y admite animaciones de fotogramas clave. ¡Incluso soporta animaciones que usan múltiples imágenes de fondo! Sin embargo, por alguna razón, no parece permitir mover la posición de cada imagen de fondo de forma independiente durante una animación de fotograma clave.

Actualizar

¡Buenas noticias, el comentarista Patric resolvió nuestro pequeño problema de Firefox! Resulta que mi amor por la taquigrafía me metió en problemas aquí. Firefox funciona perfectamente si enumera todos los valores en la línea inicial. Aquí está el código de fotograma clave actualizado:

Verlo en acción

Manifestación: Haga clic aquí para lanzar

Conclusión

En resumen, hacer una animación de nieve pura en bucle CSS que funciona en los navegadores modernos es muy fácil. Unos pocos minutos de Photoshop y un par de líneas de código simples y tienes el Polo Norte. IE no admitirá animaciones de fotogramas clave hasta la versión 10, Opera actualmente tiene cero soporte y Firefox tiene soporte, pero no es tan extenso como lo que encontrará en Webkit.

Este proyecto ilustra perfectamente por qué es importante jugar con estas cosas antes de que esté listo para ser implementado en el mundo real. No tenía idea de que Firefox lanzaría una llave en mi pequeña animación hasta que realmente me ensucié las manos con un experimento. Ahora me encuentro mucho más informado sobre la sintaxis necesaria para las animaciones de CSS en un navegador a otro.