Curiosa animación de texto

1 minutos de lectura

Fecha: 2/10/2017

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.

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…

.text {
  fill: none;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-dasharray: 70 330;
  stroke-dashoffset: 0;
  -webkit-animation: stroke 6s infinite linear;
  animation: stroke 6s infinite linear;
}
.text:nth-child(5n + 1) {
  stroke: #F2385A;
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}
.text:nth-child(5n + 2) {
  stroke: #F5A503;
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
}
.text:nth-child(5n + 3) {
  stroke: #E9F1DF;
  -webkit-animation-delay: -3.6s;
  animation-delay: -3.6s;
}
.text:nth-child(5n + 4) {
  stroke: #56D9CD;
  -webkit-animation-delay: -4.8s;
  animation-delay: -4.8s;
}
.text:nth-child(5n + 5) {
  stroke: #3AA1BF;
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}
@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}
@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}
.bg-test-animation{
  position: relative;
  height: 400px;
  font-size: 8rem;
  text-transform: uppercase;
  background-color: #000;
}
svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

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.