#

# 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>