/ribbons

ribbons stream across an element

Primary LanguageJavaScriptMIT LicenseMIT

ribbons

Ribbons stream across an element of your choosing!

example

Usage

Initialize with:

Ribbons.initWithOptions({
    element: "#coolDiv",
    // other config options
});

Start ribbons with Ribbons.startRibbons();

Stop ribbons with Ribbons.stopRibbons();

Change element ribbons are attached to with Ribbons.setElement("#newThing");

Use the following methods to move the "curtain", which fully covers the element

  • Ribbons.curtainSetLeft()
  • Ribbons.curtainSetRight()
  • Ribbons.curtainToLeft()
  • Ribbons.curtainToCenter()
  • Ribbons.curtainToRight()

The Ribbons object also emits the following events:

  • 'curtain:Left'
  • 'curtain:Center'
  • 'curtain:Right'
  • 'ribbons:Started'
  • 'ribbons:Ended'

Discussion

This puts a transparent canvas over whatever element you specify, and draws "ribbons" streaming across it. Depends on jQuery and the Kinetic.js framework. Clone and open the ribbonsExample.html to see how changing parameters affects the ribbons. The element you specify must be position: relative.