Example: Image Sprite Animation with Dial

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>