How to Add Blinking Background Color in JavaScript ?
In this article, we will learn how to create a blinking background color. Adding a blinking background color to an element can be an attention-grabbing visual effect that can be useful in various web applications. It can be achieved using JavaScript by toggling the background color of an element between two or more colors at regular intervals.
Below are the approaches through which we can do this:
- Using
setInterval()
Method - Using CSS Animations and JavaScript
Approach 1: Using setInterval() Method
We can use the setInterval()
method to repeatedly toggle the background color of an element. The setInterval()
method executes a given function at specified intervals (in milliseconds).
Syntax:
window.setInterval(function, milliseconds);
Example:
HTML
<!DOCTYPE html> < html > < head > < title > Blinking Background Color </ title > </ head > < body > <!-- The div that will have the blinking background --> < div id = "blinkDiv" style="width: 400px; height: 100px; padding: 20px; text-align: center; font-size: 24px;"> <!-- Content inside the div --> < h1 style = "color: green;" > w3wiki </ h1 > </ div > < script > // Get the div element by its ID const blinkDiv = document.getElementById('blinkDiv'); // An array of colors to be used for blinking const colors = ['#ff0000', 'black', '#0000ff']; // Variable to keep track of the // current color index let currentColorIndex = 0; // Function to toggle the background // color of the div function blinkBackground() { blinkDiv.style.backgroundColor = colors[currentColorIndex]; currentColorIndex = (currentColorIndex + 1) % colors.length; } // Start the blinking by setting an interval // that calls the blinkBackground // function every 1000ms (1 second) const blinkingInterval = setInterval(blinkBackground, 1000); // To stop blinking after 5 seconds, // use setTimeout to clear the interval setTimeout(() => { clearInterval(blinkingInterval); }, 5000); </ script > </ body > </ html > |
Output:
Approach 2: Using CSS Animations
In this approach, we will use CSS animations for blinking the background color. CSS Animations is a technique to change the appearance and behavior of various elements in web pages.
Syntax:
/*property-name*/: /*value*/;
Example:
HTML
<!DOCTYPE html> < html > < head > < title > Blinking Background Color </ title > < style > /* Define a CSS animation named "blink" */ @keyframes blink { 0%, 100% { background-color: #ff0000; /* First color - red */ } 50% { background-color: black; /* Second color - black */ } } /* Apply the "blink" animation to elements with class "blinking-effect" */ .blinking-effect { animation: blink 1s linear infinite; /* The animation will run indefinitely */ } </ style > </ head > < body > <!-- The div that will have the blinking background --> < div id = "blinkDiv" class = "blinking-effect" style="width: 400px; height: 100px; padding: 20px; text-align: center; font-size: 24px;"> <!-- Content inside the div --> < h1 style = "color:green" > w3wiki </ h1 > </ div > </ body > </ html > |
Output: