change backgroundColor of a baragraph in CSS Style using JS

Question

0.00/5 (No votes)

See more:

Hi evereyone

I want to smoothly change Hue of backgroundColor of a Paraghraph in a WebPage at page Load
--> So we have a rectangle that smoothly cycle's through all ColorWheel Colors

Here is the code I'm Using But No reasults

----------------------------------------------

XML

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsl(150, 100%, 80%);}
</style>
</head>
<body>

<p>HSL colors:</p>
<p id="p1">
    <br>
    <br>
AAAAAAAAAA
    <br>
    <br>

</p>

<script>
var a = 0;
var c1;
var x = document.getElementById("p1");
</script>

<script>
setInterval(function () {abc()}, 50);
function abc()
{
    a = a + 1;
    if ( a < 360)
    {
        a = 0;
    }
    c1="hsl(a, 100%, 80%)";
    x.style.backgroundColor = c1;
}
</script>




</body>
</html>

----------------------------------------------

Posted 15-May-15 8:37am

Member 10010932

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2015-05-15T09:16:00

No need for Javascript - you can do this in pure CSS:

CSS

\#p1 
{
    background-color:hsl(150, 100%, 80%);
    animation: color-change 18s infinite;
}

@keyframes color-change 
{
  0% { background-color: hsl(0, 100%, 80%); }
  50% { background-color: hsl(180, 100%, 80%); }
  100% { background-color: hsl(360, 100%, 80%); }
}

http://jsfiddle.net/8kfw0v42/[^]

You might need some vendor prefixes to support older browsers - this tool[^] will generate them for you.

Ignore the \ in front of the #p1 - it's just there to stop this site's code from trying to turn it into an <h1> tag!

change backgroundColor of a baragraph in CSS Style using JS

1 solution

Solution 1

Add your solution here

Preview 0

change backgroundColor of a baragraph in CSS Style using JS

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us