YUI Library Home

YUI Library Examples: Animation Utility: Animated Scrolling

Animation Utility: Animated Scrolling

This demonstrates how to use the YUI Animation to animate the scrolling of an HTMLElement. Click the button to begin the demo.

Sed pretium leo a quam. Sed placerat cursus odio. Duis varius mauris luctus enim. Sed augue. Vivamus malesuada pretium orci. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent et ante. Praesent convallis. Pellentesque sit amet leo. Ut convallis. Curabitur tincidunt, ipsum facilisis ultricies bibendum, eros dolor venenatis odio, id rutrum purus sem ac sem. Donec vel enim. Quisque purus. Vivamus fringilla, nibh sit amet blandit suscipit, dui arcu viverra magna, id consectetuer dui orci tincidunt neque. Morbi eget libero. Phasellus tempor. Duis dapibus. Pellentesque nisi arcu, mollis in, euismod non, fermentum sit amet, neque.

Animated Scrolling

The YUI Animation Utility allows you to animate the scroll position of an HTMLElement.

For this example, we will animate the scroll position of a <div> element named demo. The scroll attribute, introduced in the YAHOO.util.Scroll subclass, accepts an optional control field of one or more control points

Add a little style so that we can see the animation in action:

Create the demo element and a button to run the animation:

Now we create an instance of YAHOO.util.Scroll, passing it the element we wish to animate, and the scroll attribute (an array of [left, top] scroll values), with the scroll amount we are animating:

The final step is to call the animate method on our instance to start the animation. The button will be the trigger that begins the animation sequence:

This is an example of animating the scrolling of an HTMLElement.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings