scripty2

Section scripty2 fx

Description

The scripty2 effects framework provides for time-based transformations of DOM elements and arbitrary JavaScript objects. This is at the core of scripty2 and presents a refinement of the visual effects framework of script.aculo.us 1.

In practice S2.FX.Morph is most often used, which allows transitions from one set of CSS style rules to another.

Features

  • CSS morphing engine: morph from one set of style properties to another, including support for all CSS length types (px, em, %, cm, pt, etc.)
  • Extensive transition system for animation easing and special effects (e.g. bouncing)
  • On supported browsers, uses browser-native visual effects (CSS Transitions), fully automatically with no change to your code required
  • Auto-adjusts to differences in computing and rendering speed (drops frames as necessary)
  • Limits the number of attempted frame renders to conserve CPU in fast computers
  • Flexible OOP-based implementation allows for easy extension and hacks
  • Effect queuing to run an effect after other effects have finished
  • Chaining and default options: easy-to-use syntax for most use cases
  • Reusable effect instances can be used with more than one DOM element
  • User-definable callback functions at any point in the effect lifecycle
  • Effects are abortable (either as-is or abort-to-end)

Namespaces

  • S2.CSS

    Utility functions for CSS parsing, color normalization and tweening.

  • Element

    A collection of shortcut methods that are added to all DOM elements.

  • S2.FX

    This is the main effects namespace.

  • S2.FX.Operators

    Effect operators are reusable interpolation functions. Operators are used by S2.FX.Element and its subclasses.

  • S2.FX.Transitions

    Transitions can fine-tune how an effect evolves over time. All effects, without the use of transitions, normally evolve linearily.

Classes

  • S2.FX.Attribute

    This effect can change an object property or call a method with a numerical interpolation.

  • S2.FX.Operators.Base

    This is a skeleton base class which must be extended to be useful.

  • S2.FX.Base

  • S2.FX.Operators.CssTransition

    Operator for invoking CSS Transition-based CSS animations, bypassing the scripty2 effects engine and using browser native CSS transitions.

  • S2.FX.Element

    Base class for effects that change DOM elements. This is the base class for the most important effects implementation S2.FX.Morph, but can be used as a base class for non-CSS based effects too.

  • S2.FX.Heartbeat

    The heartbeat class provides for effects timing. An instance of this class is automatically created when the first effect on a page is instantiated.

  • S2.FX.Morph

    "Morph" DOM elements to a new set of CSS style rules, while optionally providing a new set of contents.

  • S2.FX.Parallel

    Effect to execute several other effects in parallel.

  • S2.FX.Queue

    Effect queues manage the execution of effects in parallel or end-to-end over time.

  • S2.FX.Operators.Scroll

    Operator for scrolling the contents of an Element.

  • S2.FX.Scroll

    Effect for scrolling an elements' contents.

  • S2.FX.SlideDown

    Effect to hide an element by animating its CSS height, padding-top, and padding-bottom from their ordinary values to zero.

  • S2.FX.Style

    This effect is similiar to S2.FX.Morph but doesn't provide any of the more advanced functionality, like content morphing.

  • S2.FX.Operators.Style

    Operator for interpolating the CSS styles of an Element.