Máscara y textos entrando en forma giratoria

Máscara y textos entrando en forma giratoria
  • Eborio Linárez
  • November 19, 2012
  • 0

Nuevamente iniciamos con el HTML creado en el post HTML y CSS básicos para las transiciones para conseguir el efecto deseado sobre los elementos que se colocaran sobre la imagen de forma giratoria. La máscara entrará girando, luego el enlace desde abajo seguido del párrafo que también aparece girando y finalmente desde arriba aparece el título.

A continuación podemos ver el ejemplo en vivo.

See the Pen Máscara y textos entrando en forma giratoria by Eborio Linárez (@eborio) on CodePen.

Una vez tengamos el HTML pasamos a crear ciertas reglas CSS para darle la posición inicial a los elementos antes mencionados.

.view img {
    transition: all 0.2s ease-in;
}
.view .mask {
    opacity: 0;
    background-color: hsla(0, 0%, 0%, 0.6);
    transition: all 0.2s 0.4s ease-in-out;
    transform: translate(460px, -100px) rotate(180deg);
}
.view h2 {
    transform: translateY(-100px);
    transition: all 0.2s ease-in-out;
}
.view p { 
    transform: translateX(300px) rotate(90deg);
    transition: all 0.2s ease-in-out;
}
.view a.info {
    transform: translateY(-200px);
    transition: all 0.2s 0.1s ease-in-out;
}

Como ya hemos hecho en los ejemplos anteriores se le agrega una transición a cada uno de los elementos.

Luego, la máscara .mask se mueve 460px a la derecha y 100px hacia arriba, además se gira 180 grados a la derecha para dar el efecto giratorio al momento que sea posicionada sobre la imagen.

El título y el enlace se mueven 100px y 200px respectivamente hacia arriba con translateY. Por otra parte el párrafo se mueve 300px a la derecha con translateX y se gira 90 grados a la derecha con la misma finalidad de hacerla girar al momento de entrar sobre la imagen.

Ya creados estos estilos CSS procedemos a definir las reglas que aplicaran los efectos sobre los elementos al hacer hover sobre la imagen.

.view:hover .mask { 
    opacity: 1;
    transform: translate(0px, 0px);
    transition-delay: 0s;
}
.view:hover h2 { 
    transform: translateY(0px); 
    transition-delay: 0.5s;
}
.view:hover p {
    transform: translateX(0px);
    transition-delay: 0.4s;
}
.view:hover a.info {
    transform: translateY(0px);
    transition-delay: 0.3s;
}

La máscara se mueve a la posición 0px tanto en el eje X como en el Y, con esto se consigue que se posicione justo sobre la imagen. A su vez se quita la rotación consiguiendo con esto que gire antes de posicionarse sobre la imagen.

También podría definirse la regla de esta forma con lo cual conseguiríamos el mismo efecto:

transform: translate(0px, 0px) rotate(0deg);

El párrafo también gira hasta posicionarse sobre el centro de la imagen al quitarle la rotación con un retraso de medio segundo (0.5s) gracias a la propiedad transition-delay.

Finalmente el título y el enlace se mueven hacia sus respectivas posiciones también con unos ligeros retrasos en las animaciones. Y de esta manera llegamos al final del post. Espero lo compartas en las redes sociales y le saques provecho. Nos vemos en el siguiente ejemplo.

Comparte en las redes sociales

Comentarios

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

Deja un comentario