Cómo hacer que el texto parpadee en HTML

PDF download Descargar el PDF
PDF download Descargar el PDF

El texto parpadeante nunca ha sido parte de las funciones estándar del HTML y no hay una aproximación que funcione para cada navegador. La opción más próxima que solo usa HTML es la etiqueta marquee (o marquesina), pero incluso esta no funciona en Google Chrome. JavaScript es un método más fiable y puedes copiar y pegar el código directamente en el documento HTML.

Método 1
Método 1 de 2:

Usar la etiqueta marquee

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/80\/Make-Text-Blink-in-HTML-Step-1.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/80\/Make-Text-Blink-in-HTML-Step-1.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    La etiqueta marquee se ha quedado obsoleta y se anima encarecidamente a los desarrolladores que la eviten. Los distintos navegadores la mostrarán de forma diferente, y las futuras actualizaciones quizá eviten que el texto parpadee en absoluto. [1] [2] Aprende a usar JavaScript en su lugar en caso de que vayas a crear una página web profesional.
    • Google Chrome no soporta el atributo "scrollamount", que es sobre el que se apoya este método. [3] En este navegador el texto atravesará la página en vez de parpadear.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/60\/Make-Text-Blink-in-HTML-Step-2-Version-3.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-2-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/60\/Make-Text-Blink-in-HTML-Step-2-Version-3.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Abre el documento HTML en un editor de texto simple. Introduce <marquee> delante del texto que quieras que parpadee. Introduce </marquee> después del texto.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7d\/Make-Text-Blink-in-HTML-Step-3-Version-3.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7d\/Make-Text-Blink-in-HTML-Step-3-Version-3.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Cambia la etiqueta de apertura a <marquee width="300" >. Esto no cambiará el tamaño de la fuente. Hay dos razones por las que es posible que necesites cambiar este número por otro diferente:
    • En caso de que el texto no encaje, se moverá en vez de parpadear. Aumenta el tamaño para evitar que pase.
    • En Chrome, el texto se moverá a lo largo de una distancia determinada por el tamaño.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/91\/Make-Text-Blink-in-HTML-Step-4-Version-3.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-4-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/91\/Make-Text-Blink-in-HTML-Step-4-Version-3.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Dentro de la misma etiqueta, escribe scrollamount="300" (o el mismo número que tenga de tamaño). Por defecto, los textos marquee se mueven a lo largo de la página. Al configurar el scrollamount con el mismo número que el tamaño, el texto se "mueve" en la misma posición que se encuentra. Esto provoca el efecto de parpadeo.
    • El texto tendrá una apariencia similar a la siguiente:
      <marquee width="300" scrollamount="300">Texto parpadeante aquí</marquee>.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/eb\/Make-Text-Blink-in-HTML-Step-5-Version-3.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-5-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/eb\/Make-Text-Blink-in-HTML-Step-5-Version-3.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-5-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Abre al archivo HTML en un navegador web para ver el efecto. En caso de que el texto parpadee demasiado o muy despacio, cambia la velocidad con el atributo scrolldelay="500" . El valor establecido por defecto es 85. [4] Usa un número más elevado para que parpadee más despacio o uno más bajo para que parpadee más rápido.
    • Ahora tendrás:
      <marquee width="300" scrollamount="300" scrolldelay="500">Texto parpadeante aquí.</marquee>
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/97\/Make-Text-Blink-in-HTML-Step-6-Version-3.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-6-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/97\/Make-Text-Blink-in-HTML-Step-6-Version-3.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-6-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Muchos usuarios encuentran molesto el parpadeo en el texto. Para parar la animación una vez haya captado la atención del lector, introduce loop="7" . El texto parpadeará siete veces y desaparecerá (es posible usar cualquier número además del siete).
    • El código completo es:
      <marquee width="300" scrollamount="300" scrolldelay="500" loop="7">Texto parpadeante aquí.</marquee>
    Anuncio
Método 2
Método 2 de 2:

Usar JavaScript

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e2\/Make-Text-Blink-in-HTML-Step-7-Version-2.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-7-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e2\/Make-Text-Blink-in-HTML-Step-7-Version-2.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Entre las etiquetas <head> y </head> del documento HTML, inserta el siguiente código JavaScript: [5]
    • function blinktext() {
        var f = document.getElementById('announcement');
        setInterval(function() {
          f.style.visibility = (f.style.visibility == 'hidden' ? '' : 'hidden');
        }, 1000);
      }
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/40\/Make-Text-Blink-in-HTML-Step-8-Version-2.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-8-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/40\/Make-Text-Blink-in-HTML-Step-8-Version-2.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-8-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    El código escrito arriba define una función que ha llamado "blinktext". Para poder usar esta función en tu HTML, cambia la etiqueta <body> a <body onload="blinktext();">.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0f\/Make-Text-Blink-in-HTML-Step-9-Version-2.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-9-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0f\/Make-Text-Blink-in-HTML-Step-9-Version-2.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-9-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    El script solo afecta a elementos identificados como "announcement". Coloca el texto parpadeante dentro de cualquier elemento y dale esa identidad. Por ejemplo, introduce <p id="announcement">Texto parpadeante aquí.</p> o <div id="announcement">Texto parpadeante aquí.</div>.
    • Podrás cambiar este nombre por lo que quieras. Simplemente asegúrate de usar la misma palabra en el script y el elemento "id".
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/99\/Make-Text-Blink-in-HTML-Step-10-Version-2.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-10-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/99\/Make-Text-Blink-in-HTML-Step-10-Version-2.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-10-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    El número "1000" en el script establece el espacio de tiempo entre parpadeos. Está en microsegundos, por lo que el valor 1000 hace que el texto parpadee una vez por segundo. [6] Cámbialo por un número menor para que parpadee más veces o por uno mayor para ralentizarlo.
    • El espacio de tiempo real no encajará perfectamente con este valor. Tiende a ser ligeramente más corto, pero es posible que necesite más tiempo en caso de que el navegador esté ocupado con otros procesos.
    Anuncio

Consejos

  • Puedes ajustar la apariencia del texto marquee con el atributo "style". Trata de añadir style="border:solid".
  • Es posible incluir un atributo de altura dentro de la etiqueta marquee además de uno de anchura, pero muchos navegadores lo ignorarán. [7] Quizá notes alguna diferencia en caso de que hayas añadido un borde a la marquee.
  • También puedes usar animaciones CSS para que parpadee el texto. Esto es bastante más complicado y no está recomendado para los principiantes de CSS. Ten en cuenta que necesitarás un documento CSS enlazado (texto en inglés) porque Firefox no soporta las animaciones con CSS interno. [8]
Anuncio

Advertencias

  • No uses la etiqueta <blink> o el estilo de decoración de texto CSS porque pocos navegadores modernos lo soportan. [9] [10]
Anuncio

wikiHows relacionados

4 formas de agregar un enlace a una imagen
Cómo
hacer una página web en HTML
Cómo
establecer el color de fondo en HTML
Cómo
insertar espacios en HTML
Cómo
ejecutar un archivo HTML en Visual Studio Code
Cómo
cambiar el color de botón en HTML
Cómo
crear una calculadora usando HTML
Cómo crear una línea horizontal en HTML
Cómo
editar archivos HTML
Cómo
centrar una imagen en HTML
Cómo
insertar imágenes con HTML
Cómo
crear un enlace de correo electrónico en HTML
Cómo
hackear una página web con HTML
Cómo
fijar una imagen de fondo en HTML
Anuncio

Referencias

  1. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
  2. ↑ https://www.sitepoint.com/web-foundations/marquee-html-element/
  3. ↑ http://tutorial.techaltum.com/marquee.html
  4. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
  5. ↑ http://stackoverflow.com/questions/8360130/how-to-make-a-text-flash-in-html-javascript
  6. ↑ http://javascript.info/tutorial/settimeout-setinterval
  7. ↑ https://www.sitepoint.com/web-foundations/marquee-html-element/
  8. ↑ http://caniuse.com/#feat=css-animation
  9. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink
  1. ↑ http://caniuse.com/#feat=text-decoration

Acerca de este wikiHow

En otros idiomas
Esta página ha recibido 42 769 visitas.

¿Te ayudó este artículo?

Anuncio