CODEWITHSUNDEEP
jqueryhtmlcssanimation
Arnas Pečelis
Arnas Pečelis

Reputation: 1008

Change background image with animation

I have a code:

slider.stop().animate({
    opacity: 0
}, 1000, function() {
    $(this)
        .css({
            'background-image': 'url(' + slider_bgs_array[array_item + 1] + ')'
        })
        .animate({
            opacity: 1
        }, 1000);
});

what does this do - changes wrapper background image. But the effect is fade, and that moment when background's are changing I see the white space.

All I want to do is a effect which whould work like in this plugin but with background-image, not the images inside wrapper. Any ideas?

P.S.: the idea is to fadeout old image and the same time fadein new image to get effect..

Upvotes: 0

Views: 212

Answers (1)

Olliek
Olliek

Reputation: 124

As far as I know it's not possible to fade a background image directly into another one without seeing a white screen using only one element.

In order to do this, you would need at least two elements which would be representing the two background images. You can then fade the first one out while the other one is already visible behind the first one (so both elements are on top of eachother). This will result in the scenario you were talking about where you will not see any white background when the background image changes.

You might want to look for (free-to-use) full-screen background sliders. There are a lot of these sliders out there which are really easy to use (for example the link you mentioned yourself: http://srobbin.com/jquery-plugins/backstretch/). Mose of these sliders use the same principle as described above.

EDIT: I have checked how the backstretch plugin achieves this, and I can confirm that they are using the same principle as above. When the transition takes place, the new background image will be added as a new element beneath the current background image. The current background images will then be fade out and be removed once it is completely fade out.

Upvotes: 1

Related Questions