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 motion of an HTMLElement along a curved path using control points.

The first thing we need to do is load the Animation source file and dependencies:

For this example, we will animate the 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:

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

Copyright © 2007 Yahoo! Inc. All rights reserved.

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