spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column18


JavaScript Animations, Part I

Developer News
Google Going Native With Chrome
Mozilla Fixes Firefox Flaws as 3.5 Release Nears
Microsoft and Novell Still Bosom Buddies

If you're using a fourth-generation browser, you can't miss the animated images on this page. Watch them move around simultaneously, in straight lines and circles. In this column we'll show you how to animate elements on a page.

Despite many new technologies such as Java, JavaScript, and Dynamic HTML, the Web is still mostly static. After reading this column you'll know how to bring your pages to life with a pre-packaged JavaScript library.

But that's not it. This is only the first in a series of two columns dealing with animations. In this column we'll discuss the animation "engine," as well as two basic paths -- the straight line and the circle. In the next episode we'll cover ellipses, sine curves, and much more, including useful bakward compatible implementations. In this column you'll learn:

  1. How to create an animation object.
  2. How to retrieve the element's left and top properties..
  3. How to set the element's visibility.
  4. How to move the element to a specified position.
  5. How to slide the element.
  6. How to move the element in a circular path.
  7. How to animate the element.
  8. How to define the animated elements and the animations.

At this point you may choose to view the code for the document, as well as the external animation library.

More Resources from Doc JavaScript
Columns Popular Columns Tips Tools
Latest Columns
41-50 | 31-40 | 21-30
11-20 | 1-10
Working with Windows
JavaScript and Frames
Bookmarklets
Random Tips
Personalized Tips
RSS Channels
Menu Builder
Rollover Builder
Rotation Builder
Reference Tip Categories (want one?)
Links
For Your Site
Did you learn something? Do you like this site? Please link to us!

http://www.internet.com

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
XML and PHP Simplified · Creating a ASP.NET Contact Form · Data Filtering with PHP
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Intel to Host Live Nehalem Q&A · 12 Tips to Troubleshoot Network File-Sharing · 10 Tips for Selling on Kijiji


Created: April 21, 1998
Revised: April 21, 1998

URL: http://www.webreference.com/js/column18/