Flashing Text using JavaScript

>> Create a flashing text effect

RESOURCE ADDED ON SUNDAY 01 OCTOBER 2006, 20:24:24

This tutorial will show you how to use JavaScript to create some flashing text using random colours like this or a set of specified colours like this.

To create this effect you need to use JavaScript to dynamically change the text colour of some HTML many times a second using JavaScript's setInterval() function. This function let's you specify how many times per second a function is called - the examples here will call a function named flashtext() 20 times per second. The parameter 50 is passed to setInterval() as this function requires the interval is set in milliseconds.

Before exploring the flashtext() function further here is the inital CSS for the text:

Code: CSS Code

            body {

                background-color: #222222;

            }

            div {

                font-family: Trebuchet MS, sans-serif;
                font-size: 24px;
                color: #EEEEEE;

            }

Downloads: 1292

Now we define the flashtext() function for random colours; every time a colour change is requested a hex colour is randomly created by selecting an element from an array that contains the letters A to F and the numbers 0 - 9 (the building blocks of hex colours). The actual colour is changed by directly accessing the color attribute of the style property using document.getElementById().

Code: Random Colours

Downloads: 1273

The specified colour change works in the same way only this time an array is used with specific hex colour values:

Code: Specific Colours Code

Downloads: 851

Here's a working example using random colours:

Code: Complete Code 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Flashing Text</title>
        <style media="all" type="text/css">

            body {

                background-color: #222222;

            }

            div {

                font-family: Trebuchet MS, sans-serif;
                font-size: 24px;
                color: #EEEEEE;

            }

        </style>
        <script language="javascript" type="text/javascript">

            var hexvalues = Array( "A", "B", "C", "D", "E", "F", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9" );

            function flashtext() {

                var colour = '#';

                for( var counter = 1; counter <= 6; counter ++ ) {

                    var hexvalue = hexvalues[ Math.floor( hexvalues.length * Math.random() ) ];

                    colour = colour + hexvalue;

                }

                document.getElementById( 'flashingtext' ).style.color = colour;

            }

            setInterval( 'flashtext()', 50 );

        </script>
    </head>
    <body>
        <div id="flashingtext">JavaScript Flashing Text</div>
    </body>
</html>

Downloads: 1853

Here's a working example using specified colours:

Code: Complete Code 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Flashing Text</title>
        <style media="all" type="text/css">

            body {

                background-color: #222222;

            }

            div {

                font-family: Trebuchet MS, sans-serif;
                font-size: 24px;
                color: #EEEEEE;

            }

        </style>
        <script language="javascript" type="text/javascript">

            var textcolours = Array( '#FFFFFF', '#EEEEEE', '#DDDDDD', '#CCCCCC', '#BBBBBB', '#AAAAAA' );

            function flashtext() {

                var colour = Math.round( textcolours.length * Math.random() );
                document.getElementById( 'flashingtext' ).style.color = textcolours[ colour ];

            }

            setInterval( 'flashtext()', 50 );

        </script>
    </head>
    <body>
        <div id="flashingtext">JavaScript Flashing Text</div>
    </body>
</html>

Downloads: 2205

This resource has been viewed 22773 times.

Back to Resources

Back to Tutorials

Back to Web Clientside

Support Dr Quincy

These resources are provided free of charge. If, however, you would like to make a donation to help finance these resources, no matter how big or small, please use the PayPal button below.

Credits

This resource was written by Tim Bennett Bsc (Hons). Tim Bennett has a First Class Degree in Multimedia Systems Computing from Leeds Metropolitan University. He works as a freelance multimedia developer under the company name Texelate creating free and commissioned high-quality multimedia solutions. Find out more by visiting the portfolio section and viewing his blog. If you'd like to request a resource get in touch!