> Animation & Effects

Animation Tutorials (17) Document Object Model (21)

DHTML Animation
Learn how to make objects appear/disappear and move around the browser window using nothing more than some simple HTMLand stylesheets combined with a few Javascript commands.

Browser Resources
Not all browsers make the same resources available for running resource intensive Javascripts

Typewriter Text
Here's an animation script that is a bit different. This one dynamically types the content of the page onto the screen one character at a time just as if it were being entered on a typewriter.

Rotating Object
Set an image or block of text rotating clockwise around the web page.

Fireworks Effect
How would you like a fireworks display right on your web page. What's more this display doesn't even require any images as the entire effect is created using Javascript.

Falling Snow Effect
It can snow all year round on your web page if you install this special effects script.

Bubble Effect
Have bubbles moving up the screen in front of of your web page with this web page animation.

Wandering Hearts
This script (based on the code from the animation tutorials) puts two hearts on your web page that move randomly about the page. Will they ever get together? Will they stay together if they do? Maybe someone's heart will be broken.

Falling Leaves Effect
You can have leaves falling slowly down your web page if you install this special effects script.

Analog Clock
Lots of people have digital clocks on their web page. With this script you can go one better with an analog clock instead. The script provides for lots of different customizations so you can probably find a way to get it to display how you want.

Multiple Analog Clocks
The one thing that you can't do with my original Analog Clock script is to put two or more clocks on the same page. This version of the script allows you to do that.

Cross Browser Ticker/Marquee
Add a simple ticker/marquee to your page with this simple Javascript.

Vertical Scroller
You can fit a lot more content into a small space and add some movement to your web page with a vertical scroller. The content of the scroller will move slowly (or quickly) up (or down) the scroll box. Once it has scrolled right through it will start again. You can even put multiple scroll boxes on the same page.

Follow the Mouse Effect
A simple script to get an object to follow the mouse.

Spring After the Mouse
A script that has a number of objects attached to the mouse as if by a spring.

Fly-in Ad
Get your visitors to pay attention to an ad by having it fly into the centre of their browser window after your page finishes loading.

Expanding and Shrinking Text Banner
Create an attention grabbing text banner on your page by having the text expand and then shrink to be replaced by the next line of text.

Extended Tooltip
How to create fancy tooltips that work with most browsers using Javascript.

Scrolling Ad
This script displays an ad over your web page which moves slowly from side to side across the page until it has either crossed the page a specified number of times or the mouse pointer is moved over the ad. Once it has crossed the page the specified number of times the ad disappears.

Pop Up Menus
The Javascript tooltip script can be modified to produce popup menus.

Overlay Messages and Ads
Similar to the Javascript Tooltip Script, this script will place a message box temporarily over the top centre or top right of your page. Dare I suggest that it could contain advertising?