Navidad al estilo Google. El 'misterio' de las animaciones CSS

Seguro que algunos ya habréis reparado en que este año,al buscar en Google la palabra Navidad o su equivalente en otros idiomas como el inglés, aparece en la parte superior de la ventana del navegador y como fondo del menú principal, un sencillo paisaje nevado con sus correspondientes copos cayendo y el trineo de Papa Noel (Santa Claus, San Nicolás, como prefiráis) corriendo ocasionalmente por él.

Se trata de un efecto eminentemente gráfico, visualmente sencillo y cuya programación también lo es. Sólo lleva CSS y lo único un poco menos fácil para los no iniciados sería la parte de la animación del trineo. Esto es algo que yo tampoco domino pero este ejemplo creo que servirá como pequeña introducción sobre su uso. Allí vamos.

Papa Noel por la blanca campiña

Al contrario de lo que suelo hacer, para los impacientes o los que simplemente tengan que salir corriendo a preparar el próximo menú navideño, primero la forma de ponerlo en el propio sitio y luego ya lo desmigajamos un poco.

Aunque el CSS necesario iría en un principio en la parte de estilo, en esta ocasión y por ser un código eventual que no queremos que se siga viendo en verano, lo vamos a poner por la vía rápida justo después de la apertura <body>. Para ello le he añadido unas etiquetas style y así lo podemos poner junto con el HTML donde dije. De esta manera, al igual que ahora lo ponemos del tirón, el día que queramos quitarlo lo podremos eliminar fácilmente de una sola vez.

<-- PAPA NOEL -->
<style>
#santa {
position: relative;
top: 0;
left: 0;
display: block;
overflow: hidden;
width: 100%;
height: 60px;
margin:0;
padding: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2P0XL941MkOCumg4kTydPwELIfjVlLJ5emWfJPzlwBwKXMMzUYw27NWqCM1vaFbJnAsBBn0NPUmTwsGHDWK06EGnqrhyphenhyphenQGkztII_zMEd886ulwnhxPs8KVtTk-8GSRhXx7CZZzTOGeagf/s1600/xmas_bg_n.gif) left bottom;
}
#santa:before {
position: absolute;
bottom: -2px;
left: -200px;
content: "";
display: inline-block;
width: 200px;
height: 26px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisVJv_1JP-70eCNh3PgNh7U4PNtrExu5Yx0CPu2XPOv9W2dhFplQAwsfwGeOgm7mPjBMeifvIX8j159bd3abBOaOwGsGn3Rm59OOA3qBR0VfSiz3UajGEAvScelZroO4Q8-mUAqE7I6YPf/s1600/xmas_santa_n.gif) transparent no-repeat;
-webkit-animation-delay: 4s;
-webkit-animation-duration: 20s;
-webkit-animation-name: santamove;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-delay: 4s;
animation-duration: 20s;
animation-name: santamove;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#santa:after {
position: absolute;
bottom: -2px;
left: 0;
content: "";
display: inline-block;
width: 100%;
height: 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLM7_RaUiEBjSWM4GRxQhSXbSM35UEeObmAoVrZrsjYMD_dmuP9SuAAxVgjoHYuNWLSS4ArnaE65n03PnwKupN1xNMas-FgD5X8WyNOtTH0ohcBYaHvh8JSzLO4W8Lt1rZ4lSSHT6cDRPP/s1600/xmas_snow_n.png) transparent repeat-x;
}
@-webkit-keyframes santamove {
from {left: 0%;}
to {left: 200%;}
}
@keyframes santamove {
from {left: 0%;}
to {left: 150%;}
}
</style>
<div id='santa'></div>

Eso es todo. El CSS dibuja todo en un id que he llamado #santa, de manera que al colocar una caja vacía con ese nombre en el lugar de la plantilla que dije, en la parte superior de la página debería aparecer la comentada estampa navideña.

Puede que en algunas plantillas que tengan elementos posicionados de forma fija o absoluta por esa zona, la cosa no quede bien y haya que hacer más ajustes, pero en la mayoría no habrá que hacer nada más.

El truco de esto está principalmente en las tres imágenes utilizadas. La primera es un patrón que forma el fondo principal azul y que incorpora los copos en movimiento. Se trata de un .gif, así que lo de la animación de esta parte está incorporada al dibujo.

Es la que va en la id principal (#santa) y el resto del código del selector es prácticamente para dimensionar la caja. Importante el posicionamiento relativo para luego poder ubicar bien lo que añadiremos sobre ella.

Sobre esta imagen azul con la nieve pondremos el trineo que luego veremos y la tercera imagen será otra con menor altura y que es la que crea las irregularidades del suelo.

Se trata de una imagen fija pero transparente, de manera que a través de los senos de las curvas del terreno, podamos ver la parte inferior del trineo en su desplazamiento. Es esta y como no tenía casi contraste con el fondo del blog, le he puesto un fondo oscuro para que podáis apreciar bien cómo está hecha.

¿Dónde va esta? Pues para no crear más selectores simplemente se ha añadido con un :after.

#santa:after {
position: absolute;
bottom: -2px;
left: 0;
content: "";
display: inline-block;
width: 100%;
height: 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLM7_RaUiEBjSWM4GRxQhSXbSM35UEeObmAoVrZrsjYMD_dmuP9SuAAxVgjoHYuNWLSS4ArnaE65n03PnwKupN1xNMas-FgD5X8WyNOtTH0ohcBYaHvh8JSzLO4W8Lt1rZ4lSSHT6cDRPP/s1600/xmas_snow_n.png) transparent repeat-x;
}

Tampoco hay mucho misterio en lo anterior. Medidas para la caja con visibilidad de bloque, el mencionado segundo fondo que quedará por encima y un posicionamiento absoluto con respecto al bloque principal (#santa).

Nos queda el trineo y ese lo hacemos prácticamente igual que el suelo pero añadiéndolo con :before. La única particularidad es que lo posicionamos inicialmente fuera de la escena con un left negativo. Las últimas 5 líneas son las necesarias para la animación.

#santa:before {
position: absolute;
bottom: -2px;
left: -200px;
content: "";
display: inline-block;
width: 200px;
height: 26px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisVJv_1JP-70eCNh3PgNh7U4PNtrExu5Yx0CPu2XPOv9W2dhFplQAwsfwGeOgm7mPjBMeifvIX8j159bd3abBOaOwGsGn3Rm59OOA3qBR0VfSiz3UajGEAvScelZroO4Q8-mUAqE7I6YPf/s1600/xmas_santa_n.gif) transparent no-repeat;

animation-delay: 4s;
animation-duration: 20s;
animation-name: santamove;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

Para mover elementos se usa animation y sus respectivas variantes para configurar las opciones, pero para que se ejecute el movimiento y marcar la ruta, tendremos que echar mano de @keyframes como veremos al final. De momento preparamos el tema con:

animation-delay: especifica el tiempo en segundos de demora para empezar el movimiento. En este caso arrancaremos 4 segundos después de la carga.
animation-duration: cuánto tardará el elemento a animar en hacer un "recorrido" completo
animation-name: un nombre de libre designación para relacionar animation y @keyframes
animation-timing-function: para fijar el ritmo de la animación, similar a lo que usamos en transition (linear, ease-in, etc.)
animation-iteration-count: asigna el número de veces que se repetirá la misma secuencia

Y por fin lo que hace que todo esto se mueva. Es algo muy sencillo en cuanto a concepto y para un simple inicio como el de hoy, basta con saber que from y to se usan para fijar los puntos de inicio y destino de la animación.

Si recordáis, en la caja del trineo (#santa:before) indicamos antes un nombre para la animación (santamove) que es el que nos permitiría relacionar los valores anteriores de animation con este @keyframes de ahora. Ese nombre irá al principio de la declaración necesariamente.

@keyframes santamove {
from {left: 0%;}
to {left: 150%;}
}
</style>
<div id='santa'></div>

¿Y hace falta que explique el resto? La caja del trineo estaba inicialmente posicionada con un left de -200px para que no se viera, pero una vez cubierta la demora de 4 segundos (animation-delay), la caja empieza a correr desde el punto 0 (from) hasta el que hace el 150% (to) del ancho.

Para esto invertirá 20 segundos, que fue lo que especificamos en animation-duration, se moverá con un ritmo lineal (animation-timing-function: linear) y además se repetirá el ciclo indefinidamente (animation-iteration-count: infinite).

Quizás alguien se pregunte por qué puse que se moviera hasta el 150% del ancho y no hasta el 100% y la respuesta es que así no estaremos continuamente viendo pasar a Papa Noel cada vez que llega al extremo derecho.

Del tiempo total (20 segundos), el trineo estará visible 2/3 partes y el otro tercio lo pasará recorriendo ese espacio que no es visible (50%) porque está fuera de la caja principal. Así es como se logra que aparezca cada cierto tiempo y que no se haga pesado.

Hay mucha más tela que cortar en esto de las animaciones CSS pero como veis, con unas pocas nociones ya se puede empezar a hacer cosillas.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Copy URL

Y muchos más artículos interesantes si nos sigues en...

6 comentarios :

Jorge MG26/12/13, 18:48
Buen efecto, muy útil para introducirse en las animaciones CSS.
El código de las animaciones se podría simplificar así:
animation: santamove 20s 4s linear infinite;
(añadiendo los correspondientes prefijos -moz- y -webkit-)
ResponderEliminar
Respuestas
Karla Castañeda28/12/13, 1:48
Fíjate que no había visto la animación que muestra Google en su buscador cuando pones Navidad...qué bonito y el que tú creaste también ;)

ResponderEliminar
Respuestas
Unknown2/1/14, 2:36
Hola,tus entradas me sirven de mucha utilidad..no se si este sera el sitio apropiado para preguntar,pero me podrias ayudar con el gadger linkwhit,hay alguna forma de poder centralo? y donde pone "10 comentarios" hay forma de cambiar el tamaño y centrarlo tb? agradeceria tu ayuda!!
Gracias anticipadas.
www.27forever.es
ResponderEliminar
Respuestas

Añadir comentario

Oloblogger

Páginas

Oloblogger

26 de diciembre de 2013

Navidad al estilo Google. El 'misterio' de las animaciones CSS

Compartir

6 comentarios :

Referencias