Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery

Cross Fade Background-image With JQuery

Post a Comment
so I have some images and I would like to show them as a slideshow in the background. However, I want the image to cross-fade between the current image and the next image. So far,

Solution 1:

What you have to do is layer two element on top of each other. Then have one fadeout and the other fadein.

Here is how I would go about doing it ...

css ...

#background-images {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1;
    }

#bImg1 {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 3; 
    background: url(starting-img1.jpg) no-repeat; 
    background-size: contain;
    }

#bImg2 {
    display: none;
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 2; 
    background: url(starting-img2.jpg) no-repeat; 
    background-size: contain;
    }

.container {
    width: 960px;
    height: 900px;
    background: rgba(255,255,255,.7);
    margin: auto;
    position: relative;
    z-index: 10;
}

The html ...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<html>
<body>
    <div id="background-images">
        <div id="bImg1"></div>
        <div id="bImg2"></div>
    </div>
    <div class="container">
        Content Here
    </div>
</body>
</html>

The script ...

var imageSet1 = ["image1.jpg", "image2.jpg", "image3.jpg"];
var currentImageSet1 = 0;

var imageSet2 = ["image4.jpg", "image5.jpg", "image6.jpg"];
var currentImageSet2 = 0;

function changeBackgroundImages() {
    img1Fade();
    setTimeout(img2Fade, 2000);

}

function img1Fade(){

    $('#bImg1').fadeOut('slow', function(){$('#bImg1').css({background: 'url(' + imageSet1[++currentImageSet1] + ')'})});
    $('#bImg2').fadeIn('slow');
    if (currentImageSet1 >= imageSet1.length - 1) {

            currentImageSet1 -= imageSet1.length;
        };
}

function img2Fade(){

    $('#bImg2').fadeOut('slow', function(){$('#bImg2').css({background: 'url(' + imageSet2[++currentImageSet2] + ')'})});
    $('#bImg1').fadeIn('slow');
    if (currentImageSet2 >= imageSet2.length - 1) {

            currentImageSet2 -= imageSet2.length;
        };
}

$(document).ready(function(){

    setInterval(changeBackgroundImages, 5000);
});

You will need to mess with the timing to get it to look good. Make sure to set your urls to the images in the image array or when the sting in the css is built.


Solution 2:

I've spent a lot of time to find the most clean and easy way. This finally works:

var i=0;
var imghead=[
	"url(http://yoururl.com/picture0.jpg)",
	"url(http://yoururl.com/picture1.jpg)"
	];//add as many images as you like

function slideimg() {
    setTimeout(function () {
        jQuery('#element').css('background-image', imghead[i]);
        i++;
        if(i==imghead.length) i=0;
        slideimg();
    }, 6000);
}
slideimg();
#element{
	height: 100%;
	overflow: hidden;
	opacity: 1.0;
	-webkit-transition: background-image 1.5s linear;
	-moz-transition: background-image 1.5s linear;
	-o-transition: background-image 1.5s linear;
	-ms-transition: background-image 1.5s linear;
	transition: background-image 1.5s linear;
}

Solution 3:

Easier:

var current = 1;
function anim() {
   if(current == 4) {current = 1;   }
   $('#bImg'+ current).fadeOut(3000);
   ++current;
   $('#bImg'+ current).fadeIn(3000);
   setTimeout(anim, 8000);
}
anim();

html:

 <div class="inside" >
        <div id="bImg2"></div>    
        <div id="bImg3"></div>    
    </div>

css:

.inside {
 background:url(top_01.jpg) no-repeat center top ;
}


#bImg2 {
position: absolute;
top: 0px;
width: 100%;
background:url(top_02.jpg) no-repeat center top ;
 display: none;
}

  #bImg3 { 
position: absolute;
top: 0px;
width: 100%;
background:url(top_03.jpg) no-repeat center top ;
 display: none;
}

Post a Comment for "Cross Fade Background-image With JQuery"