By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,567 Members | 1,185 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,567 IT Pros & Developers. It's quick & easy.

During crossfade, page background intrudes

P: n/a
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
Share this Question
Share on Google+
4 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a


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.