Como Usar CSS3 Y Un Editor De Imágenes Para Animar Objetos
Si damos un vistazo hacia atrás, veremos que la animación que nos brindaba CSS era limitada. Los efectos no eran muy asombrosos que digamos, y siempre había necesidad de usar algún plugin de JavaScript, ó el propio JavaScript para lograr buenas animaciones sin la necesidad de recurrir a Flash. ¿Todavía usas CSS y JavaScript? Te contamos que existe CSS3 y con él, funcionalidades excelentes para la creación y uso de animaciones sin la necesidad siquiera de usar JavaScript ó algún plugin de él ;)
La llegada de las reglas de KeyFrames en CSS3, ha aumentado la capacidad de CSS para crear ó animar objetos en una forma más avanzada y sorprendente. El uso de esta regla, puede cambiar el conjunto de estilos CSS varias veces.
En el tutorial de hoy, voy a mostrarle cómo animar a un personaje caminando hacia adelante, adornado con un encierre de madera, nubes y el fondo. Por favor, tenga en cuenta que esto no es un tutorial de introducción a la animación de CSS3. Si usted no sabe cómo funciona la animación CSS3, sugiero visitar esta página. En este caso en particular, hemos usado PhotoShop para crear nuestra imagen de ejemplo. ¿No tiene PhotoShop? No te preocupes, también puedes usar es Gimp, ademas es libre y gratuito :)
Resultado Final
See the Pen Animacion Objeto CSS3 by HostDime Colombia (@HostDimeColombia) on CodePen.
¿Que Necesita En Este Tutorial?
- Archivo de diseño PSD ó puedes usar el tuyo.
- Reset.css
- Algo de tiempo y por supuesto paciencia ;)
Ahora si, empecemos!
Estructura De Archivos
La estructura de los archivos consistirá en cuatro carpetas y un archivo HTML:
- index.html – Esto servirá como el archivo principal. Todo el HTML que será usado estará en este archivo.
- carpeta img – Para las imágenes
- carpeta css – Para el archivo de estilo (CSS)
Preparando Los Elementos
Como se mencionó anteriormente se ha preparado un archivo en Photoshop, reiteramos, puedes usar el de tu propiedad. Descargue el archivo PSD y abrarlo en Photoshop. Observe que cada elemento está separado en el panel de capas.
Puede importar cada elemento individual como archivos png arrastrando cada capa a un nuevo documento de Photoshop y eliminar el fondo. Sin embargo, para las extremidades y la cola de la jirafa de carácter vectorial (excepto para el propio cuerpo), tenemos que añadir un espacio adicional en la parte superior o inferior de la punta de cada elemento de anclaje.
Esto dependerá de dónde estará el punto de las partes del cuerpo de anclaje. El punto de anclaje es el punto de intersección, donde en el cuerpo y las extremidades y colas se conectan, aquí es donde se llevará a cabo la rotación de CSS.
Para ello, continúe y arrastre uno de los miembros en el nuevo archivo de documento de Photoshop, suprimir el fondo y use las reglas para señalar cual desea que sea su punto de anclaje.
A continuación, haga clic en la herramienta de marco rectangular y obtener la porción más grande que se ve entre las rejillas donde se configura el punto de anclaje.
Para este ejemplo, la dimensión que recibí de la herramienta de selección de marco es 19px X 119px (puedes comprobarlo en el panel de información). Voy a duplicar el tamaño de la altura y añadir esta en la parte superior del punto de anclaje donde las extremidades y el cuerpo se conectan.
Vaya en la siguiente ruta dentro de Photoshop: Image -> Canvas y lo puso en la altura – 238px, que es el doble del tamaño de lo que recibimos de la herramienta de selección de marquesina. El punto de anclaje estará apuntando al alza desde la rotación y el punto de anclaje se llevarán a cabo en la parte superior, dando un poco de espacio extra. Pulse Aceptar.
Ahora, repita el paso anterior para el resto de las partes del cuerpo. Sólo tenga cuidado de donde va a agregar el espacio con la imagen.
Empezamos Con Lo Interesante
¿Como así que empezamos? Pues si, lo anterior solo fue para preparar las imágenes, no hemos cuadrado nuestro ambiente para la animación ;) Despreocupate, de ahora en adelante solo es copiar, pegar, y modificar. En primer lugar, tenemos que añadir los siguientes librerías CSS, esto lo hacemos en la sección del head:
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animating</title>
<link href="css/reset.css" media="screen" rel="stylesheet">
<link href="css/style.css" media="screen" rel="stylesheet">
</head>
[/html]
El archivo reset lo habíamos descargado al principio del articulo y lo ubicamos de acuerdo a la estructura, que también se puso al inicio ;) El archivo style.css tendrá el CSS que hará la magia de la animación.
El HTML
Para las etiquetas HTML, debemos agregar todos los archivos PNG y envolverlos en un div con el ID giraffe-animation:
[html]
<div id="giraffe-animation">
<img id="clouds" src="img/clouds2.png"/>
<img id="fence" src="img/fence.png"/>
<img id="back-left" src="img/back-left.png"/>
<img id="front-left" src="img/front-left.png"/>
<img id="tail" src="img/tail.png"/>
<img id="main-body" src="img/body.png"/>
<img id="back-right" src="img/back-right.png"/>
<img id="front-right" src="img/front-right.png"/>
</div>
[/html]
En ese momento, se puede ver un resultado similar como la imagen de abajo:
El Responsable De La Animacion: El CSS
A continuación ira el código CSS, con el daremos unas configuraciones iniciales. Entre estos se dará una altura, anchura y una posición relativa. También, se ocultara todos los elementos de desbordamiento para mantener todas las capas en el interior del div. A continuación, se configurara la posición de cada elemento y se dará a cada uno de ellos una posición absoluta.
[css]
#giraffe-animation {
width: 800px;
height: 600px;
background: url(../img/background.png)top left no-repeat;
border: 4px solid #373737;
margin: 20px auto 0;
position: relative;
overflow: hidden;
}
#clouds {
position: absolute;
left: 0;
top: 55px;
}
#fence {
position: absolute;
left: -10px;
top: 173px;
}
#main-body {
position: absolute;
left: 293px;
top: 90px;
}
#front-left {
position: absolute;
left: 308px;
top: 292px;
}
#back-left {
position: absolute;
left: 332px;
top: 304px;
}
#tail {
position: absolute;
left: 239px;
top: 305px;
}
#front-right {
position: absolute;
left: 429px;
top: 296px;
}
#back-right {
position: absolute;
left: 446px;
top: 277px;
}
[/css]
Después de agregar todos estos códigos, se puede ver que lo que se pretende animar se vera mucho mas bonito:
Ahora, vamos a añadir la regla de los fotogramas clave de las extremidades. Esto le dará a los miembros la animacion de sus propiedades utilizando las palabras clave from y to. Copia y pega el siguiente código:
[css]
@-webkit-keyframes limb1{
from {-webkit-transform: rotate(-5deg);}
to {-webkit-tranform: rotate(40deg);}
}
@-moz-keyframes limb1{
from {-moz-transform: rotate(-5deg);}
to {-moz-tranform: rotate(40deg);}
}
@keyframes limb1{
from { transform: rotate(-5deg);}
to {tranform: rotate(40deg);}
}
@-webkit-keyframes limb2{
from {-webkit-transform: rotate(5deg);}
to {-webkit-tranform: rotate(-10deg);}
}
@-moz-keyframes limb2{
from {-moz-transform: rotate(5deg);}
to {-moz-tranform: rotate(-10deg);}
}
@keyframes limb2{
from {transform: rotate(5deg);}
to {tranform: rotate(-10deg);}
}
@-webkit-keyframes limb3{
from {-webkit-transform: rotate(-5deg);}
to {-webkit-tranform: rotate(10deg);}
}
@-moz-keyframes limb3{
from {-moz-transform: rotate(-5deg);}
to {-moz-tranform: rotate(10deg);}
}
@keyframes limb3{
from {transform: rotate(-5deg);}
to {tranform: rotate(10deg);}
}
@-webkit-keyframes limb4{
from {-webkit-transform: rotate(5deg);}
to {-webkit-tranform: rotate(-40deg);}
}
@-moz-keyframes limb4{
from {-moz-transform: rotate(5deg);}
to {-moz-tranform: rotate(-40deg);}
}
@keyframes limb4{
from {transform: rotate(5deg);}
to {tranform: rotate(-40deg);}
}
[/css]
Nótese que los prefijos de proveedores se utilizan para orientar los navegadores específicos. Para habilitar esta animación de fotogramas clave, agregue la propiedad de animación en cada una de las extremidades apuntadas. Esto incluirá el nombre de la animación, duración de la animación, la función de tiempo de animación, retardo de la animación y el ciclo que repetirá la animación. Copie el código abajo y añadalo al anterior código, recuerde que esto debe de ir en el archivo style.css:
[css]
#front-left {
-webkit-animation: limb1 .5s linear 0 infinite alternate;
-moz-animation: limb1 .5s linear 0 infinite alternate;
-ms-animation: limb1 .5s linear 0 infinite alternate;
-o-animation: limb1 .5s linear 0 infinite alternate;
animation: limb1 .5s linear 0 infinite alternate;
}
#back-left {
-webkit-animation: limb4 .5s linear 0 infinite alternate;
-moz-animation: limb4 .5s linear 0 infinite alternate;
-ms-animation: limb4 .5s linear 0 infinite alternate;
-o-animation: limb4 .5s linear 0 infinite alternate;
animation: limb4 .5s linear 0 infinite alternate;
}
#tail {
-webkit-animation: tail .3s linear 0 infinite alternate;
-moz-animation: tail .3s linear 0 infinite alternate;
-ms-animation: tail .3s linear 0 infinite alternate;
-o-animation: tail .3s linear 0 infinite alternate;
animation: tail .3s linear 0 infinite alternate;
}
#front-right {
-webkit-animation: limb3 .5s linear 0 infinite alternate;
-moz-animation: limb3 .5s linear 0 infinite alternate;
-ms-animation: limb3 .5s linear 0 infinite alternate;
-o-animation: limb3 .5s linear 0 infinite alternate;
animation: limb3 .5s linear 0 infinite alternate;
}
#back-right {
-webkit-animation: limb2 .5s linear 0 infinite alternate;
-moz-animation: limb2 .5s linear 0 infinite alternate;
-ms-animation: limb2 .5s linear 0 infinite alternate;
-o-animation: limb2 .5s linear 0 infinite alternate;
animation: limb2 .5s linear 0 infinite alternate;
}
[/css]
A continuación, agregue los fotogramas clave para el cuerpo. Para esta parte, utilice la propiedad translateY para definir una transformación del elemento por la distancia especificada a lo largo de la Y (eje vertical). Esto creará un movimiento suave en el cuerpo de la jirafa carácter vectorial.
[css]
@-webkit-keyframes main-body {
from {-webkit-transform: translateY(0px);}
to {-webkit-transform: translateY(3px);}
}
@-moz-keyframes main-body {
from {-moz-transform: translateY(0px);}
to {-moz-transform: translateY(3px);}
}
@keyframes main-body {
from {transform: translateY(0px);}
to {transform: translateY(3px);}
}
[/css]
A continuación, hacer que esto funcione, añadiendo el siguiente código al elemento del cuerpo para activar la animación. Para esta parte, añadir de nuevo las propiedades de animación necesarios en el elemento del cuerpo.
[css]
#main-body {
-webkit-animation: main-body .3s linear 0 infinite alternate;
-moz-animation: main-body .3s linear 0 infinite alternate;
-ms-animation: main-body .3s linear 0 infinite alternate;
-o-animation: main-body .3s linear 0 infinite alternate;
animation: main-body .3s linear 0 infinite alternate;
}
[/css]
Ahora que ya tenemos el trabajo del cuerpo, añadir un poco de animación a la cola de la animación jirafa. Copia y pega el siguiente código para su archivo CSS.
[css]
@-webkit-keyframes tail{
from{-webkit-transform: translateY(0px) rotate(-3deg);}
to{-webkit-transform: translateY(3px) rotate(3deg);}
}
@-moz-keyframes tail{
from{-moz-transform: translateY(0px) rotate(-3deg);}
to{-moz-transform: translateY(3px) rotate(3deg);}
}
@keyframes tail{
from{transform: translateY(0px) rotate(-3deg);}
to{transform: translateY(3px) rotate(3deg);}
}
[/css]
A continuación, agregue el código siguiente al código de la cola CSS. Esto volverá a añadir el código de las propiedades de animación para hacer las reglas de fotogramas clave para el trabajo de la cola. Tome nota de que el siguiente código es igual, que los códigos anteriores cuando hicimos el elemento de la cola en la pantalla.
[css]
#tail {
-webkit-animation: tail .3s linear 0 infinite alternate;
-moz-animation: tail .3s linear 0 infinite alternate;
-ms-animation: tail .3s linear 0 infinite alternate;
-o-animation: tail .3s linear 0 infinite alternate;
animation: tail .3s linear 0 infinite alternate;
}
[/css]
Ahora que tenemos los miembros, cuerpo y cola animadas, se centran en la animación de la cerca. Copie la regla de fotogramas clave a continuación y añadirla a su archivo CSS.
[css]
@-webkit-keyframes fence{
from{left: -10px;}
to{ left: -288px;}
}
@-moz-keyframes fence{
from{left: -10px;}
to{ left: -288px;}
}
@keyframes fence{
from{left: -10px;}
to{left: -288px;}
}
[/css]
Copia y agregue el código CSS de abajo para la valla:
[css]
#fence {
-webkit-animation: fence 3s linear 0 infinite;
-moz-animation: fence 3s linear 0 infinite;
-ms-animation: fence 3s linear 0 infinite;
-o-animation: fence 3s linear 0 infinite;
animation: fence 3s linear 0 infinite;
}
[/css]
Finalmente, añada las reglas fotogramas clave para el elemento de nubes.
[css]
@-webkit-keyframes clouds{
from{left: -15px;}
to{left: -190px;}
}
@-moz-keyframes clouds{
from{left: -15px;}
to{left: -190px;}
}
@keyframes clouds{
from{left: -15px;}
to{left: -190px;}
}
[/css]
Agregue el código CSS de abajo para el código anterior de las nubes:
[css]
#clouds {
position: absolute;
left: 0;
top: 55px;
-webkit-animation: clouds 3s linear 0 infinite;
-moz-animation: clouds 3s linear 0 infinite;
-ms-animation: clouds 3s linear 0 infinite;
-o-animation: clouds 3s linear 0 infinite;
animation: clouds 3s linear 0 infinite;
}
[/css]
Finalmente
¡Felicitaciones! Acabas de crear una excelente animación sin usar Flash ó algún plugin de JavaScript.
Aprender animación CSS3 tiene muchas de estas ventajas. Añade efectos más sorprendentes en su sitio web que está delante sólo se puede hacer uso de JavaScript. Tienes algún consejo practico, mejora en el desarrollo en base de tu experiencia personal? Compártela en un comentario ;)