The display of blinking text is not a native function of the HTML code and there is no method that allows you to achieve this visual effect on all browsers on the market. The simplest option that includes using pure HTML is to use the "" tag, but this won't work if you're using Google Chrome. Using JavaScript is a method that gives more reliable results and allows you to copy and paste the code directly into your HTML document.
Steps
Method 1 of 2: Using the Tag Marquee
Step 1. Use this approach for personal projects only
The tag is an outdated command and developers are strongly encouraged not to use it in their work. Each browser interprets this tag differently and future software updates may abandon this command altogether, making the solution proposed in this article method ineffective. If you need to create a professional website, try using Javascript.
Google Chrome does not support the "scrollamount" attribute of the "" tag on which the solution described in this method is based. In this scenario, the text will scroll across the page rather than blinking
Step 2. Enclose the text that is to be blinking inside the "" tags
Open the HTML file using a simple text editor. Enter the code as a prefix to the text you want to blink, then add the tag at the end of the sentence or paragraph.
Remember that the HTML of the page must be formatted correctly and must include the sections, and
Step 3. Set the width of the section of the text that is to blink
Edit the opening "" tag as follows <marquee width = "300">. In this case, the font size will not be changed. There are two reasons why you need to make this change:
- If the text is not displayed entirely within the corresponding page section, it will scroll from right to left instead of blinking. Increasing the section width using the "width" attribute will solve this problem.
- Using Google Chrome, the text will scroll within a section that will have as its size the value indicated by the "width" attribute.
Step 4. Set the value of the "scrollamount" attribute to the same number that you assigned to the "width" parameter
Add the code scrollamount = "300" (or the same value you assigned to the "width" attribute) inside the "" tag. By default, the "" tag uses the full width of the page to flow text. By setting the value of the "scrollamount" parameter to the same as the "width" attribute, you will force the text to scroll in the same position it is displayed. The result of this setting is a blinking effect of the text.
-
The HTML code at this point should look like this:
Flashing text..
Step 5. Edit the "scrolldelay" attribute
Open the HTML file you edited in an internet browser to see the blinking effect of the text you just created. If the text blinks too fast or too slow, you can vary the speed of the graphic effect by adding the attribute scrolldelay = "500". The default is 85. Set a higher number if you want to reduce the speed at which text blinks, or use a lower number to speed it up.
-
At this point the HTML code should look something like this:
Flashing text.
Step 6. Limit the number of text blinks (optional)
Many users who regularly surf the web find that the blinking effect of the text is annoying and irritating. To stop the text animation after attracting the reader's attention, you can add the attribute loop = "7". In this way the text will blink seven times, after which it will disappear from view (depending on your needs you can use a number of repetitions other than seven).
-
The complete HTML code is as follows:
Flashing text.
Method 2 of 2: Using a JavaScript
Step 1. Insert the script that manages the blinking of the text inside the "head" section of the HTML code of the page
Insert the following JavaScript inside the tags and HTML file you are editing:
-
function blinktext () {
var f = document.getElementById ('announcement');
setInterval (function () {
f.style.visibility = (f.style.visibility == 'hidden'? '': 'hidden');
}, 1000);
}
Step 2. Enter the command to load the script into the page
The code provided in the previous step is used to declare the "blinktext" function which will handle the graphic effect of the text. To be able to use it within your HTML code, you need to edit the tag as follows.
Step 3. Assign the identifier "announcement" to the section of text you want to make flashing
The script you created in the previous steps only affects items that have the "announcement" label. Insert the text you want to display with the flashing effect inside any element of the page to which you will then assign the id "announcement". For instance
Flashing text.
or Flashing text..
You can assign any name to the "id" attribute, the important thing is that it is also reported in the script as the id of the element to be managed
Step 4. Edit the script settings
The value "1000" reported in the script represents the speed at which the text blinks. This is a parameter expressed in milliseconds, so setting it to "1000" means that the text will flash once per second. Decrease this value if you want to increase the blinking speed or increase it if you want to decrease the speed of the graphic effect.
It is very likely that the actual speed at which the text will blink does not exactly match the set value. Normally the effect tends to be slightly faster, but if the browser is performing other operations it may be slower
Advice
- You can change the appearance of the text displayed with the "" tag using the "style" attribute. Try using the code style = "border: solid".
- You can add the "height" attribute to the "" tag as well as the "width" attribute, but be aware that some browsers will ignore these commands. If you added a border to the "" tag text, you may notice a difference in appearance.
- To make the text appear flashing, you can take advantage of the animations provided by the CSS style sheets. However, this is a very complicated approach, which is not recommended if you are not very experienced in using CSS. Remember that you will need to use an external CSS sheet, as Firefox does not support CSS animation commands inserted directly into the page's HTML code.
