Como hacer efectos de movimiento desfasado con CSS3

De acuerdo a una plantilla que vi recientemente en Joomla me agradó un efecto de tile que tenía implementado que tienes una imagen y cuando el cursor pasa sobre esa imagen se mueve y aparece texto desfasado, algo muy bonito diría yo. El truco original la verdad no lo quiero copiar pero me gustó la forma del desfase de la información, es decir, el texto y el botón que aparecen no llegan al mismo tiempo, sino que uno de los dos llega primero, y en este tutorial vamos a ver cómo implementarlo.

En este tutorial vamos a ver como hacer efectos de movimiento desfasado con CSS3 usando tiles, y verán que el truco realmente radica en el tiempo que tarda un elemento en llegar a su posición original, pero si quieren verse más profesionales podrían también desfasar la ubicación inicial para que al final también sea factor el que no lleguen al mismo tiempo.

Demo del tutorial

HTML

Si separamos por capas todos nuestros elementos podremos manipularlos mucho más fácil. Nótese que no insertamos imágenes, todo es por medio de CSS.

CSS

Lo primero es configurar el tile, con tamaños específicos, que en este caso son 200 pixeles, también es importante ocultar el overflow para que nada salga del contenedor y tenemos que agregarle una transición. Lo que hice fue que como son tres elementos los desfaso cada uno por 0.2 segundos cada uno, de tal forma que en un principio ninguno llegue a su destino al mismo tiempo. Ahora, las imágenes van como fondos y deben de tener el tamaño exacto, de lo contrario no se verán tan bien el efecto. Cuando implementemos un hover moveremos todos los elementos.

Ahora, para nuestros elementos realmente lo más importante es añadirles un ancho específico, porque de lo contrario cuando lo movamos se verá como se van acomodando los textos,como si los estuviéramos aplastando, pero con un ancho fijo ese efecto desaparece. Ahora, para cada elemento tenemos que configurarle diferente tiempo de transición, pero si se fijan también lo que hice fue moverlos a diferentes márgenes, para que no se situaran a la misma altura, por así decirlo.

Por último, les coloco todos los posibles movimientos para la imagen de fondo jugando con su posición, y el último estilo es para regresar la información a su lugar original, fácil y muy rápido diría yo que es en general todo el efecto.

¿Te gustó el tutorial?