1409N/A<div class="intro">

1409N/A <p>This example shows how to use a `Dial` widget to animate an image sprite.</p>

1409N/A <p>Drag the `Dial` handle, or use the keyboard arrow keys to see the duck image "animate".</p>

1409N/A</div>

1409N/A

1409N/A<div class="example yui3-skin-sam">

1409N/A {{>duck-source}}

1409N/A</div>

1409N/A

1409N/A<h3>The Image Sprite</h3>

1409N/A<p><img src="{{{componentAssets}}}/images/sprite_duck.jpg" width="676" height="33"/></p>

1409N/A

1409N/A<h3>The Markup</h3>

1409N/A<p>The `<div id="duck"></div>` element will have the sprite as its background-image.

1409N/A<p>The `<div id="demo"></div>` element will contain the dial.</p>

1409N/A<p></p>

1409N/A

1409N/A```

1409N/A {{>duck-markup}}

1409N/A```

1409N/A<h3>The JavaScript</h3>

1409N/A<p>The `stepsPerRevolution` attribute of the `Dial`

1409N/Ais given a value equal to the number of frames in the sprite.

1409N/A</p>

1409N/A<p>

1409N/AOn `valueChange` of the `dial`, the `background-position` of `<div id="duck">`

1409N/Ais changed to a new multiple of the

1409N/Awidth of one frame in the sprite.

1409N/A</p>

1409N/A```

1409N/A{{>duck-script}}

1409N/A```

1409N/A<h3>Complete Example Source</h3>

1409N/A```

1409N/A{{>duck-source}}

1409N/A```

1409N/A

1409N/A