Animate Full-Page Multiple Background images with fade-in & fade-out effect – jQuery

“How to change multiple background-image of body with effects?” – I think this is a major problem which all designers face. You can fade background colors but not background images. The way to work around this is to have your images as <img> tags and hide them by default display:none;. Give your images position:absolute and z-index:-1 so they act like backgrounds and are behind everything else.

Here’s a quick example of multiple images fading one after the other.

jquery-full-page-animated-background-images

The HTML

Html is very simple. Just add a div with multiple images which you want to animate / change in background with fade effects.

<div id="wrap">
<img class="bgfade" src="http://farm9.staticflickr.com/8526/8668341950_182b74faf2_z.jpg">
<img class="bgfade" src="http://farm9.staticflickr.com/8532/8667337535_6da0a9a261_z.jpg">
<img class="bgfade" src="http://farm9.staticflickr.com/8540/8667244539_d227f8c435_z.jpg">
</div>

The CSS

Now, We will use some CSS Technique which will create an illusion like background-image animation. The way to work around this is to have your images as <img> tags and hide them by default “display:none;”. Give your images “position:absolute” and “z-index:-1” so they act like backgrounds and are behind everything else. Now, set css property of div#wrap which includes these images to “position:fixed” and “top:0; left:0;” so that it will fix with page background.

#wrap{
	position:fixed;; 
	z-index:-1; 
	top:0; 
	left:0; 
	background-color:black
}
#wrap img.bgfade{
	position:absolute;
	top:0;
	display:none;
	width:100%;
	height:100%;
	z-index:-1
}

jQuery

Now, it is java-script’s turn. We will calculate browser window’s height & width. After that we will set width/height of div#wrap to browser so that background cover entire webpage. Now we have to animate our images. We will simple use function of fadeIn() and fadeOut() in images for this.

$(window).load(function(){
$('img.bgfade').hide();
var dg_H = $(window).height();
var dg_W = $(window).width();
$('#wrap').css({'height':dg_H,'width':dg_W});
function anim() {
    $("#wrap img.bgfade").first().appendTo('#wrap').fadeOut(1500);
    $("#wrap img").first().fadeIn(1500);
    setTimeout(anim, 3000);
}
anim();})
$(window).resize(function(){window.location.href=window.location.href})

Updated

I have updated the script. Actually, after re-sizing the browser we have to update the width/height of div#wrap. So, I am going to reload this window, when ever browser will re-size. It will help to re-calculate all these and refresh the animation. Div#wrap will re-size according to browser window and play animation smoothly.

view demo

You may like:

Posted by: Dhiraj kumar

Advertisements

19 thoughts on “Animate Full-Page Multiple Background images with fade-in & fade-out effect – jQuery

  1. Hello

    Great script works very well for the fade in fade out part.
    I only have a problem with the proportional resize of the images when broswser is resized the images are streched but not proportionally .

    Have you updated the script like you said or is it in a near future

    Thanks

    Thomas

    • Hi Dhiraj,

      Thanks for the scrpt,, I am trying to get it working in WordPress but I can’t figure it out.

      I have added the CSS to my styles.css file and the HTML I have added into the page I want it to work on. I have added the jQuery into a .js file and saved it to my themes js folder,, I have added an wp_enqueue_script to my functions but it’s not working for me!

      Do you know where I am going wrong?

      Thanks,
      Christian

  2. Sorry to say dheeraj but there is some issue i have figure it out check out your image it’s beeing squeezed when you do this by width and and in 640x mobile resolution there is horz scroll in page
    you image streching it’s not original width and not fully responsive..

  3. Sorry to say dheeraj but there is some issue i have figure it out check out the fade in and fade out effect not work smoothly on all browser. in Mozilla browser working fine but check the others browser.

    Thanks.

  4. Dhiraj,

    On a much simpler scale.. what would I need to do, to use only one background image, and have that image fade in as you do here? I tried using only one image, but it keeps showing the image, fading out, then showing it again.

    Thanks,
    –Johnnie

  5. Dear Dhiraj,
    Thanks for this part of code is very useful and simple.
    I am new in jquery and I want add something in this example but can’t find the right way.
    I want to display some images in a row and after the last image to “jump” to an other .html page.\
    I tried using ” function() {
    window.location.href = “main.html”;
    }); ”
    but i can’t compine it in a right way. Can you please suggest me a solution on this?
    Thank you very much in Advance.

  6. hi
    this works perfectly on my mac but on an iPhone or iPad when i scroll up and down the page the images moves up a fraction and then the site refreshes on its own. this means that you can’t scroll to far down the page as it reloads to the top again and again.
    any advice welcome.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s