Anima tipografías y textos con efectos.

Una de las mayores evoluciones con CSS3 ha sido la capacidad de tomar el control sobre las transiciones y animaciones. Estos efectos animados son una herramienta imprescindible para cualquier desarrollador de front-end.

En este tutorial vamos a trabajar sobre el texto haciendo tres efectos diferentes que no dejarán al usuario indiferente cuando visita nuestro site.

En el primer efecto no utilizaremos un texto estándar desde html, lo haremos en su lugar creándolo dentro de un elemento SVG. La razón de esto es que SVG permite trabajar los trazos en el texto, algo que no es posible con el texto HTML normal.

El siguiente efecto de texto aprenderemos cómo hacer un rotador de texto sobre una frase, con esto conseguiremos cargar varias palabras dando diferentes conceptos a una frase gracias a un loop.

En el último efecto utilizaremos un clip de texto para recortar una imagen dentro de un botón de modo que la imagen se quede de background realizando un efecto de slide cuando pasas el ratón sobre el botón. Os muestro el final del trabajo o si lo preferís ver a full os pego el enlace https://siroppe.com/tutoriales/efectostexto/text.html.

Para poder seguir este tutorial debéis descargaros los ficheros que adjunto y seguir paso a paso el código.

DESCARGA DE ARCHIVOS

1. Configuración del proyecto

Crea un archivo html desde un editor de código, yo le he llamado text.html.
Añade etiquetas de estilo style en la sección de cabecera head y pega el siguiente código CSS. Esto importará la tipografía desde Google Fonts, no olvides de añadir los ajustes básicos que nos pide HTML para crear un documento HTML.

@import url(https://fonts.googleapis.com/
css?family=Monserrat:400,700);
html, body {
height: 100%;
font-weight: 800;
}
body {
background: #35483e;
background-image: url(img/bg.jpg);
background-size: cover;
font-family: Arial;
}

2. Escribir un gráfico SVG

Como ya sabes los gráficos SVG se escriben con etiquetas propias y no necesitan ninguna aplicación gráfica. Copia el siguiente código dentro del cuerpo (body) y esto creará un texto que mostraremos en el navegador, después lo animaremos con más CSS.

&ltsvg viewBox=”0 0 960 300″&gt
&ltsymbol id=”s-text”&gt
&lttext text-anchor=”middle” x=”50%”
y=”80%”&gtKinetic Design&lt/text&gt
&lt/symbol&gt

3. Crear lineas gráficas

El siguiente código hay que añadirlo antes de finalizar la etiqueta de cierre de SVG con esto creamos trazos con cinco colores diferentes, trabajando el texto que hemos insertado en el paso 2.

&ltg class=”g-ants”&gt
&ltuse xlink:href=”#s-text” class=”text-copy”&gt&lt/
use&gt
&ltuse xlink:href=”#s-text” class=”text-copy”&gt&lt/
use&gt
&ltuse xlink:href=”#s-text” class=”text-copy”&gt&lt/
use&gt
&ltuse xlink:href=”#s-text” class=”text-copy”&gt&lt/
use&gt
&ltuse xlink:href=”#s-text” class=”text-copy”&gt&lt/
use&gt
&lt/g&gt
&lt/svg&gt

4. Agregar CSS para SVG

Vuelve a la sección de CSS de la página y añadiremos una regla para el SVG . Esto mostrará el objeto como un bloque de manera que se puede centrar en la página con el margen automático. La fuente que añadiremos es Monserrate y un tamaño de texto grande, aunque como siempre digo esto va a gustos.

svg {
display: block;
font: 10.5em ‘Montserrat’;
width: 960px;
height: 300px;
margin: 0 auto;
}

5. Iniciamos la animación

Al añadir Keyframes (fotogramas) los trazos inmediatamante empiezan a animarse alrededor de todo el borde del texto. Ahora cada elemento gráfico recibe color y un ligero retraso en su movimiento para crear una rotación de los trazos alrededor del texto.

@keyframes stroke-offset {
100% { stroke-dashoffset: -35%;}
}
.text-copy:nth-child(1) {
stroke: #5c0404;
animation-delay: -1s;
}
.text-copy:nth-child(2) {
stroke: #d6801c;
animation-delay: -2s;
}

6. Acabando los trazos

Como en pasos anteriores, aquí el CSS está centrado en los objetos gráficos para dar diferentes colores y compensarlos en su animación. Esto ahora da un efecto de cinco colores diferentes dando vueltas alrededor del borde del texto.

.text-copy:nth-child(4) {
stroke: #ffff9e;
animation-delay: -4s;
}
.text-copy:nth-child(5) {
stroke: #55981b;
animation-delay: -5s;
}
@keyframes stroke-offset {
100% { stroke-dashoffset: -35%;}
}

7. Segundo efecto

Ahora iremos a la etiqueta body y añadiremos el div content (podéis copiar este código del archivo text.html que adjunto), de esta manera empezaremos a construir el segundo efecto que si lo recordáis es cómo añadir un rotador de texto dentro de una frase, un efecto excelente para mostrar una serie de habilidades por ejemplo.

8. Sección Static

El texto vamos a hacer que flote a la izquierda, donde la mitad del texto será estático , es decir, no se mueve , de ahí el nombre de la clase que le hemos puesto.
Una vez flote hacia la izquierda, tenemos que ocultar el overflow, y por otra parte la altura debemos configurarla para que se vea todo en la misma línea.

.static {
float: left;
overflow: hidden;
height: 40px;
}

9. Estilo del párrafo

La etiqueta de párrafo se centra en dar un color amarillo claro que se ha utilizado también en uno de los trazos alrededor del borde del texto, sólo para mantener coherencia con los colores . Una vez más hacemos que el texto flote a la izquierda de modo que la lista puede quedar en la misma linea.

p {
display: inline;
float: left;
margin: 0;
color:
#ffff9e;
}

10. Lista desordenada

La misión es que que el texto insertado dentro de la lista quede sentado junto al texto que hemos añadido en el parráfo. Los otros elementos de la lista quedarán por debajo del primero, pero debido a que el overflow se corta, no se mostrará hasta que no se añada la animación.

ul {
margin-top: 0;
padding-left: 130px;
text-align: left;
list-style: none;
animation: 6s linear 0s normal none infinite
change;
}

11. Tamaño de la altura

En el estilo de los elementos de la lista trabajamos un colo diferente para destacar, pero lo más importante es la altura ya que si no la configuramos bien se nos desmontaría y se verían los textos en diferentes partes de la pantalla.

12. Hacer que se mueva

La configuración final de esta parte, es hacer que se mueva para definir los keyframes. En el paso 11 llamamos a estos keyframes y añadiendo el siguiente código se iniciará inmediatamente el rotador de texto dejando un efecto de slide con movimiento de arriba hacia abajo para mostrar el texto con un loop infinito.

@keyframes change {
0% { margin-top: 0; }
15% { margin-top: 0; }
25% { margin-top: -40px; }
40% { margin-top: -40px; }
50% { margin-top: -80px; }
65% { margin-top: -80px; }
75% { margin-top: -40px; }
85% { margin-top: -40px; }
100% { margin-top: 0; } }

13. Llamado a la acción

Vamos a por la tercera animación. Será un botón con una imagen de background dando un efecto cuando pasa el ratón por encima, utilizaremos un nuevo comando CSS: clip text.
Añade a tu documento HTML el div wrapper que tienes en el archivo text.hml que adjunto.

14. Centrar la caja

La primera parte simplemente centraremos la caja. Hasta que acabemos de configurar la clase quedará pequeña, pero la idea es que tengo sobre unos 400px de ancho, el margen lo pondremos automático para que quede centrado en la pantalla.

.wrapper{
clear:both;
width: 400px;
margin: 0.5em auto;}

15. Inicio del CLIP

La siguiente regla trabajará sobre del texto, dando valores como margin, padding, tamaño de 3em. El texto lo centraremos con el bloque para que quede bien en la pantalla.

.clip-text{
margin-top: 4em;
padding: 0.3em;
font-size: 3em;
font-family: ‘Monserrat’;
text-align: center;
position: relative;
display: block;

16. Insertar la imagen

Ahora viene un paso importante, hay que configurar la imagen de fondo del botón añadiendo un efecto con una transición de unos 2 segundos.

background-image: url(img/text-bg.jpg);
background-position: bottom;
background-size: cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: 2s ease all;
}

17. Efecto Rollover

El código que vamos a añadir establecerá un efecto para el texto y la imagen de fondo .
La imagen la pondremos para que se fije en la parte superior del fondo del botón, así cuando un usuario pase el ratón sobre el botón conseguiremos el efecto deseado.

.clip-text:hover, .clip-text:hover::before {
background-position:top;
} .clip-text:before, .clip-text:after {
position: absolute;
content: ”;
}

18. Crear un borde

El siguiente código creará un borde alrededor del texto, esto se logra colocando la imagen detrás del texto, una vez hecho esto necesitamos que el texto sea transparente para destacar el efecto con la imagen, en el último paso explico como conseguirlo.

.clip-text:before {
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: inherit;
background-position: bottom;
background-size: cover;
transition: 2s ease all;
}

19. Clip la imagen

La parte final es colocar un fondo semitransparente. El resultado es que el texto y el borde sean transparentes para que se vea la imagen de fondo con el efecto de slide.

.clip-text:after {
position: absolute;
z-index: -1;
top: .125em;
right: .125em;
bottom: .125em;
left: .125em;
background-color: rgba(214, 128, 28, 0.9);
}