Search within TutorialsPark

Javascript Animation


Using JavaScript to create Animation and Slideshow Effects


Javascript Images: Creating a SlideShow

In the below demo a SlideShow is created using a script which cycles a set of Images.

The script uses a timer function to replace Images in the slideshow after a set Interval.

Example: JavaScript Images: Replacing Images Dynamically

Give it a TRY! » Note: The image constructor is used to preload Images and cache it.


Javascript Images : Animation and Timers

An animation is created by replacing one Image frame with another at speed such that it appears to be a moving Image.

Animations can be created using JavaScript by using a timer which replaces one image frame with another.

The below demo uses two timer function setTimeout() and setInterval() to execute JavaScript codes at set intervals

Example: JavaScript Images: Animation using Timers.

Give it a TRY! » Note: The setTimeout() function calls animation() repeatedly every 800ms.


Javascript Images : Dynamic Progress Bars

Height and width of the image or any other DOM elements can be altered using Javascript.

The below demo increases the width of the progress bar after set time intervals making it appear dynamic .

Example: Javascript Images: Dynamic Progress Bar

Give it a TRY! » Note: The width of bars increases every 800ms, until the size reaches 400px.