Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
En el tutorial de hoy, aprenderemos dos técnicas diferentes para crear un efecto de texto con "relleno barrido" al pasar el ratón sobre él. Incluso iremos un paso más allá y nos proporcionaremos flexibilidad para seleccionar la dirección de la animación.
Esto es lo que vamos a crear:
Como puedes ver, cuando pasas el cursor sobre el texto, se aplica un relleno en este, que se desplaza de un lado al otro. Los enlaces del menú superior en principio no parecen tener relleno, sino que el texto está perfilado por un trazo que luego parece llenarse al pasar el ratón.
Usando transiciones CSS puedes alterar la velocidad y la aceleración del efecto de barrido para adaptarlo mejor a tu proyecto.
Técnica #1
Veamos paso a paso la primera técnica, en la que usamos un poco de código extra para crear el elemento "relleno barrido" para cada vínculo.
Especifica el código de marcado para la página
Comenzaremos con una sencilla lista desordenada que representa un menú de página típico. Cada vínculo del menú incluirá un nodo de texto y un elemento span. El texto dentro del span coincidirá con el texto del elemento de lista. Le daremos a este elemento aria-hidden="true" porque queremos ocultarlo de cualquier dispositivo de accesibilidad. En realidad, la única razón de su existencia es ayudarnos a construir el efecto "hover" deseado.
Como ventaja, nos daremos la posibilidad de establecer la dirección del efecto de desplazamiento animado. Podemos pasar el atributo personalizado data-animation a los elementos de lista que determinarán la posición inicial de su animación. Los posibles valores de atributo son to-left, to-bottom y to-top. De forma predeterminada, el efecto aparecerá de izquierda a derecha.
Este es el código de marcado necesario:
1 |
<ul class="menu"> |
2 |
<li>
|
3 |
<a href="#0"> |
4 |
About Us |
5 |
<span class="outer" aria-hidden="true"> |
6 |
<span class="inner">About Us</span> |
7 |
</span>
|
8 |
</a>
|
9 |
</li>
|
10 |
<li data-animation="to-left"> |
11 |
<a href="#0"> |
12 |
Projects |
13 |
<span class="outer" aria-hidden="true"> |
14 |
<span class="inner">Projects</span> |
15 |
</span>
|
16 |
</a>
|
17 |
</li>
|
18 |
<li data-animation="to-bottom"> |
19 |
<a href="#0"> |
20 |
Clients |
21 |
<span class="outer" aria-hidden="true"> |
22 |
<span class="inner">Clients</span> |
23 |
</span>
|
24 |
</a>
|
25 |
</li>
|
26 |
<li data-animation="to-top"> |
27 |
<a href="#0"> |
28 |
Contact |
29 |
<span class="outer" aria-hidden="true"> |
30 |
<span class="inner">Contact</span> |
31 |
</span>
|
32 |
</a>
|
33 |
</li>
|
34 |
</ul>
|
Especifica los estilos básicos
Vamos a continuar con los estilos CSS.
Añadiremos un trazo a los vínculos del menú mediante la propiedad nativa text-stroke. Hoy en día, esta propiedad tiene un gran soporte por parte de los navegadores. Sin embargo, en caso de que necesites dar soporte también para Internet Explorer o Microsoft Edge 12-14, puedes usar la propiedad text-shadow para simular un trazo.
Si no te gusta el trazo alrededor del texto, he creado un diseño alternativo que añadirá un color de fondo al menú bajo sus enlaces. Para habilitarlo, simplemente adjunta la clase has-bg al menú.
Los estilos asociados son los siguientes:
1 |
/*CUSTOM VARIABLES HERE*/
|
2 |
|
3 |
.has-bg { |
4 |
background: var(--stroke-color); |
5 |
padding: 40px 0 60px 0; |
6 |
margin-top: 20px; |
7 |
}
|
8 |
|
9 |
.menu a { |
10 |
position: relative; |
11 |
display: inline-block; |
12 |
font-weight: bold; |
13 |
font-size: 60px; |
14 |
line-height: 1.4; |
15 |
overflow: hidden; |
16 |
color: var(--white); |
17 |
-webkit-text-stroke: 1px var(--stroke-color); |
18 |
/*text-shadow: -1px -1px 0 var(--stroke-color), 1px -1px 0 var(--stroke-color), -1px 1px 0 var(--stroke-color), 1px 1px 0 var(--stroke-color);*/
|
19 |
}
|
20 |
|
21 |
.has-bg a { |
22 |
color: var(--secondary-color); |
23 |
text-shadow: none; |
24 |
}
|
Y ahora para los estilos de animación
El span exterior dentro de los enlaces estará posicionado de forma absoluta. Además le daremos un color de fondo cian oscuro y estableceremos su propiedad overflow a hidden. De forma predeterminada, lo moveremos al 100% de su posición original hacia la izquierda y su span interno al 100% de su posición original hacia la derecha. Después, cada vez que pasemos el cursor sobre un vínculo, eliminaremos sus valores de transformación iniciales. Ese simple truco producirá un efecto de barrido del relleno del texto que irá desde la izquierda a la derecha.
Estos son los estilos asociados:
1 |
/*CUSTOM VARIABLES HERE*/
|
2 |
|
3 |
.menu .outer { |
4 |
position: absolute; |
5 |
top: 0; |
6 |
left: 0; |
7 |
overflow: hidden; |
8 |
color: var(--fill-color); |
9 |
transform: translateX(-100%); |
10 |
}
|
11 |
|
12 |
.menu .inner { |
13 |
display: inline-block; |
14 |
transform: translateX(100%); |
15 |
}
|
16 |
|
17 |
.menu a .outer, |
18 |
.menu a .inner { |
19 |
transition: transform 0.15s cubic-bezier(0.29, 0.73, 0.74, 1.02); |
20 |
}
|
21 |
|
22 |
.menu a:hover .outer, |
23 |
.menu a:hover .inner { |
24 |
transform: none; |
25 |
}
|
Especificar la dirección
Por último, como se describe en la sección del marcado, podemos personalizar la dirección de nuestro efecto de desplazamiento pasando el atributo data-animation a un elemento de menú. Dependiendo de la dirección del efecto (horizontal o vertical), tenemos que definir valores de transformación invertidos para los elementos .outer e .inner:
1 |
[data-animation="to-left"] .outer { |
2 |
transform: translateX(100%); |
3 |
}
|
4 |
|
5 |
[data-animation="to-left"] .inner { |
6 |
transform: translateX(-100%); |
7 |
}
|
8 |
|
9 |
[data-animation="to-top"] .outer { |
10 |
transform: translateY(100%); |
11 |
}
|
12 |
|
13 |
[data-animation="to-top"] .inner { |
14 |
transform: translateY(-100%); |
15 |
}
|
16 |
|
17 |
[data-animation="to-bottom"] .outer { |
18 |
transform: translateY(-100%); |
19 |
}
|
20 |
|
21 |
[data-animation="to-bottom"] .inner { |
22 |
transform: translateY(100%); |
23 |
}
|
La demostración resultante:
Técnica #2
Ahora vamos a examinar la segunda técnica, en la que mantenemos nuestro código de marcado más limpio mediante el uso de pseudo-elementos que proporcionan el "relleno barrido".
Especifica el código de marcado de página
Empezaremos de nuevo con una sencilla lista desordenada. Cada vínculo de menú incluirá el atributo personalizado data-text. El valor de este atributo coincidirá con el texto del vínculo correspondiente.
De forma similar al ejemplo anterior, podremos personalizar la posición inicial de una animación a través del atributo data-animation. Los valores de atributo posibles son to-left, to-bottom, and to-top. De forma predeterminada, el efecto aparecerá de izquierda a derecha.
Este es el código de marcado necesario para empezar:
1 |
<ul class="menu"> |
2 |
<li>
|
3 |
<a data-text="About Us" href="#0">About Us</a> |
4 |
</li>
|
5 |
<li data-animation="to-left"> |
6 |
<a data-text="Projects" href="#0">Projects</a> |
7 |
</li>
|
8 |
<li data-animation="to-bottom"> |
9 |
<a data-text="Clients" href="#0">Clients</a> |
10 |
</li>
|
11 |
<li data-animation="to-top"> |
12 |
<a data-text="Contact" href="#0">Contact</a> |
13 |
</li>
|
14 |
</ul>
|
Especifica los estilos de animación
Los estilos CSS básicos para esto son los mismos que en la técnica anterior. Para la animación definiremos el pseudo-elemento ::before de cada enlace de menú y lo posicionaremos de forma absoluta. Su contenido provendrá del valor del atributo data-text del vínculo primario. Inicialmente, su ancho será 0, pero luego, cuando pasemos el cursor sobre el enlace de destino, se establecerá en 100%. Además, le daremos white-space: nowrap, de manera que el texto nunca salte a una nueva línea.
Los estilos relacionados para esto son los siguientes:
1 |
/*CUSTOM VARIABLES HERE*/
|
2 |
|
3 |
.menu a::before { |
4 |
content: attr(data-text); |
5 |
position: absolute; |
6 |
top: 0; |
7 |
left: 0; |
8 |
width: 0; |
9 |
overflow: hidden; |
10 |
color: var(--fill-color); |
11 |
white-space: nowrap; |
12 |
transition: all 0.15s cubic-bezier(0.29, 0.73, 0.74, 1.02); |
13 |
}
|
14 |
|
15 |
.menu a:hover::before { |
16 |
width: 100%; |
17 |
}
|
Añadir los estilos de efecto de barrido
A continuación, añadiremos los estilos responsables de personalizar la dirección de nuestro efecto de barrido. Así que primero, tenemos que comprobar la dirección deseada para la animación (horizontal o vertical), luego animar en consecuencia la propiedad width o height del pseudo-elemento de destino. Además, en caso de que estemos interesados en la animación "hacia la izquierda" o "hacia arriba", debemos intercambiar los valores de color del texto del pseudoelemento de destino y su enlace primario.
Los estilos que controlan estas animaciones son los siguientes:
1 |
/*CUSTOM VARIABLES HERE*/
|
2 |
|
3 |
.menu [data-animation="to-left"] a, |
4 |
.menu [data-animation="to-top"] a { |
5 |
color: var(--fill-color); |
6 |
}
|
7 |
|
8 |
.menu [data-animation="to-left"] a::before, |
9 |
.menu [data-animation="to-top"] a::before { |
10 |
color: var(--white); |
11 |
}
|
12 |
|
13 |
.menu [data-animation] a::before { |
14 |
width: 100%; |
15 |
}
|
16 |
|
17 |
.menu [data-animation="to-left"] a:hover::before { |
18 |
width: 0; |
19 |
}
|
20 |
|
21 |
.menu [data-animation="to-top"] a::before { |
22 |
height: 100%; |
23 |
}
|
24 |
|
25 |
.menu [data-animation="to-top"] a:hover::before { |
26 |
height: 0; |
27 |
}
|
28 |
|
29 |
.menu [data-animation="to-bottom"] a::before { |
30 |
height: 0; |
31 |
}
|
32 |
|
33 |
.menu [data-animation="to-bottom"] a:hover::before { |
34 |
height: 100%; |
35 |
}
|
La demostración resultante:
Conclusión
¡Y ya hemos terminado! En este ejercicio discutimos dos formas distintas de crear un efecto "hover" con relleno de barrido. Esperemos que estos te hayan inspirado a construir algo similar, o al menos, incorporar el efecto en un proyecto existente.
Como siempre, ¡gracias por leer!
Aprende CSS con estos proyectos
Pocas cosas son tan divertidas en el mundo del la programación de front-end como jugar con CSS; ¡echa un vistazo a estos proyectos CSS en Tuts+ y aprender mientras juegas!
By
