During crossfade, page background intrudes

Discussion in 'Javascript' started by Charles Packer, Jul 29, 2008.

  1. 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
    Charles Packer, Jul 29, 2008
    #1
    1. Advertising

  2. Charles Packer

    Jorge Guest

    On Jul 29, 3:01 pm, Charles Packer <> wrote:
    > 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.
    Jorge, Jul 29, 2008
    #2
    1. Advertising

  3. Charles Packer

    Jorge Guest

    On Jul 29, 7:16 pm, Jorge <> wrote:
    > On Jul 29, 3:01 pm, Charles Packer <> wrote:
    >
    > > 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.
    Jorge, Jul 29, 2008
    #3
  4. Charles Packer

    David Mark Guest

    On Jul 29, 9:01 am, Charles Packer <> wrote:
    > 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.
    David Mark, Jul 29, 2008
    #4
  5. Jorge wrote:
    > On Jul 29, 7:16�pm, Jorge <> wrote:
    > > 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
    Charles Packer, Jul 30, 2008
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. mason66
    Replies:
    0
    Views:
    402
    mason66
    Jul 27, 2006
  2. JWL
    Replies:
    4
    Views:
    569
    Michael Winter
    Sep 26, 2006
  3. traveller
    Replies:
    0
    Views:
    1,168
    traveller
    Jan 8, 2008
  4. jc
    Replies:
    3
    Views:
    1,701
  5. Dmitry Korolyov

    Datagrid not updated during delete, but updated during insert and update

    Dmitry Korolyov, Sep 22, 2003, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    397
    Dmitry Korolyov
    Sep 22, 2003
Loading...

Share This Page