Using Bezier curves with the script.aculo.us Javascript library

I originally developed the code for a project where images had to be presented as a "carousel" sliding on a gentle natural curve and fading into distance.

Beziér code

Bezier curve code based on a very nice article by Dan Pupius.

Effect.Curve

Effect.Curve is a straightforward rewrite of the Effect.Move code taken from the Script.aculo.us library which, together with the Prototype, takes care of all the magic.

Download

Download the example code here (.zip).

Bezier curves are frequently used in design work because of their "natural" flow. Modern JavaScript allows use of animation on web pages and Bezier curves can be employed to create eye-catching movements.


new Effect.Curve('box',{curve: new BezierCurve(
  185, 85,  // A
  25, 355,  // B
  560, 330,  // C
  440, 210  // D
)});

Baglan is a part of the Alpha Orionis and does freelance too.

I recommend

I'm using

Hosting is kindly provided by

baglan.web.tr