Hi,
I'm changing my background-image css property using Mootools:
$(document.body).setStyle('background-image','url(' + pBackground + ')');
And it's its working, but how can a make one fade effect between picture change?
Thanks, Pedro
A:
Not sure of what i am saying, BUT since it's not a part of the html document, it's not an 'element' so javascript should not be able to work on it.
But, just an idea, and depending on how your site looks, you could try to set an opacity, to simulate an opacity on the body, which can lead to the effect you want..
Boris Guéry
2009-05-26 22:56:17
+3
A:
You can't fade a background specifically... you have to fade the element that has the background.
For your situation, I would suggest using a <div> that encompasses everything in the <body> of your HTML, ie:
<html>
<body>
<div id="main">
</div>
</body>
You could then set the background-image property of the #main div, and do something like this:
function backgroundChange(pBackground)
{
var m = $('main');
var fx = new Fx.Tween(m,{
duration: 1500,
onComplete: function(){
m.setStyle('background-image','url(' + pBackground + ')');
m.fade('in');
}
});
fx.start('opacity',1,0);
}
zombat
2009-05-26 23:10:42
This is MooTools 1.2 code by the way. The Fx classes are a bit different if you're using 1.1.
zombat
2009-05-26 23:15:54
Thanks, I will test it. Thank you so much
Pedro
2009-05-27 08:09:42
Works.. thanks, thats the main ideia
Pedro
2009-05-27 22:40:25
+1
A:
Just as a caution, any child elements of that div will also fade, so if you want the background to fade while elements over it remain opaque, you will need to absolutely position any child elements.
Absolutely positioning all elements brings other problems with it when you have variable length content, but there are ways around that too.
Andru
2009-05-28 11:44:43
Yes! I found that problem, but I define the child elements outside the fade div with absolute positions, looks great now!
Pedro
2009-06-01 14:20:24
A:
WHERE MUST i WRITE THE DIFFERNT BACKGROUND IMAGES?THIS CODE IS FOR THE HTML?THANK YOU! FLOR
flor
2010-02-05 18:23:39
A:
@zombat: nice solution; may you help me with the right sintax in mootools v1 please? Thank you in advance.
bobighorus
2010-06-08 17:01:05
A:
where is pBackground defined at? Where is the code calls this funcation and lists the images to be rotated?
Miguel DUncan
2010-07-09 20:44:21