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.
+Note: be sure to add the yui3-skin-sam classname to the
+page's <body> element or to a parent element of the widget in order to apply
+the default CSS skin. See Understanding Skinning.
+
<body class="yui3-skin-sam"> <!-- You need this skin class -->+ + +
<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>
+
+
+