Effects

Since everybody is raving about "effects" on websites nowadays, I've added a small library that allows transition effects. It is fairly flexible, and easy to expand.

Several effects can be combined to be either applied simultaneously (though they can still have differing durations) or queued.

Only few effects are currently available, more will be added if needed.

Flavors

Transition    (not used for fade an tweenColor effects)
moveRelative Play roll (randomly up|down) Play slide (randomly up|down|left|right) Play fade Play tweenColor Play

Nein, meine Texte les ich nicht, so nicht, stöhnte Oxmox. Er war mit Franklin, Rockwell und dem halbtaxgrauen Panther Weidemann in Memphis (Heartbreak Hotel) zugange. Sie warteten auf die fette Gill...

Nein, meine Texte les ich nicht, so nicht, stöhnte Oxmox. Er war mit Franklin, Rockwell und dem halbtaxgrauen Panther Weidemann in Memphis (Heartbreak Hotel) zugange. Sie warteten auf die fette Gill...

Nein, meine Texte les ich nicht, so nicht, stöhnte Oxmox. Er war mit Franklin, Rockwell und dem halbtaxgrauen Panther Weidemann in Memphis (Heartbreak Hotel) zugange. Sie warteten auf die fette Gill...

Nein, meine Texte les ich nicht, so nicht, stöhnte Oxmox. Er war mit Franklin, Rockwell und dem halbtaxgrauen Panther Weidemann in Memphis (Heartbreak Hotel) zugange. Sie warteten auf die fette Gill...

Nein, meine Texte les ich nicht, so nicht, stöhnte Oxmox. Er war mit Franklin, Rockwell und dem halbtaxgrauen Panther Weidemann in Memphis (Heartbreak Hotel) zugange. Sie warteten auf die fette Gill...

Simultaneous effects

vxJS.element.register(this).
  fx("moveRelative", { to: new Coord(500, 0), duration: 3, transition: "boing" }).
    fx("fade", { to: 0, duration: 3 });

Click the blue box.

Queued effects

vxJS.element.register(this).
  fx("moveRelative", { to: new Coord(500, 0), duration: 2, transition: "accel" }).
  fx("tweenColor", { to: "#c20", what: "backgroundColor", duration: 2 }).
    pause(1).
      fx("fade", { from: 1, to: 0.3, duration: 2 }).
    	pause(0).
    	  fx("tweenColor", { to: "#04e", what: "backgroundColor" }).
    	    pause(1).
              fx("fade", { from: 0.3, to: 1, duration: 2 });

Click the blue box.

"Interupting" fx-chains with pause calls, will queue effects and add the specified pause before executing a block of (simultaneously executed) effects. If a mere queuing without delays is needed, just add pause(0) between the effects.
In the above example two simulataneous effects are followed - after a one second break - by a sequence of queued effects.
X