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

background-image animation

Expand Messages
  • pris_tcp
    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.
    Message 1 of 6 , Aug 29, 2006
    • 0 Attachment
      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();
      }
    • Matt Sweeney
      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
      Message 2 of 6 , Aug 29, 2006
      • 0 Attachment
        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
        >
        >
        >
        >
        >
        >
        >
        >
        >
        >
        >
      • Jack Slocum
        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
        Message 3 of 6 , Aug 30, 2006
        • 0 Attachment

          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
          > >
          > >
          > >
          > >
          > >
          > >
          > >
          > >
          > >
          > >
          > >
          >

        • sadi_kaputhra
          -thank you very much mail for me! -- In ydn- ... achieve ... and ... as
          Message 4 of 6 , Aug 30, 2006
          • 0 Attachment
            -thank you very much mail for me! -- In ydn-
            javascript@yahoogroups.com, "Jack Slocum" <jvs308@...> wrote:
            >
            >
            > 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 <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
            > > >
            > > >
            > > >
            > > >
            > > >
            > > >
            > > >
            > > >
            > > >
            > > >
            > > >
            > >
            >
          • Scott Schiller
            Rather than swapping out background images altogether, I would recommend trying out a sprite -based technique where you have tiles of images, like frames,
            Message 5 of 6 , Aug 30, 2006
            • 0 Attachment
              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.
               
               
              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
              > >
              > >
              > >
              > >
              > >
              > >
              > >
              > >
              > >
              > >
              > >
              >



            • pris_tcp
              Thanks for the recommendation! I will try it out. ... recommend trying out a sprite -based technique where you have tiles of images, like frames, inside a
              Message 6 of 6 , 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
                > > >
                > > >
                > > >
                > > >
                > > >
                > > >
                > > >
                > > >
                > > >
                > > >
                > > >
                > >
                >
              Your message has been successfully submitted and would be delivered to recipients shortly.