JavaScript Effects
These effects demonstrate several principles:
- OO programming in JavaScript—inheritance of "class" and instance methods and properties, method overriding and initializer chaining. The effects below have a class hierarchy three levels deep.
- Amazingly clean HTML code. Event handlers are bound to HTML elements in a trailing JavaScript snippet.
The only thing you have to do in the HTML is specify
id
attributes for trigger and target elements. - Dynamic functionality which degrades gracefully. The demo headings below work as expected when scripting is disabled.
- Using a multicaster to bind multiple event handlers to the same HTML element.
- Customizing handler properties at time of binding. Parameters are passed to the handler constructor to specify behavior.
Abstract Effect
The base class of all effects. Handles triggering, scheduling and stopping.
Override doStart()
, doStep()
and doFinish()
in subclasses to implement effects.
Throb Effect
Abstract Text Effect
The base class of effects that manipulate individual letters. Builds upon the AbstractEffect handler. Breaks the text in the specified element into individually manipulatable SPANs.
Nervous Text Effect
Jumpy Text Effect
Wave Text Effect
Plots the letters in the SPAN along a portion of a sine wave.
Glint Text Effect
Explode Text Effect
Related technology
Prototype library
Rico AJAX toolkit
jQuery library
Ben Nolan's Behaviour library
Dojo Toolkit
Packer A JavaScript Compressor/Obfuscator
Java2Script Object Oriented Programming in JavaScript