Geek asks and answers

JQuery background rotation

For the website that I am currently developing, I would like to have a body background when rotating an array of images. I tried several ways, i.e. using the fadeIn () and fadeOut () functions, but they seem to affect the opacity of the partitions inside the body. I also tried using bgStretcher. But this caused problems with the look and made the site slow and choppy.

I would prefer the images to fade in and out. Help will be appreciated

Here's the link to the site The script file that I am currently editing is called background.js in the / js / directory. The file is currently commented out because it is only experimental. Two current background images: "images / bg / bg1.jpg" and "images / bg / bg2.jpg"

Here is my current code I'm trying to get:

$(document).ready(function() {
    setInterval(switchImage, 5000);
    switchImage();

});

function switchImage()
{
$('body').css("background-image", "url(../images/bg/bg2.jpg)").fadeIn(1000);
$('body').css("background-image", "url(../images/bg/bg1.jpg)").fadeOut(1000);
}

Once I can figure out how to switch between background images, I can simply add some conditions for the change between the array of images.

Greetings, Dane Wilson

+5
source share
2 answers

Very simple with this jQuery plugin: jQuery Backstretch The demos “Using Backstretch in a Slide Show” is a piece of code for it.

+7
source

This can only be done with css3. I'll post the violin soon.

EDIT: I tried to make an animation with keyframes and CSS3 background size, but apparently they didn't want to work too well (flicker). It is probably best to look into jQuery.

0
source

More articles:


All Articles