Texto parpadeante con Javascript

En el diseño web, existen muchas maneras de resaltar un texto: negrita, cursiva, tamaño, etc. Otra manera de resaltar mucho un texto corto es hacer que sea texto parpadeante (blink en inglés). Se debe usar muy poco, pero el usuario se le irá ahí la vista inconscientemente.

Texto parpadeante con Javascript

Para formatear de esta manera el texto, se haría con la función BlinkIt que se muestra a continuación. En este ejemplo, el texto va cambiando de blanco (#ffffff) a rojo (red). Por lo tanto, para crear este efecto, el fondo también deberá ser blanco.

Para llamar a esta función, se utiliza window.setInterval, que lo que hace es llamar automáticamente a la función cada 500 milisegundos, que será el tiempo que pasa para cambiar de blanco a rojo y viceversa.

<script type="text/javascript">
  window.setInterval (BlinkIt, 500);
  var color = "red";

  function BlinkIt () {
    var blink = document.getElementById ("blink");
    color = (color == "#ffffff")? "red" : "#ffffff";
    blink.style.color = color;
    blink.style.fontSize='36px';
  }
</script>

Por último, faltaría definir qué fragmento debería parpadear. Para ello, hay que definir la clase blink a la entidad, en este caso un div.

<div id="blink">Hola!</div>

Texto parpadeante con CSS

Otra alternativa es utilizar CSS. Para lograr un parpadeo CSS no es necesario conocer el color de fondo para simular el efecto, ya que directamente se cambia la opacidad del elemento. Otra cosa a tener en cuenta es que la duración se puede especificar en segundos, añadiendo una s al final. Este CSS es compatible con la mayoría de exploradores.

.parpadea {
  animation-name: parpadeo;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo{
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes parpadeo {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@keyframes parpadeo {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

Para señalar qué elemento será el que aparezca y desaparezca, se debe indicar la clase «parpadea». Y por supuesto, el fichero CSS que contenga el fragmento anterior tiene que estar referenciado en el HTML.

<span class="parpadea text">Este texto parpadea</span>