Transition multiple background images

Question

Trying to apply and image transition effect to a fixed bg image for a particular div. Currently looks like –

#top-header {
background: #FFF url('/images/image001.jpg') no-repeat top center fixed; 
width: 100%;height: 540px;
}   

<div id="top-header"></div>

I am aware that CSS3 allows for multiple bg images. Since images are being called through my CSS is it possible to apply javascript to the current div to achieve a fade in/out transition effect?

Thanks!

Answer 1

You can do a lot with JavaScript and CSS however this is a very solved problem with many options for basically showing slideshows. So it might be best to look at one of those. But let's try it anyway!

HTML:

<div id="slideshow"></div>​

CSS:

#slideshow {
    border: 1px solid gray;
    height: 330px;
    width: 592px;
    opacity: 0;
}

​ JavaScript:

$(document).ready(function() {
    var timeToDisplay = 2000;
    var opacityChangeDelay = 50;
    var opacityChangeAmount = 0.05;

    var slideshow = $('#slideshow');
    var urls = [
       'http://sipi.usc.edu/database/preview/aerials/2.1.07.png',
       'http://sipi.usc.edu/database/preview/aerials/2.1.06.png',
       'http://sipi.usc.edu/database/preview/aerials/2.1.12.png'
    ];

    var index = 0;

    var transition = function() {
        var url = urls[index];

        slideshow.css('background-image', 'url(' + url + ')');

        index = index + 1;
        if (index > urls.length - 1) {
            index = 0;
        }
    };

    var fadeIn = function(opacity) {
        opacity = opacity + opacityChangeAmount;

        slideshow.css('opacity', opacity);

        if (opacity >= 1) {
            slideshow.trigger('fadeIn-complete');
            return;
        }
        setTimeout(function() {
            fadeIn(opacity);
        }, opacityChangeDelay);
    };

    var fadeOut = function(opacity) {
        opacity = opacity - opacityChangeAmount;

        slideshow.css('opacity', opacity);

        if (opacity <= 0) {
            slideshow.trigger('fadeOut-complete');
            return;
        }
        setTimeout(function() {
            fadeOut(opacity);
        }, opacityChangeDelay);
    };

    slideshow.on('fadeOut-complete', function(event) {
        transition();
        fadeIn(0);
    });

    slideshow.on('display-complete', function(event) {
        fadeOut(1);
    });

    slideshow.on('fadeIn-complete', function(event) {
        setTimeout(function() {
            slideshow.trigger('display-complete');
        }, timeToDisplay);
    });

    transition();
    fadeIn(0);
});​

Demo: jsfiddle

Of course, jQuery already has fadeIn and fadeOut so we can simplify our code by using them:

$(document).ready(function() {
    var timeToDisplay = 2000;

    var slideshow = $('#slideshow');
    var urls = [
       'http://sipi.usc.edu/database/preview/aerials/2.1.07.png',
       'http://sipi.usc.edu/database/preview/aerials/2.1.06.png',
       'http://sipi.usc.edu/database/preview/aerials/2.1.12.png'
    ];

    var index = 0;
    var transition = function() {
        var url = urls[index];

        slideshow.css('background-image', 'url(' + url + ')');

        index = index + 1;
        if (index > urls.length - 1) {
            index = 0;
        }
    };

    var run = function() {
        transition();
        slideshow.fadeIn('slow', function() {
            setTimeout(function() {
                slideshow.fadeOut('slow', run);
            }, timeToDisplay);
        });
    }

    run();
});​

Demo: jsfiddle

We could also use slideDown and slideUp: jsfiddle

So why not just use this? Well you could however I'm aware of one obvious flaw: we start the slideshow before making sure all the images have been downloaded by the browser. We should fix that. No doubt there are similar issues we may have overlooked but the choice is yours on what to use.