468,727 Members | 1,405 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,727 developers. It's quick & easy.

During crossfade, page background intrudes

I found a script to crossfade between two images that works
okay except that in the middle of a fade when both images
have equal opacity, the combined images also are tinted
by the page background color. Evidently the images are
alpha-composited not only with each other, but by default with
the background as well, creating an effect I definitely
do not want. I demonstrate this at
http://cpacker.org/afader
in which I use a blue background to make the effect obvious.
As far as I can tell, nothing in the script
http://cpacker.org/afader/xfade2.js
is doing this explicitly and so I don't know at what level this
rogue compositing is being done or whether I can gain
control over it in Javascript at all. Any ideas would be
appreciated.

--
Charles Packer
http://cpacker.org/whatnews
mailboxATcpacker.org
Jul 29 '08 #1
4 1408
On Jul 29, 3:01*pm, Charles Packer <mail...@cpacker.orgwrote:
I found a script to crossfade between two images that works
okay except that in the middle of a fade when both images
have equal opacity, the combined images also are tinted
by the page background color. Evidently the images are
alpha-composited not only with each other, but by default with
the background as well, creating an effect I definitely
do not want. *I demonstrate this athttp://cpacker.org/afader
in which I use a blue background to make the effect obvious.
As far as I can tell, nothing in the scripthttp://cpacker.org/afader/xfade2.js
is doing this explicitly and so I don't know at what level this
rogue compositing is being done or whether I can gain
control over it in Javascript at all. Any ideas would be
appreciated.
An opacity of less than one means that the image is somewhat
transparent, so there's no way to avoid seeing the background through.
But you probably ought to set up the target image below the current
image (and with opacity= 1.0), and fade just the current image from
opacity= 1.0 to opacity= 0.0.

--Jorge.
Jul 29 '08 #2
On Jul 29, 7:16*pm, Jorge <jo...@jorgechamorro.comwrote:
On Jul 29, 3:01*pm, Charles Packer <mail...@cpacker.orgwrote:
I found a script to crossfade between two images that works
okay except that in the middle of a fade when both images
have equal opacity, the combined images also are tinted
by the page background color. Evidently the images are
alpha-composited not only with each other, but by default with
the background as well, creating an effect I definitely
do not want. *I demonstrate this athttp://cpacker.org/afader
in which I use a blue background to make the effect obvious.
As far as I can tell, nothing in the scripthttp://cpacker.org/afader/xfade2.js
is doing this explicitly and so I don't know at what level this
rogue compositing is being done or whether I can gain
control over it in Javascript at all. Any ideas would be
appreciated.

An opacity of less than one means that the image is somewhat
transparent, so there's no way to avoid seeing through it.
But you probably ought to set up the target image below the current
image (and with opacity= 1.0), and fade just the current image from
opacity= 1.0 to opacity= 0.0.
A demo : http://preview.tinyurl.com/5exjxk

--Jorge.
Jul 29 '08 #3
On Jul 29, 9:01*am, Charles Packer <mail...@cpacker.orgwrote:
I found a script to crossfade between two images that works
okay except that in the middle of a fade when both images
have equal opacity, the combined images also are tinted
by the page background color. Evidently the images are
Lousy script, which is typical of scripts you find floating around the
Internet.

The setOpacity function has the old FF blink fix in it:

function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}

That first if clause looks suspiciously like the old FF blink fix.
Perhaps that is the problem. Search the group for a better setOpacity
function.
Jul 29 '08 #4


Jorge wrote:
On Jul 29, 7:16�pm, Jorge <jo...@jorgechamorro.comwrote:
An opacity of less than one means that the image is somewhat
transparent, so there's no way to avoid seeing through it.
But you probably ought to set up the target image below the current
image (and with opacity= 1.0), and fade just the current image from
opacity= 1.0 to opacity= 0.0.

A demo : http://preview.tinyurl.com/5exjxk

Ahh! I understand now. Thanks very much.

--
Charles Packer
http://cpacker.org/whatnews
mailboxATcpacker.org
Jul 30 '08 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by erik | last post: by
6 posts views Thread by scottyman | last post: by
9 posts views Thread by bryonone | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.