All geek questions in one place

Fade In / Fade Out Background Images Without White Background

I want to create a website with background images that change over time with the fade in / fade out effect, but I don’t want to use the existing jQuery fade in / fade out effect, because when one image disappears, a white background appears before how another image disappeared. I found a plugin called Maximage that matches my query, but it uses img tags as long as I want to work with the CSS background image (I have every reason for this). Does anyone know how to do this?

Here is my HTML code:

<div id="wrapper"> //My contain here </div>

Here is my JavaScript code so far:

 //Auto change Background Image over time $(window).load(function() { var images = ['img/top/bg-1.jpg','img/top/bg-2.jpg','img/top/bg-3.jpg']; var i = 0; function changeBackground() { $('#wrapper').fadeOut(500, function(){ $('#wrapper').css('background-image', function () { if (i >= images.length) { i = 0; } return 'url(' + images[i++] + ')'; }); $('#wrapper').fadeIn(500); }) } changeBackground(); setInterval(changeBackground, 3000); });

Example: http://www.aaronvanderzwan.com/maximage/examples/basic.html

+6
source share
3 answers

Ahh! Finally! I found a good technique! I use a double shell.

The problem in your code is a bit logical. You cannot fadeOut and fadeIn at the same time one shell.

So the idea is to create two wrappers and switch back and forth between them. We have one wrapper called "wrapper_top" that encapsulates a second wrapper called "wrapper_bottom". And the magic was putting next to the second wrapper: your content.

Thus, having a finished structure, which is as follows:

 <div id='wrapper_top'> <div id='content'>YOUR CONTENT</div> <div id='wrapper_bottom'></div> </div>

Then some JS + CSS and voilà! It will be dynamic with any number of images !!!

Here is the implementation: http://jsbin.com/wisofeqetu/1/

+4
source 
 <html> <head> <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(window).load(function() { var i =0; var images = ['image2.png','image3.png','image1.png']; var image = $('#slideit'); //Initial Background image setup image.css('background-image', 'url(image1.png)'); //Change image at regular intervals setInterval(function(){ image.fadeOut(1000, function () { image.css('background-image', 'url(' + images [i++] +')'); image.fadeIn(1000); }); if(i == images.length) i = 0; }, 5000); }); </script> </head> <body> <div id="slideit" style="width:700px;height:391px;"> </div> </body> </html>
+1
source

If this should not be a background image, you can put all the images in #wrapper, in <img> , it will work like a charm:

 <div id="wrapper"> <img src="firstImage" class="imageClass"></img> <img src="secoundImage" class="imageClass"></img> <img src="thirdImage" class="imageClass"></img> </div>

then some style. Each image should be in one place, so add a position relative to #wrapper and set the absolute value to .imageClass:

 #wrapper{ position: relative; } .imageClass{ position: absolute; top: 0; left: 0; display: none; }

display: none; will hide every image.

Now a few jQuery. To display the first image when loading the window, write this:

 $(window).load(function() { $('.imageClass').eq(0).show(); });

with the .eq () "command, you can specify which element with the" .imageClass "class you want to use exactly. It starts with 0. After that, just do something like this:

  function changeBackground() { var current = 0; //tells which image is currently shown if(current<$('.imageClass').length){ //loop that will show first image again after it will show the last one $('.imageClass').eq(current).fadeOut(500); current++; $('.imageClass').eq(current).fadeIn(500); } else { $('.imageClass').eq(current).fadeOut(500); current=0; $('.imageClass').eq(current).fadeIn(500); } } changeBackground(); setInterval(changeBackground, 3000); });

That should work, hope you enjoy it.

0
source

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

More articles:


All Articles