This example shows how to use a Dial widget to animate an image sprite.
Drag the Dial handle, or use the keyboard arrow keys to see the duck image "animate".
Lot #562
Duck Decoy - Thomas Jefferson
Hand carved and signed by Thomas Jefferson. circa 1785. Native hardwoods, stains, pigments. Glass bead eyes.
Opening bid $93,000
The Image Sprite
![]()
The Markup
The <div id="duck"></div> element will have the sprite as its background-image.
The <div id="demo"></div> element will contain the dial.
<div class="container">
<div id="duck"></div>
<div id="demo"></div>
<div id="text">
<h3>Lot #562</h3>
<h2>Duck Decoy - Thomas Jefferson</h2>
<p>
Hand carved and signed by Thomas Jefferson.
circa 1785. Native hardwoods, stains, pigments.
Glass bead eyes.
</p>
<p>
Opening bid $93,000
</p>
</div>
</div>
The JavaScript
The stepsPerRevolution attribute of the Dial
is given a value equal to the number of frames in the sprite.
On valueChange of the dial, the background-position of <div id="duck">
is changed to a new multiple of the
width of one frame in the sprite.
<script type="text/javascript">
YUI().use("dial", function(Y) {
var oneFrameWidth = 300,
framesInSprite = 13;
var dial = new Y.Dial({
min: 0,
max: 26000,
value: 13000, // initial value in the middle of a large range allows rotation both ways
minorStep: 1,
majorStep: 2,
stepsPerRevolution: framesInSprite,
diameter: 150
});
dial.render('#demo');
// Reposition the duck sprite background image
dial.on( "valueChange", function(e){
// Handle values greater than one revolution
var moduloValue = (e.newVal % framesInSprite);
Y.one('#duck').setStyle('backgroundPosition', (moduloValue * -oneFrameWidth) + 'px 0px');
}, '#duck' );
});
</script>
Complete Example Source
<style>
.example {
background-color: #59554F;
text-align: center;
}
.example .container {
text-align: left;
position: relative;
width: 554px;
margin: 10px auto;
padding: 0;
font-family: georgia;
}
.example #demo {
position: absolute;
top: -10px;
left: 350px;
}
.example #duck {
width:300px;
height:188px;
background:url(../assets/dial/images/sprite_duck.jpg) no-repeat;
background-position: 0 0;
border:solid 1px #958A71;
-moz-box-shadow:7px 7px 10px rgba(0,0,0,0.3);
-webkit-box-shadow:7px 7px 10px rgba(0,0,0,0.3);
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.example .yui3-dial-label {
visibility:hidden;
}
.example .yui3-dial-north-mark {
visibility:hidden;
}
.example .yui3-skin-sam #demo .yui3-dial-ring {
-moz-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
}
.example #text {
color:#C5B291;
}
.example #text h2 {
font-size:261%;
color:#EEE5D6;
text-shadow: 2px 2px 7px #000;
margin: 0;
font-family: georgia;
}
.example #text h3 {
color:#EEE5D6;
font-size: 100%;
margin: 0.6em 0;
font-family: georgia;
}
.example #text p {
margin: 0.5em 0;
font-size:135%;
line-height: 1.2em;
}
</style>
<div class="container">
<div id="duck"></div>
<div id="demo"></div>
<div id="text">
<h3>Lot #562</h3>
<h2>Duck Decoy - Thomas Jefferson</h2>
<p>
Hand carved and signed by Thomas Jefferson.
circa 1785. Native hardwoods, stains, pigments.
Glass bead eyes.
</p>
<p>
Opening bid $93,000
</p>
</div>
</div>
<script type="text/javascript">
YUI().use("dial", function(Y) {
var oneFrameWidth = 300,
framesInSprite = 13;
var dial = new Y.Dial({
min: 0,
max: 26000,
value: 13000, // initial value in the middle of a large range allows rotation both ways
minorStep: 1,
majorStep: 2,
stepsPerRevolution: framesInSprite,
diameter: 150
});
dial.render('#demo');
// Reposition the duck sprite background image
dial.on( "valueChange", function(e){
// Handle values greater than one revolution
var moduloValue = (e.newVal % framesInSprite);
Y.one('#duck').setStyle('backgroundPosition', (moduloValue * -oneFrameWidth) + 'px 0px');
}, '#duck' );
});
</script>