Para empezar con la animación en CSS3 usaremos el efecto del encabezado de este Blog, si ponéis el ratón encima del logo de Universo Online, un cuervo pasará volando por delante (el aleteo es por que la imagen es un "gif").
Código CSS que debemos agregar en Diseño --> Edición HTML y pegar antes de: ]]></b:skin>.
#fondo {
position: relative;
height: 300px;/* Alto de la capa o de la caja de interacción del puntero */
width: 1200px;/* Ancho de la capa o de la caja de interacción del puntero */
background: #181818 url(Aquí la foto que queráis de fondo de la animación);
background-repeat:no-repeat;/* Esto es para que no repita la imagen de fondo; Si queréis usar el fondo de vuestro encabezado y hacerlo sobre él, borrad esta linea y la de encima */
}
div.cuervo {
position: absolute; /* Posición predefinida de la capa marcada por top left */
top: 66px; /* Posición de la imagen partiendo de la parte superior */
left: 6px; /* Posición de la imagen partiendo de la parte izquierda */
-webkit-transition: all 3s ease-in; /* Duración de 3s, acelerando al principio (ease-in) */
-moz-transition: all 3s ease-in; /* Compatibilidad con Firefox */
-o-transition: all 3s ease-in; /* Compatibilidad con Opera */
-ms-transition: all 3s ease-in; /* Compatibilidad con IE */
}
#fondo:hover div.cuervo {
-webkit-transform: translate(750px,-110px); /* Posición final de la imagen (X,Y) */
-moz-transform: translate(750px,-110px); /* Compatibilidad con Firefox */
-o-transform: translate(750px,-110px); /* Compatibilidad con Opera */
-ms-transform: translate(750px,-110px); /* Compatibilidad con IE */
}
position: relative;
height: 300px;/* Alto de la capa o de la caja de interacción del puntero */
width: 1200px;/* Ancho de la capa o de la caja de interacción del puntero */
background: #181818 url(Aquí la foto que queráis de fondo de la animación);
background-repeat:no-repeat;/* Esto es para que no repita la imagen de fondo; Si queréis usar el fondo de vuestro encabezado y hacerlo sobre él, borrad esta linea y la de encima */
}
div.cuervo {
position: absolute; /* Posición predefinida de la capa marcada por top left */
top: 66px; /* Posición de la imagen partiendo de la parte superior */
left: 6px; /* Posición de la imagen partiendo de la parte izquierda */
-webkit-transition: all 3s ease-in; /* Duración de 3s, acelerando al principio (ease-in) */
-moz-transition: all 3s ease-in; /* Compatibilidad con Firefox */
-o-transition: all 3s ease-in; /* Compatibilidad con Opera */
-ms-transition: all 3s ease-in; /* Compatibilidad con IE */
}
#fondo:hover div.cuervo {
-webkit-transform: translate(750px,-110px); /* Posición final de la imagen (X,Y) */
-moz-transform: translate(750px,-110px); /* Compatibilidad con Firefox */
-o-transform: translate(750px,-110px); /* Compatibilidad con Opera */
-ms-transform: translate(750px,-110px); /* Compatibilidad con IE */
}
- Este sería el div que tenéis que pegar en Diseño -> Edición HTML dentro del <body></body>, depende bastante de la plantilla pero debe ir dentro de algo como wrap, head, etc... Básicamente donde queráis poner la imagen.
<div id="fondo">
<div class="cuervo">
<img alt="Animación" height="43" src="URL Imagen de la animación" width="54" />
</div></div>
<div class="cuervo">
<img alt="Animación" height="43" src="URL Imagen de la animación" width="54" />
</div></div>
En este caso es un efecto de rotación utilizando un balón, si ponéis el puntero sobre la imagen veréis como gira. Este sería el Código CSS necesario para el efecto, agregar en Diseño -> Edición HTML y pegar antes de: ]]></b:skin>.
.rotate {
-webkit-transition-duration: 4s; /* Duración de la rotación */
-moz-transition-duration: 4s; /* Compatibilidad con Firefox */
-o-transition-duration: 4s; /* Compatibilidad con Opera */
-ms-transition-duration: 4s; /* Compatibilidad con IE */
overflow:hidden; /* Todo lo que salga del tamaño de la capa no se verá, se oculta */
}
.rotate:hover {
-webkit-transform:rotate(720deg); /* Grados de rotación 360=1vuelta 720=2vueltas */
-moz-transform:rotate(720deg); /* Compatibilidad con Firefox */
-o-transform:rotate(720deg); /* Compatibilidad con Opera */
-ms-transform:rotate(720deg); /* Compatibilidad con IE */
}
-webkit-transition-duration: 4s; /* Duración de la rotación */
-moz-transition-duration: 4s; /* Compatibilidad con Firefox */
-o-transition-duration: 4s; /* Compatibilidad con Opera */
-ms-transition-duration: 4s; /* Compatibilidad con IE */
overflow:hidden; /* Todo lo que salga del tamaño de la capa no se verá, se oculta */
}
.rotate:hover {
-webkit-transform:rotate(720deg); /* Grados de rotación 360=1vuelta 720=2vueltas */
-moz-transform:rotate(720deg); /* Compatibilidad con Firefox */
-o-transform:rotate(720deg); /* Compatibilidad con Opera */
-ms-transform:rotate(720deg); /* Compatibilidad con IE */
}
Está es una forma simple de insertar una imagen pero podéis usar cualquiera simplemente habría que agregarle el class="rotate" para que la imagen tenga el efecto. Agregar en Diseño -> Edición HTML
<img class="rotate" src=" URL de la imagen" alt="Rotación"/>
P.D: Estas animaciones sirven para: webs en html, con wordpress, php, etc.. Basicamente cualquiera que utilice CSS para estructurar la página.
P.D2: Si juntáis los 2 efectos es posible que la pelota de vueltas y a la vez salga disparada :DDocumentación:
CSS: Animation Using CSS Transforms
Mozilla Developer Network
CSS 2D Transforms Module Level 3 continuar .
