Making background colour change

Question

I have a page with a background that is styled to appear as diagonal lines. I want to make the colour of these lines change with jQuery slowly and fade as they change. Is this possible?

I have started a fiddle with the CSS in it to display the background as static. http://jsfiddle.net/rabelais/LZc7m/

and here is the code

body {
    background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.25, #fff), color-stop(0.25, #9CC), color-stop(0.5, #9CC), color-stop(0.5, #fff), color-stop(0.75, #fff), color-stop(0.75, #9CC));
    background-image: -webkit-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CCb 50%, #fff 50%, #fff 75%, #9CC 75%);
    background-image: -moz-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9cc 75%);
    background-image: -ms-linear-gradient(right bottom, #fff 0%, #fff 25%, #bbb 25%, #bbb 50%, #fff 50%, #fff 75%, #bbb 75%);
    background-image: -o-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#9CC',GradientType=0 ); / IE6-8 */
    background-image: linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%);
    background-size: 5px 5px;
    width:100%;
    height:100%;
}

See accepted answer here: http://stackoverflow.com/questions/5533171/fade-background-image-in-and-out-with-jquery — RichTea, Jan 24 '14 at 14:12
@user2501613 did not read the question! He wanted to change color of the lines not the image. Please read the questions before posting anything. Thank you. — Praveen Govind, Jan 24 '14 at 14:15

score 1 · Answer 1 · answered Jan 24 '14 at 14:16

1

You could make the background image a GIF, or preferably PNG if you can afford the extra size, and utilize transparency. Your image would have white and transparent stripes. Then with the background image overlaying on top of a background color, you can animate the background color. The effect will be the color of the lines changing.

answered Jan 24 '14 at 14:16

rgbflawed

1,957
1
22
28

Wow, you got nowhere slowly with that one. You come up with a stupid bit at the beginning and then ran into the same problem. (changing the background colour) – Ruddy Jan 24 '14 at 14:17
1

@Ruddy Soo... I kinda use this technique all the time and it works great. No worries about browser comparability too. – rgbflawed Jan 24 '14 at 14:21
I didn't say it wouldn't work. I said you got nowhere with the answer (if you can call it an answer). Provide code and a JSFiddle with explanation. That's an answer. – Ruddy Jan 24 '14 at 14:23

score 1 · Answer 2 · edited May 23 '17 at 10:28

Building on rgbflawed answer .. you will need the Color Animation JS

here is a JSfiddle example

$(document).ready(function () {
    $('html, body').click(function () {
        $('body').stop().animate({ backgroundColor: '#ff0000' }, 1200);
        $('body').delay(1200).animate({ backgroundColor: '#ffffff' }, 1200);
    });

});

CSS

body {
    background-image: url(https://i.stack.imgur.com/V3pEr.png);
    background-color: #12877f;
}

An update is here to fade to white

Rudi · Answer 3 · 2014-01-24T14:30:50.550

0

I recommend using css3 transitions instead of just jQuery. Toggle through the classes with jQuery and set the background gradient in a seperate css file.

Example:

.defaultClass{
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -ms-transition: color 0.3s;
    -o-transition: color 0.3s;
    transition: color 0.3s;
}

.blue{
    background-color: blue;
}

.red{
    background-color: red;
}

Added the blue class to the element would make it fade too blue in 0.3 seconds.

Here's the fiddle for it: http://jsfiddle.net/Rudi91/sttdL/

EDIT: The biggest plus with this is that jQuery animations can run slow on mobile phones/tablets whereas css3 animations usually run smooth

edited Jan 24 '14 at 14:30

answered Jan 24 '14 at 14:18

Rudi

111
9

thanks for this, I really want to use ccs3 animations, but I'm not sure how to make this work with the diagonal lines? – angela Jan 24 '14 at 14:41
Just change the background-color (at the css) to the background-image corresponding to the right lines. Example: .line1{ background-image: linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%); } .line2{ background-image: linear-gradient(right bottom, #000 0%, #000 25%, #9CC 25%, #9CC 50%, #000 50%, #000 75%, #9CC 75%); } – Rudi Jan 27 '14 at 10:20

score 0 · Answer 4 · answered Feb 04 '16 at 16:22

I've developed a lightweight jQuery plugin (~3kb) that is using CSS3 transitions to accomplish what you're looking for - ColorRotator.js

You can use it to transition various CSS color properties, such as background color, box-shadow color and text colors. More properties will be supported in the future.

Example Usage:

$('#element').colorRotator({
    colors: ['#1abc9c','#16a085','#2ecc71','#27ae60'],
    property: 'background'
});

Here are a few live demos

Making background colour change

4 Answers4

CSS