Making fancy websites without Flash 2: Animating background image
This is a continuation of the Making fancy website without Flash entry from a few days ago. To make the story short – I will try and show you some jQuery alernatives for popular Flash animation. We will start with a
Smooth background image swap – jQuery Background-Image Transition Plugin
I will show you an example right now, so you know what I am talking about.
What we basically do is:
- Create an additional hidden <div> element on top ( using z-index ) of the element we want to animate
- Load the new image in the in the cache in the background, so that the effect is smooth
- Set the new src to the new <div> element
- fadeIn() the new <div> element so that it creates the illusion that the background image of our initial div is smoothly changing
- Optional step – if we need to change the image once again, go from 2 to 5 but setting the new src to our initial <div> and then using fadeOut() on the new element, so that it disappears and the new image is set as background to the old <div>. This way we won’t have an infinitive increase of the z-index and won’t actually change the z-index of the initial <div>
OK, let’s get to work, we will start with the HTML markup:
<div id=”backImage”></div>
Well, that was pretty easy: we have a simple <div> element with some demo text and just next to it we add that additional <div> which we will need for the animation.
So, here is the CSS:
#backImage { z-index: -2; height:600px; width:800px; background-image: url('path/to/initial/img'); } |
We just set a height and width of the element so that we are sure the image will actually be shown. It is generally a good idea to have the z-index set to a negative number while other elements have a greater z-index value.
We will use jQuery’s Background-Image Transition Plugin for our example.
First, add jQuery and the plugin
<script lang=”Javascript” src=”path/to/jQuery.js” type=”text/javascript”> </script>
<script lang=”Javascript” src=”path/to/jQuery.bgImageTransition.js” type=”text/javascript”> </script>
Then, at the end of the document, add the following lines:
jQuery( function(){ jQuery('#backImage').bgImageTransition( 'path/to/new/image', { duration: 'slow', easing: 'linear', helperElementId: 'backImage2', zindex: -1 callback: function(){ //do sth } }); }); |
The only mandatory argument is the path to the new image. The optional second argument is an object holding some tweaks. You can set the desired duration, easing, helperElementId ( which is generated by the plugin ), z-index of the helperElement ( by default it will take the selected element’s zindex and increment by 1 ) and a callback function in case you want to execute some functionality when the transition is over.
Tags: Javascript, jQuery, html, animation
April 5th, 2009 at 7:14 pm
I was looking for something like this to realize a menu with fading background effect like with the “BackgroundColor”.
I was trying something like this:
[code]
$(document).ready(function(){
$(“.buttonOne”).hover(function(){
$(this).BgImageTransition( ‘img/overstate.jpg’ );
},function(){
$(this).BgImageTransition( ‘img/standardstate.jpg’ );
});
});
[/code]
but it didn’t work out very well. The images seems to “pulsate”. I am not that good in jQuery so any help would be appreciated.
April 5th, 2009 at 7:24 pm
…. or maybe just fade in a background-image on hover and fade it out again on mouseleave
April 6th, 2009 at 3:03 pm
@Nik: what kind of element is .buttonOne? Can you show me an example of that code?
April 6th, 2009 at 6:18 pm
Hi Georgi,
what I want to do is fading the background of a menu element/Button, like a hover, but with a smooth fading effect
This is my testing sample code:
buttonOne
and the css:
#buttonOne {
background-image: url(“img/standardstate.jpg”);
display: block;
width: 129px;
height: 41px ;
}
ul {
list-style-type: none
}
April 7th, 2009 at 3:51 pm
@Nik: first, in the css you refer to the element’s ID but in the js you do it for a class. And I don’t think the plugin will work for a button.. I have never tried it personally. You may want to download the latest version as it has some enhancements.
Let me know, if it works.
April 7th, 2009 at 5:38 pm
yes, of course…. class and Id should be same, I have it like that. But there is still the same problem.
What is the latest version ?
April 7th, 2009 at 6:07 pm
you can get it from http://plugins.jquery.com
May 6th, 2009 at 9:38 pm
This scripts does not work in IE8
http://www.ovalpixels.com/bgImageTransition/
Detail
Agent utilisateur : Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 2.0.50727; .NET CLR 1.1.4322; InfoPath.1; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648)
Horodateur : Wed, 6 May 2009 19:38:02 UTC
Message : Argument non valide.
Ligne : 12
Caractère : 12949
Code : 0
URI : http://www.ovalpixels.com/bgImageTransition/js/jquery.min.js
July 15th, 2009 at 3:28 am
is there any example of using multiple background images? thanks.
July 15th, 2009 at 10:44 am
Actually, you can use http://www.gruppo4.com/~tobia/cross-slide.shtml
July 27th, 2009 at 6:47 am
Dear Georgi
This script work well on my site, but when i add “slide panel” effect “on click event” above the background slideshow, my slide panel is not working well, can u help me with this ??
July 27th, 2009 at 8:29 am
Rudi,
How do you attach the event on that panel? What slide panel effect exactly do you use?
July 27th, 2009 at 11:17 am
i use the same jquery script from this site http://www.learningjquery.com/2006/09/slicker-show-and-hide
i wanna show panel on click event (Show the box)
and hide it also on click (Hide the box)
any idea ??
July 27th, 2009 at 8:50 pm
can you paste your html, css and js code here?
July 28th, 2009 at 5:19 am
im sorry, i cant paste the code here
here’s the address
http://balisidenotes.com/demo/home02.html ( html )
http://balisidenotes.com/demo/slicker.js ( Jquery )
thx for your help
July 28th, 2009 at 9:59 am
use pastebin
July 28th, 2009 at 10:19 am
mmm you can see the code here
http://balisidenotes.com/demo/home02.html
http://balisidenotes.com/demo/slicker.js
thx for reply man 🙂
July 28th, 2009 at 10:44 am
here’s the address
http://pastebin.ca/1509785
thx for da help
July 28th, 2009 at 10:48 am
I guess that is due to zIndex – try setting the zIndex of the panel to a high level.
July 28th, 2009 at 11:40 am
yea i’ve try that i set
#slickbox { z-index : 100; }
its working fine on the first background image of the slideshow, but when image changing to the second one, the “show / hide” link is not working
July 28th, 2009 at 11:50 am
set the zindex of the underlying wrapper to 1
July 28th, 2009 at 12:04 pm
mmm still not workin man,
you can see the action on http://www.balisidenotes.com/demo/home02.html
i’ve upload all include the css, u can check it all there
thx again for your time
July 30th, 2009 at 8:37 pm
Hi Georgi,
This is a great script, and helping with a major section of a site I am working on.
However, the images need to play in a definate order (there are 5 photos) and currently they play in a random order.
Also, between each photo it returns to the first photo (the one declared in the CSS). EG – Photo1, Photo 3, Photo 1, Photo 5, Photo 1, Photo 3 etc..
I just need them to go Photo1, Photo2, Photo3, Photo4, Photo5 – REPEAT
I would be extremely grateful if you have a solution to this.
Regards,
Tom
July 30th, 2009 at 9:50 pm
@Tom: The plugin itself does not rotate any images. The script I am using in the demo uses Math.random() – you can change that.
July 31st, 2009 at 9:50 am
Thanks Georgi.
I don’t suppose you know the JS that should be used instead of Math.random()
I’m afraid my JS knowledge is very limited..
Thanks,
Tom
July 31st, 2009 at 12:03 pm
@Tom: I cannot write your js since you know your project much better and your job to do it. Create an array with the images and loop through it instead of using random()
August 28th, 2009 at 12:32 am
Hi Georgi,
Great script! but i have to apply it on body tag instead of div..Could u plz guide?
Thanks,
karthick
August 28th, 2009 at 8:53 am
You should I am no sure whether you can. Just create a new div element the first child of the body and make it “snap” the body borders. Then make it switch images.
December 11th, 2009 at 4:44 pm
This is very helpful. However, in your demo, Rosso Castilla.JPG never loads?
April 2nd, 2010 at 3:40 am
I’m also trying to run through a list of images, which was easy enough to do, however it alternates to the initial image every other time.
So instead of: Image1.jpg, Image2.jpg, Image3.jpg, Image4.jpg, Image5.jpg…..
I’m getting: Image1.jpg, Image2.jpg, Image1.jpg, Image4.jpg, Image1.jpg, Image6.jpg…..
May 7th, 2010 at 11:13 am
I used a modulo function to send the images sequentially and to wrap around the index, but the issue is the same as Jason has.
The problem appears to be related to your point number 5 in the post.
The script never replaces the image used for the initial div. I will try to fix it myself, but I am brand new to Javascript.
For those struggling with a sequential function try the following.
1) use the array index instead of a string to set the next image
eg: $(‘#banner’).BgImageTransition(‘/images/featured/’+bgImages[currIndex]);
2) Set currIndex to 0 before calling setInterval
3) increment currIndex within setInterval like this
currIndex = ++currIndex % bgImages.length;
This will give you sequential indexes which wraps around to the 1st element when it reaches the upper bound of the array
July 19th, 2011 at 4:38 pm
Great help—thanks! Like a few people have mentioned, the optional “step 5” in the case of several photos was never explained, was it? The way the plugin natively works is alternating back to the initial image every time…
There’s got to be a way to change the initial div as well, so that when the HelperElement fades out, the next image is in place (or even if, once the HelperElement faded in, to set the same image as the initial background-image, so that when the HelperElement fades out, it doesn’t revert to the initial image, and you could just speed up the transition or something)…
Any help would be greatly appreciated… Thanks!
July 19th, 2011 at 5:03 pm
Actually, in the jquery.BgImageTransition.js file, I added this:
if (helperElement.css(‘display’) == ‘block’) {
$(this).css(‘background-image’,’url(‘+src+’)’);
}
just before the var tempImage = new Image(); statement.
Since the helperElement is the div that the plugin creates and toggles in and out in front of your original element (via z-index), I checked if the helperElement has “display:block” and then if so, changed the background-image to the original div (in my case). Seems to work! Now to test it in IE… =(
March 22nd, 2012 at 10:53 am
Hello Georgi,
The first comment of Nik was that it “pulsates” and I’ve stumbled on the same issue after fidling around with dom inspector and console.log I’ve realised that this happens because when the fading starts another element – helperelement is layered on top of original element. So the original element shoots “mouseleft the house” so it starts the fading back effect and it looks like “pulsate”.
So this transition cannot be used with hover on the same element.
The solution for hover was to add the .hover for the parent element then find the child element and fade it’s background to hover state and fade it back when mouse leaves.
Example:
$(‘#menu li’).hover( function() {
$(this).find(‘a’).BgImageTransition(‘image-hover.png’);
}, function() {
$(this).find(‘a’).BgImageTransition(‘image.png’);
}