jQuery Canvas Cycle Plugin
[UPDATE] Now on github!
Download it
As the title goes, I created a jQuery plugin that rotates images on an HTML5 canvas. Inspired by Mike Alsup's Cycle Plugin
Documentation
Defaults:
- canvas: set this to a selected canvas element or leave it empty and let the plugin create it
- fx: transition effect, possible values: fade, scroll[Left, Right, Up, Down], cover[Left, Right, Up, Down], mask, flip[X, Y], fadeZoom, toss, zoom[Right, Left, Z]
- timeout: image timeout (how long will the image last on the canvas)
- speed: transition speed
- no_canvas: text swapped by the browser if it doesn't support the canvas tag
- index: zero based index from which your images will start
- step: transition pixels step
- loader_text: loading text
- stretch: set this to false if you do not want the images to be stretched on the whole canvas (careful though, some effects do not work properly if this option is set to false)
- mask: css selector for the image to be used as the mask on the "mask" effect
- before: callback function called before the transition takes place
- after: callback function called after the transition takes place
- end: callback function called at the end of the transition
Missing features:
- pager
- stop event
- pause event
And many more...
Live Demo
Minimal setup
$('.first').canvasCycle();
Advanced setup
$('.second').canvasCycle({
fx: 'coverUp',
timeout: 2000,
speed: 500,
index: 3,
step: 10
});
Custom setup
Posted on ottobre 19, 2009