All geek questions in one place

Cross fading background image using jQuery

therefore, I have several images, and I would like to show them as a slide show in the background. However, I want the image to intersect between the current image and the next image. So far, I could switch between images:

$(document).ready(function () { var images = ["landing_background_1.jpg", "landing_background_2.jpg", "landing_background_3.jpg", "landing_background_4.jpg"]; var currentImage = 0; function changeBackgroundImage() { $("html").fadeIn().css({ "background-image": "url('img/backgrounds/" + images[++currentImage] + "')", }); if (currentImage >= images.length - 1) { //set it back to the begining currentImage -= images.length; } } setInterval(changeBackgroundImage, 1500); });

Any help would be greatly appreciated! :)

+4
source share
3 answers

What you need to do is stack the two elements on top of each other. Then do one fadeout and another fadein.

This is how I will do 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; }

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>

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 bother with time so that it looks good. Make sure you set your urls in the images in the image array or when the stings are created in css.

+6
source

I spent a lot of time to find the cleanest and easiest 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; }
+3
source

simpler:

 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; }
0
source

Source: https://habr.com/ru/post/1498094/

More articles:


All Articles