"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Curiosa animación de texto

Hoy quiero hablaros de una curiosa animación de texto que navegando por Internet me encontre hace poco, de hecho podeis verla funcionando en este link si quereis ver la página del autor.

La animación en la siguiente, y como vereis el código es muy sencillo y completamente modificable, para que lo adapteis para vuestros diseños si os convence.

Oscar

Se ve bastante bien, vamos a analizar de que se compone su código html es este:

Lo primero que podemos es destacar es que es la animación de un SVG, por lo que podemos asignarle el tamaño que queramos al tratarse de diseño vectorial siempre se verá bien.

Lo que ha hecho es crear un texto SVG, yo he puesto Oscar porque soy así de narcisista, vosotros podeis poner cualquier otra cosa.
Y después duplica 5 veces ese mismo texto y a esos duplicados les asigna la clase ‘text’

Veamos ahora como lo ha animado…

Aunque este código ya es más extenso podemos ver que esta animación que a priori parece compleja la ha conseguido usando animaciones de CSS3, y la animación es exactamente la misma para todas las capas solo cambiando los colores de cada uno y el momento en el que comienza.

Si esos selectores ‘nth-child’ no os suenan de nada, es un buen momento para que echeis un vistazo a este post y a este otro, donde se explica para que sirven estos y otros selectores…

Os dejo el código por si os resulta util y tambien para sacar ideas pues combinando SVG con CSS3 como hemos visto se pueden hacer cosas bastante vistosas sin demasiado esfuerzo.

 

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)