“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.
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.
You may like:
- Hot Tea / Coffee with Animated Smoke Effect – jQuery & CSS
- Cool Typography Effects With CSS3 and jQuery
- Hover and Click Trigger For CIRCULAR Elements With jQuery
- Random 3D Explosions, 3D clouds – Effects with CSS 3D and jQuery
- Cool Animated Fire Effects with CSS3 and jQuery
- jQuery Plugin for Cartoon-like Background Image Sprite Animation – AniDG – (alernative to animated Gif)
- DG_Slider – An Ultimate jQuery Content Slider Plugin
- Full-Screen Responsive jQuery Banner Slider – Responsive_DG_Slider
- Responsive jQuery Banner Slider with Pagination circles – Responsive_DG_Slider
Posted by: Dhiraj kumar
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
Hey Thomas, thanks for your comment. I’m glad you like my articles.
thanks for your script.
Anyway to find a solution about the ratio of the resized image ? it’s not proportional…
its not working..
Hey Mallikarjun, thanks for your comment.
Have you checked the demo..? Please check, it is working fine.. http://demo.web3designs.com/jquery-animated-background-images-fade-in-out.htm
May I know the browser and it’s version in which you are checking.
I want to have thorough instruction to use this wonderful creation. please send me a guide line.
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
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..
Hey Durgesh, thanks for your comment.
The gallery seems to start with image number 2. Why does it not start with the first image?
Heyy Dhiraj can u plz explain the jquery part line by line..i’m new to jquery
hello can i get a place to download the demo so i can understand how to customise it to work for me. thanks
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.
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
thanks. very good
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.
Thanks a lot..
I tried like a hundred methods but only this one worked..
Thanks once again.
Thanks a lot Dhiraj for your effective code. Really helpful 🙂
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.