Loading ...
Sorry, an error occurred while loading the content.

4473Re: background-image animation

Expand Messages
  • pris_tcp
    Aug 30, 2006
    • 0 Attachment
      Thanks for the recommendation!
      I will try it out.


      --- In ydn-javascript@yahoogroups.com, Scott Schiller
      <idliketowork@...> wrote:
      >
      > Rather than swapping out background images altogether, I would
      recommend trying out a "sprite"-based technique where you have "tiles"
      of images, like frames, inside a single image. This should be much
      more efficient for a few reasons:
      >
      > 1) One image to load, less HTTP requests
      > 2) Less "work" by browser (theoretically) to reposition and render
      one background image rather than unloading, loading and displaying a
      new one
      >
      > The theory is simple - say, a DIV with a width and height specified,
      overflow:hidden (or clip:rect...), and a background image. You then
      modify the background left and top position attributes (x/y) to
      achieve animation much like the CSS Sprites method as described on A
      List Apart - effectively, you're moving a "film strip" inside the
      element rather than replacing images.
      >
      > http://www.alistapart.com/articles/sprites/
      >
      > You could also achieve the same effect by using an
      absolutely-positioned nested image as an alternate method, if
      background images don't work for your purposes.
      >
      >
      > Scott Schiller
      > Front-end Engineer, Yahoo! Photos
      >
      >
      > ----- Original Message ----
      > From: Jack Slocum <jvs308@...>
      > To: ydn-javascript@yahoogroups.com
      > Sent: Wednesday, August 30, 2006 2:32:34 AM
      > Subject: [ydn-javascript] Re: background-image animation
      >
      >
      > Using the animator library on my site built on YUI, you could
      achieve this effect pretty easily but you would have to write each frame.
      > var myDiv = new YAHOO.ext.Actor('myDiv', null, true);
      > myDiv.setStyle('background-image', 'url(yourImage.gif)');
      > myDiv.pause(.2);
      > myDiv.setStyle('background-image', 'url(yourImage2.gif)');
      > myDiv.pause(.2);
      > myDiv.setStyle('background-image', 'url(yourImage3.gif)');
      > myDiv.play();
      > ---
      > Jack Slocum
      > Yahoo! UI - Beyond the Examples
      > http://www.jackslocum.com/yui
      >
      > --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@> wrote:
      > >
      > > Hi,
      > >
      > > The ColorAnim class can only animate colors that it can calculate
      based
      > > on rgb or hex codes. You may want to consider using Flash to do
      > > animated image blending.
      > >
      > > Matt
      > >
      > > pris_tcp wrote:
      > >
      > > >Using the Yahoo.util.ColorAnim, I can animate background, text and
      > > >border colors. The first portion of the code which animates the
      > > >backgroundColor can work. However the second portion cannot work.
      Does
      > > >the background only applies to colors only, can I animate images
      as well?
      > > >
      > > >
      > > >Part 1
      > > >------------------
      > > >var attributes =
      > > >{
      > > > backgroundColor: { to: '#000000' },
      > > >};
      > > >
      > > >function fnCallback(e)
      > > >{
      > > > anim = new YAHOO.util.Anim(this.id, attributes, 0.1);
      > > > anim.animate();
      > > >}
      > > >
      > > >Part 2
      > > >------------------
      > > >var attributes =
      > > >{
      > > > backgroundImage: { to: 'url(test.bmp)' },
      > > >};
      > > >
      > > >function fnCallback(e)
      > > >{
      > > > anim = new YAHOO.util.Anim(this.id, attributes, 0.1);
      > > > anim.animate();
      > > >}
      > > >
      > > >
      > > >
      > > >
      > > >
      > > >
      > > >Yahoo! Groups Links
      > > >
      > > >
      > > >
      > > >
      > > >
      > > >
      > > >
      > > >
      > > >
      > > >
      > > >
      > >
      >
    • Show all 6 messages in this topic