jQuery Background Fader on Load

Question

I want that when people visit my website I want the background to be white and when the page is fully loaded, after 5 seconds to start fading in a picture in the background and then after every 15 seconds fade to a new picture. Do you know a good way of doing this or if there are already some premade plugins etc.

Thanks,

Martijn

Chase · Answer 1 · 2012-11-02T18:05:35.983

0

Use document.ready combined with setTimeout?

You'll call two setTimeout functions within your document.ready function with different timers. Each of these will fadeIn the images by changing the css using:

$('body').css('background-image', 'YOURIMAGESRC');

edited Nov 02 '12 at 18:05

answered Nov 02 '12 at 17:59

Chase

29,019
1
49
48

But how can I change CSS in the body tag? – Martijn R Nov 02 '12 at 18:00
@MartijnR: Updated the answer, hope it helps. I would write it all out, but without seeing some code on your part I prefer not to. Please let me know if you need anymore help. Thanks – Chase Nov 02 '12 at 18:07

srijan · Answer 2 · 2012-11-02T18:07:53.497

0

use fadeIn() on the id of your img tag after 5 sec of loading. Run the counter to do the same on each 15 secs.

  <img id="book" src="book.png" alt="" width="100" height="123" />

With the element initially hidden, we can show it slowly:

   $(window).load(function () {
      $('#book').fadeIn(15000, function() {
        // Animation complete
      });
    });

edited Nov 02 '12 at 18:07

answered Nov 02 '12 at 18:02

srijan

1,504
1
13
24

score 0 · Answer 3 · edited May 23 '17 at 11:43

0

For color trasition effect, you need to use external plugin.

Here is jsFiddle to inspect.

$(document).ready(function() {

    function repeat() {
        $('body')
            .delay(5000).animate({'background-color':'#fff'},1000)
            .delay(5000).animate({'background-color':'#000'},1000);
    }
    window.setInterval(repeat, 10000);

});

Color Transition Effect Source: Special color transition effect with pure jQuery animation // no ui or other libary

edited May 23 '17 at 11:43

Community

1
1

answered Nov 02 '12 at 18:12

Barlas Apaydin

7,233
11
55
86

This is what I want but is it also possible without going back to the original background color and instead of using colours, using pictures? – Martijn R Nov 02 '12 at 18:41
$(document).ready(function() { setTimout(function() { $('body').css("background-image","url('../img/background/1.jpg')").fadeIn(1000) },5000) function repeat() { $('body') .delay(5000).css("background-image","url('../img/background/2.jpg')").fadeIn(1000) .delay(5000).css("background-image","url('../img/background/3.jpg')").fadeIn(1000) .delay(5000).css("background-image","url('../img/background/1.jpg')").fadeIn(1000) } window.setInterval(repeat, 18000); }); – Martijn R Nov 02 '12 at 19:15
@MartijnR You can not animate background image like this. Divide your object 3 like this: http://jsfiddle.net/9DjML/14/ and you will be able to use fadeIn effect. – Barlas Apaydin Nov 02 '12 at 21:42

jQuery Background Fader on Load

3 Answers3