DHTML Animations are created by using the Java Script programming language with an object model of elements on a web page.


This page is optimized for (IE) Internet Explorer
























































Image Transition
Effect Example
(below)


Moving Boxes and Images
Animated sequences can be invoked from many different types of events - page opening, clicking on a link, timer events, etc.



Fly Across Notification Example

When the page first displays, an animated notification of a fictitious close out sale flies in from the left, pauses, then flies up and off.

CLICK HERE to Fly the Notification back in from the top



Hovering Blue Discus


Hover the Blue Discus Internet Explorer
and Opera only.


Click on the buttons below.

  



Bats Chasing Your Pointer

Show Flying Bats
Internet Explorer
and Opera only.

This example also illustrates the technique of sequencing through images (flapping wings) for an animation effect (like a GIF animation).

Click on the buttons below.

      (if they let you)

User Moveable Boxes and Images
The Glossary in the left sidebar is an example of a draggable box. You can drag it to different positions on the web page as well as open and close it.

Hold down the mouse button and drag the Glossary to different locations on the web page.

Click on the below button to re-open the Glossary.


Slide Shows and Image Effects
Many different styles of slide shows can be presented. The following example automatically sequences through a set of slide images. Random sequencing and user stepping are some of the other usual variations.




Animated Text Styles
One or more text messages can be animated in place by sequencing through text style settings. The following illustrates some of the possibilites.





Sticky Boxes Sample

DHTML stands for Dynamic HTML -
a web standard for adding motion, interaction and effects to pages.


Browsers Differ in their handling of DHTML!!

The object model & DHTML features differ between browsers based on the IE versus the Netscape models.

IE, for example, provides more image effects.































Fly Out Example

Click on the
Fly Out tab
on the right =>









Expanding and
Fading Image Effect
(below)











DRAGGABLE
GLOSSARY

Click, hold and
drag this to
other locations
on the web page.

 HTML: xxxxxxxxxx

 DHTML: xxxxxxxxx

 Java Script: xxxxxx

 Drag: xxxxxxxxxxx

 Pop-Up: xxxxxxxxx

Fly Out Example
A Fly Out panel can
support virtually any
type of content and
interaction.
Blue Discus Home Page