Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

Dynamic background changes

is there a plugin or how do l change the background color dynamically as the one on the themify footer page http://themify.me/themes/postline

4 Answers

Chunwei Li
Chunwei Li
18,816 Points
Chunwei Li
Chunwei Li
18,816 Points

Hi Kelvin,

CSS3 animation can be used for your requirement. the below is an example:

<!DOCTYPE html>
<html>
<head>
<style> 
body {
    background: red;
    -webkit-animation: bgcolor 5s; /* Chrome, Safari, Opera */
    animation: bgcolor 5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes bgcolor {
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

@keyframes bgcolor {
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
</style>
</head>
<body>

</body>
</html>

Hope this is useful for you!

Thanks!

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

is bgcolor a class or id? or just a property?

And how can l keep repeating the changes as l put in in codepen. it stops changing when it gets back to red but l want it to keep going in a loop.

Robert Richey
PLUS
Robert Richey
Courses Plus Student 16,352 Points
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Inspecting the element shows the css style background-color is updating rgb values over time. Also, this seems to not be dynamic - the color changes and time intervals are not changing (i.e. always changes from orange to purple, etc). I was unable to find the script implementing this behavior.

Chunwei Li
Chunwei Li
18,816 Points
Chunwei Li
Chunwei Li
18,816 Points

Hi Kelvin,

Sorry!

bgcolor is just a name, not a class or id. you can change bicolor to any name.

the below css animation property can be used to implement color transit and infinite loop. '3s' is animation duration in one loop, and 'infinite' is animation iteration count. 'infinite' means loop forever. 

-webkit-animation: bgcolortransit 3s infinite; /* Chrome, Safari, Opera */
animation: bgcolortransit 3s infinite;

the below code has been modified to meet your requirement.

<!DOCTYPE html>
<html>
<head>
<style> 
body {
    background: red;
    -webkit-animation: bgcolortransit 3s infinite; /* Chrome, Safari, Opera */
    animation: bgcolortransit 3s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes bgcolortransit {
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

@keyframes bgcolortransit {
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
</style>
</head>
<body>

</body>
</html>

I test the above code only in firefox, safari, and chrome. I have not test it in IE. So please help test it with IE.

Hope this is useful for your requirement. Thanks!

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

Gosh l need to learn these css transitions. Thanks mate. One more question tho. Does the background start only on load or on scroll?

Chunwei Li
Chunwei Li
18,816 Points
Chunwei Li
Chunwei Li
18,816 Points

Hi Kelvin,

Animation Events can be used to control css animation.

Please refer to the below links:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

Hope this is a correct answer for your question! Thanks!