How to Make Text Blink in HTML: 10 Steps (with Pictures)

Table of contents:

How to Make Text Blink in HTML: 10 Steps (with Pictures)
How to Make Text Blink in HTML: 10 Steps (with Pictures)
Anonim

Blinking text has never been part of HTML's standard features and there is no approach that works for every browser. The most similar option that only uses html is the marquee tag, but even it doesn't work with Google Chrome. Javascript is a more reliable method and you can cut and paste the code directly into your HTML document.

Steps

Method 1 of 2: Using the marquee tag

Make Text Blink into HTML Step 1

Step 1. Only use the marquee tag for personal projects

The marquee tag is outdated and developers strongly recommend avoiding it. Different browsers will display it differently and future updates may prevent the text from blinking altogether. Instead, learn the Javascript approach if you're going to create a professional website.

Google Chrome does not support the 'scrollamount' attribute, which this method relies on. In that browser, your text scrolls across the page instead of blinking

Make Text Blink into HTML Step 2

Step 2. Insert the marquee tags around the flashing text

Open your HTML document in a simple word processor. Type for the text you want to flash. Type after the text.

As always, first set up your html page with,, and tags

Make Text Blink into HTML Step 3

Step 3. Set the text width

Change the opening tag to. This does not change your font size. There are two reasons why you may need to change this to a different number:

  • If your text doesn't fit, it will roll instead of blink. Increase the width to avoid this.
  • In Chrome, the text will roll over a distance determined by its width.
Make Text Blink into HTML Step 4

Step 4. Set the scrollamount to the same value as the width

Within the same tag you write scrollamount='300' (or the same number as the width). By default, the marquee text scrolls across the screen. By setting the scrollamount to the same number as the width, the text will 'scroll' in the same position it was in before. This gives a blinking effect.

  • Your text should now look something like this:

    Blinking text here..

Make Text Blink into HTML Step 5

Step 5. Change the scroll delay

Open the html file in a web browser to see the effect. If the text flashes too fast or too slow, change the speed with the attribute scrolldelay='500'. The default delay is set to 85. Use a higher number for a slower blink or a lower number for a faster blink.

  • You should now have:

    Blinking text here.

Make Text Blink into HTML Step 6

Step 6. Limit the number of flashes (optional)

Many web users find blinking text annoying. To stop the animation once you have the reader's attention, enter loop='7'. Now the text will blink seven times and then disappear. (You can use any number instead of seven.)

  • The completed code:

    Blinking text here.

Method 2 of 2: Using JavaScript

Make Text Blink into HTML Step 7

Step 1. Insert a blink script at the header of your html document

Between the and tags of your HTML document, insert the following JavaScript code:

  • function blinktext() {

    var f=document.getElementById('announcement');

    setInterval(function() {

    f.style.visibility=(f.style.visibility=='hidden' ?'': 'hidden');

    }, 1000);

    }

Make Text Blink into HTML Step 8

Step 2. Insert the command to load your script

The code above defined a function and called it 'blinktext'. To use this function in your html, change the tag to.

Make Text Blink into HTML Step 9

Step 3. Define your blinking text as an announcement

This script only affects elements with the id 'announcement'. Place your blinking text inside each element and give it that id. For example, type

Blinking text here.

or Blinking text here..

You can rename this to anything you want. Just make sure you use the same word in the script and the element id

Make Text Blink into HTML Step 10

Step 4. Customize the script

The number '1000' in the script sets the delay between blinks. This is in microseconds, so a value of 1000 will make the text blink once per second. Change this to a lower number to speed up the blinking or a higher number to slow it down.

The actual delay will probably not be quite equal to this value. It is usually a little shorter, but can take longer if your browser is busy with other requests

Tips

  • You can customize the look of the marquee text with the style attribute. Try adding.
  • You can also include a height attribute in the marquee tag in addition to width, but many browsers will ignore that. You may notice a difference if you add a border to the marquee.
  • You can also use CSS Animations to make text blink. This is quite difficult and not recommended for beginners in CSS. Note that you must have a linked CSS document, as Firefox does not support CSS Animations with inline CSS.

Popular by topic