Esta idea se publicó originalmente el 12/3/2008, donde tenía que cambiar el tamaño de la ventana del navegador para ver el paralaje. Lo actualicé el 6/4/2009 para utilizar jQuery para mover las estrellas automáticamente. Ahora lo estoy actualizando nuevamente para usar CSS3 para animar las estrellas.
Existe cierto debate sobre si estas elegantes transiciones y animaciones que nos trae CSS3 pertenecen a CSS. Se podría argumentar que las cosas que se mueven así son “comportamiento” y no “diseño” y, por lo tanto, pertenecen a JavaScript. No estoy de acuerdo con ese sentimiento, y que las animaciones son definitivamente “diseño” y si podemos mantener esas cosas en CSS, deberíamos hacerlo. Por lo tanto, estoy actualizando esta idea (vea los enlaces originales arriba) para utilizar animaciones de fotogramas clave CSS3.
Las estrellas vuelan por los navegadores WebKit. En todos los demás, cambiar el tamaño de la ventana del navegador aún produce un efecto de paralaje genial.
Ver demostración Descargar archivos
Declaración de animación de fotogramas clave
Así es como se declara una animación de fotogramas clave. Nombraremos nuestro “STAR-MOVE”:
@-webkit-keyframes STAR-MOVE {
from {
left: 0;
top: 0;
}
to {
left: -10000px;
top: -2000px;
}
}ACTUALIZAR: Esto es aproximadamente el doble de eficiente (según mi prueba aproximada de monitoreo de CPU). Porque aquí solo estamos cambiando de posición, mientras que en la forma anterior estábamos expandiendo el tamaño del área que el navegador necesitaba para procesar/seguir la pista.
@-webkit-keyframes STAR-MOVE {
from {
background-position: 5% 5%
}
to {
background-position: 1300% 600%
}
}No está limitado a “desde” y “a”, puede incluir más de ellos, en función de los porcentajes. Como 40% { } que animará a esas propiedades/valores cuando la animación esté completa en un 40%.
Nuestra animación es muy simple, animaremos la posición de la imagen de fondo, básicamente tirando de los elementos hacia la parte superior izquierda. No todas las propiedades se pueden animar, pero en general se puede animar cualquier cosa con un valor numérico (incluidos los colores). Pero no puede, por ejemplo, animar una fuente de Helvetica a Georgia.
Estas propiedades anularán cualquier configuración anterior para las propiedades especificadas. Entonces, por ejemplo, dado que IE no admite esto, es posible que desee establecer las propiedades con CSS normal de una manera que tenga sentido si no hay animación. Luego, sepa que esas propiedades se anularán con las propiedades from/0% de la animación.
Uso de la animación de fotogramas clave
Tenemos tres “capas” de estrellas, cada una de las cuales cubre toda la pantalla con una capa alfa transparente repetida de estrellas gráficas de fondo. Podemos llamar a la misma animación en los tres divs, solo que con diferentes duraciones.
#background {
background: black url(../images/background.png) repeat 5% 5%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 100;
-webkit-animation-name: STAR-MOVE;
-webkit-animation-duration: 200s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
#midground {
background: url(../images/midground.png) repeat 20% 20%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 200;
-webkit-animation-name: STAR-MOVE;
-webkit-animation-duration: 150s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
#foreground {
background: url(../images/foreground.png) repeat 35% 35%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 300;
-webkit-animation-name: STAR-MOVE;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}Las estrellas más grandes se mueven más rápido (están “más cerca” en la ilusión y, por lo tanto, deberían pasar más rápido). Parecen moverse más rápido porque la duración de la animación es más corta y, por lo tanto, necesitan moverse una distancia mayor en un período de tiempo más corto.
Las animaciones utilizan funciones de “aceleración”. Es decir, se aplica una fórmula matemática para controlar qué tan rápido la animación “se acelera” y retrocede. Sin suavizar, las animaciones podrían verse entrecortadas e incómodas. El valor predeterminado en webkit es “facilidad”, que lentamente aumenta la velocidad de una animación y luego la vuelve a bajar lentamente. En este ejemplo en particular, eso no tenía sentido, porque al final de los 100, las estrellas más grandes usan, la velocidad de la animación es tan lenta que las estrellas detrás de ella van más rápido (raro). Así que observe que en el código anterior restablecemos la aceleración a “lineal”. Para obtener una lista completa, consulte aquí.
Soporte del navegador
Solo navegadores WebKit (Safari, Mobile Safari, Chrome) en este momento. Sé que Firefox 3.7 tendrá soporte para transiciones, pero no tengo claro si tendrá un prefijo para animaciones de fotogramas clave o no. Si lo sabes, házmelo saber.