CODEWITHSUNDEEP
htmlcss
BIS UCC
BIS UCC

Reputation: 55

Coding FadeIn/FadeOut for Slideshow

Currently I have a homepage for my website with a slideshow (4 pictures) as my background. The transition between images isn't very smooth and jumps from photo to photo. How can I create smoother transitions, is it possible to fade in and fade out?

All help greatly appreciated, thanks

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>    
        $(document).ready(function(){
        var header = $('body');

        var backgrounds = new Array(
            'url(http://urs2009.net/wp-content/uploads/2011/11/lights-of-city.jpg)'
          , 'url(http://www.wallpaiper.com/wp-content/uploads/2014/06/amazing-wallpaper-hd-8.jpg)'
          , 'url(http://hdwallpaperd.com/wp-content/uploads/2014/12/background-wallpaper-hd-1.jpg)'
          , 'url(http://www.mrwallpaper.com/wallpapers/rocky-beach-hd.jpg)'
        );

        var current = 0;

        function nextBackground() {
            current++;
            current = current % backgrounds.length;
            header.css('background-image', backgrounds[current]);
        }
        setInterval(nextBackground, 5000);

        header.css('background-image', backgrounds[0]);
        });

        </script>

Upvotes: 2

Views: 699

Answers (2)

sideroxylon
sideroxylon

Reputation: 4416

It's difficult to fade background images as they have no opacity state. You can either have a -z-index div the same size as the body, and fade images in it behind the rest of your content, or you can float a mask over your background and dip to black (or another color) while you switch images. This is a simple method of doing the latter:

HTML:

<div id = "mask"></div>

CSS

#mask {
    width:100%;
    height:100%;
    background:#000000;
    top:0;
    left:0;
    position:absolute;
    display:none;
}

jquery

 $(document).ready(function(){
        var header = $('body');

        var backgrounds = new Array(
            'url(http://urs2009.net/wp-content/uploads/2011/11/lights-of-city.jpg)'
          , 'url(http://www.wallpaiper.com/wp-content/uploads/2014/06/amazing-wallpaper-hd-8.jpg)'
          , 'url(http://hdwallpaperd.com/wp-content/uploads/2014/12/background-wallpaper-hd-1.jpg)'
          , 'url(http://www.mrwallpaper.com/wallpapers/rocky-beach-hd.jpg)'
        );

        var current = 0;

        function nextBackground() {
            $('#mask').fadeTo(1000, 0.9, function() {
            current++;
            current = current % backgrounds.length;
            header.css('background-image', backgrounds[current]);
            })
            $('#mask').fadeTo(500, 0);
        }
        setInterval(nextBackground, 5000);

        header.css('background-image', backgrounds[0]);
        });

You can obviously play with the color, timers and opacity to get the effect you want.

FIDDLE

Upvotes: 1

Dhruv Ramani
Dhruv Ramani

Reputation: 2643

Change your JS to this to make it more efficient. It would be better that you create a div that covers the entire body if you want the fade animations.:

HTML:

<body>
   <div id="div1"></div>
</body>

CSS:

#div1
{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right: 0;
}

Javascript:

 $(document).ready(function(){

            var backgrounds = new Array(
                'url(http://urs2009.net/wp-content/uploads/2011/11/lights-of-city.jpg)'
              , 'url(http://www.wallpaiper.com/wp-content/uploads/2014/06/amazing-wallpaper-hd-8.jpg)'
              , 'url(http://hdwallpaperd.com/wp-content/uploads/2014/12/background-wallpaper-hd-1.jpg)'
              , 'url(http://www.mrwallpaper.com/wallpapers/rocky-beach-hd.jpg)'
            );

            var current = 0;

            function nextBackground() {
                if(current<backgrounds.length)
                   current++;
                 else
                   current=0;
                 $('#div1').fadeOut(function() {
                   $('#div1').css({background : backgrounds[current]) });
                   $('#div1').fadeIn(5000);
                 }, 5000);
            }
            setInterval(nextBackground, 5000);
    });

Upvotes: 1

Related Questions