duck.mustache revision 090376d4be54e832a15be873e1561b95d3e94e0a
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<div class="intro">
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte <p>This example shows how to use a `Dial` widget to animate an image sprite.</p>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte <p>Drag the `Dial` handle, or use the keyboard arrow keys to see the duck image "animate".</p>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<div class="example yui3-skin-sam">
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte {{>duck-source}}
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<h3>The Image Sprite</h3>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<p><img src="{{{componentAssets}}}/images/sprite_duck.jpg" width="676" height="33"/></p>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<h3>The Markup</h3>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<p>The `<div id="duck"></div>` element will have the sprite as its background-image.
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<p>The `<div id="demo"></div>` element will contain the dial.</p>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte {{>duck-markup}}
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<h3>The JavaScript</h3>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<p>The `stepsPerRevolution` attribute of the `Dial`
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forteis given a value equal to the number of frames in the sprite.
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn ForteOn `valueChange` of the `dial`, the `background-position` of `<div id="duck">`
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forteis changed to a new multiple of the
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Fortewidth of one frame in the sprite.
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte{{>duck-script}}
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<h3>Complete Example Source</h3>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte{{>duck-source}}