Imagen desapareciendo en espiral hacia el fondo

Imagen desapareciendo en espiral hacia el fondo
  • Eborio Linárez
  • November 20, 2012
  • 0

El ejemplo consiste en hacer que la imagen desaparezca en espiral hacia el fondo y una vez ésta haya desaparecido el resto de los elementos aparecerán desde la parte superior del contenedor. Además se coloca una máscara de color para que las letras sean más legibles.

Utilizaremos el mismo HTML definido en el post HTML y CSS básicos para las transiciones.

Ahora veamos como quedará el ejemplo una vez finalizado.

See the Pen Imagen desapareciendo en espiral hacia el fondo by Eborio Linárez (@eborio) on CodePen.

Una vez visto como quedará el ejemplo procedemos a crear las reglas CSS iniciales.

.view img {
    transition: all 0.5s ease-out;
}
.view .mask { 
    background-color: hsla(13, 37%, 22%, 0.5);
    opacity: 0;
    transition: all 0.3s ease-out;
}
.view h2, 
.view p, 
.view a.info {
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out;
}

Asignamos las respectivas transiciones a los elementos. Aquí debes prestar especial atención a la transición de la imagen. Mientras menos milisegundos se configuren, más rápido desaparecerá.

El resto de las reglas son sencillas y ya las hemos trabajado en en ejemplos anteriores. En cuanto al título, párrafo y enlace se desplazan hacia arriba con translateY con un valor negativo, de esta forma, al usuario colocar el ratón sobre la imagen la desplazaremos hacia abajo y así obtendremos el efecto deseado.

Ahora configuramos el resto de reglas.

.view:hover img {
    transform: rotate(720deg) scale(0);
}
.view:hover .mask { 
    opacity: 1;  
    transform: translateY(0px);
    transition-delay: 0.4s;
}                                  
.view:hover h2 {
    transform: translateY(0px);
    transition-delay: 0.7s;
}
.view:hover p { 
    transform: translateY(0px);
    transition-delay: 0.6s;
}
.view:hover a.info { 
    transform: translateY(0px);
    transition-delay: 0.5s;
}

Principalmente se le aplica una rotación de 720 grados a la derecha a la imagen para hacerla girar 2 veces. Y gracias a la configuración de scale en 0 se consigue que vaya girando hacia el fondo hasta desaparecer.

Los elementos restantes se desplazan en el eje Y hasta sus posiciones originales. Cada uno presenta un retardo diferente para lograr que vayan apareciendo uno detrás del otro. Le diferencia es de solo 0.1 segundos, pero genera un efecto visual muy llamativo.

Espero te haya gustado hasta ahora el tutorial y sigas viendo el resto de los ejemplos. También te agradezco lo compartas en tus redes sociales. Nos vemos en el próximo.

Comparte en las redes sociales

Comentarios

Aún no hay comentarios. Sé el primero en comentar.

Deja un comentario