CVI
transm.js 1.3 allows you to add programmable image transitions to your webpages. It uses unobtrusive javascript to keep your code clean.

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari 2+, Chrome 3+ and IE 6+. Works also on older browsers supporting JS 1.5 and images and filter or opacity, else it'll degrade and your visitors won't notice a thing.

Demonstration

Transition areaTransition    Tweening    Alphamask
Transition: Tweening:
Alphamask:
Option1: min: 0 max: 0
Option2: min: 0 max: 0
Duration: 0.5 1.0 2.0 4.0
FPS: 20 24 25 30 40
result: 0 ms - 0.0 fps

Banner (simple)
eyewitness
Eyewitness (overlay)
introduction
Introduction (complex)

Transitions

cvi_trans_lib.js supports image transition capabilities. TransM.js uses 115 transitions for HTML 5 canvas element supporting browsers, 51 transitions for filter|VML supporting browsers and fade and cut for the rest.

alpha

Transition IE fallback Default
tweening
External
resource
Description Options Restrictions

fade

linear

mask image
Alpha is unique in its ability to use alpha masks themselves as transition effects. Transparent parts appear early, and opac parts appear last. Therefore, no programming is required to generate new transition effects. Mask image flipping. Default is 0. 1 equals flip horizontal. 2 equals flip vertical. 3 equals flip both. Using images without alpha channel (e.g. JPEG) as a mask is also supported (requires get / setImageData browser support).

barn_horizontal_in

Transition Default
tweening
Description Options Restrictions

quadEaseOut
Two horizontal lines expands from top and bottom edges toward the center. none none

barn_horizontal_out

Transition Default
tweening
Description Options Restrictions

quadEaseOut
A central, horizontal line splits and expands toward the top and bottom edges. none none

barn_vertical_in

Transition Default
tweening
Description Options Restrictions

quadEaseOut
Two vertical lines expands from left and right edges toward the center. none none

barn_vertical_out

Transition Default
tweening
Description Options Restrictions

quadEaseOut
A central, vertical line splits and expands toward the left and right edges. none none

blinds_left

Transition Default
tweening
Description Options Restrictions

quadEaseIn
Multiple vertical lines expands from right to left. Number of vertical lines. Default is 8. Minimum is 1. Maximum is 100. none

blinds_right

Transition Default
tweening
Description Options Restrictions

quadEaseIn
Multiple vertical lines expands from left to right. Number of vertical lines. Default is 8. Minimum is 1. Maximum is 100. none

blinds_up

Transition Default
tweening
Description Options Restrictions

quadEaseIn
Multiple horizontal lines expands from bottom to top. Number of horizontal lines. Default is 8. Minimum is 1. Maximum is 100. none

blinds_down

Transition Default
tweening
Description Options Restrictions

quadEaseIn
Multiple horizontal lines expands from top to bottom. Number of horizontal lines. Default is 8. Minimum is 1. Maximum is 100. none

blur

Transition Fallback Default
tweening
Description Options Restrictions

pixelate

linear
A bluring effect to transition from one content to another. Radius of bluring. Default is 100. Minimum is 8. Maximum is 180. Only if "cvi_stackblur.js" (Algorithm by Mario Klingemann) is loaded and get/setImageData support is available.
Extremely cpu intensive.

checkerboard_left

Transition Default
tweening
Description Options Restrictions

linear
Multiple displaced blocks expands from right to left. #1 Number of horizontal blocks. Default is 8. Minimum is 2. Maximum is 100. #2 Number of vertical blocks. Default is 8. Minimum is 2. Maximum is 100. none

checkerboard_right

Transition Default
tweening
Description Options Restrictions

linear
Multiple displaced blocks expands from left to right. #1 Number of horizontal blocks. Default is 8. Minimum is 2. Maximum is 100. #2 Number of vertical blocks. Default is 8. Minimum is 2. Maximum is 100. none

checkerboard_up

Transition Default
tweening
Description Options Restrictions

linear
Multiple displaced blocks expands from bottom to top. #1 Number of horizontal blocks. Default is 8. Minimum is 2. Maximum is 100. #2 Number of vertical blocks. Default is 8. Minimum is 2. Maximum is 100. none

checkerboard_down

Transition Default
tweening
Description Options Restrictions

linear
Multiple displaced blocks expands from top to bottom. #1 Number of horizontal blocks. Default is 8. Minimum is 2. Maximum is 100. #2 Number of vertical blocks. Default is 8. Minimum is 2. Maximum is 100. none

circles_in

Transition IE fallback Default
tweening
Description Options Restrictions

checkerboard

linear
Multiple circle shapes expands from the center of each circle toward the radius of each circle. #1 Number of horizontal circles. Default is 8. Minimum is 1. Maximum is 50. #2 Number of vertical circles. Default is 8. Minimum is 1. Maximum is 50. none

circles_out

Transition IE fallback Default
tweening
Description Options Restrictions

checkerboard

linear
Multiple circle shapes expands from the the radius of each circle toward the center of each circle. #1 Number of horizontal circles. Default is 8. Minimum is 1. Maximum is 50. #2 Number of vertical circles. Default is 8. Minimum is 1. Maximum is 50. none

color

Transition IE fallback Default
tweening
Description Options Restrictions

flash

linear
Transition by fading to and from a solid color. Hex color string. Default is '#fff'. none

copy_left

Transition IE fallback Default
tweening
Description Options Restrictions

gradientwipe

linear
A Xerox like copy procedure with horizontal movement from right to left. none none

copy_right

Transition IE fallback Default
tweening
Description Options Restrictions

gradientwipe

linear
A Xerox like copy procedure with horizontal movement from left to right. none none

copy_up

Transition IE fallback Default
tweening
Description Options Restrictions

gradientwipe

linear
A Xerox like copy procedure with vertical movement from bottom to top. none none

copy_down

Transition IE fallback Default
tweening
Description Options Restrictions

gradientwipe

linear
A Xerox like copy procedure with vertical movement from top to bottom. none none

corner_lefttop_in

Transition IE fallback Default
tweening
Description Options Restrictions

radialwipe

bounceEaseOut
Image rotates clockwise in from the upper-left corner. none none

corner_righttop_in

Transition IE fallback Default
tweening
Description Options Restrictions

radialwipe

bounceEaseOut
Image rotates counter-clockwise in from the upper-right corner. none none

corner_leftbottom_in

Transition IE fallback Default
tweening
Description Options Restrictions

radialwipe

bounceEaseOut
Image rotates clockwise in from the lower-left corner. none none

corner_rightbottom_in

Transition IE fallback Default
tweening
Description Options Restrictions

radialwipe

bounceEaseOut
Image rotates counter-clockwise in from the lower-right corner. none none

corner_lefttop_out

Transition IE fallback Default
tweening
Description Options Restrictions

radialwipe

bounceEaseOut
Image rotates clockwise out from the upper-left corner. none none

corner_righttop_out

Transition IE fallback Default
tweening
Description Options Restrictions

radialwipe

bounceEaseOut
Image rotates counter-clockwise out from the upper-right corner. none none

corner_leftbottom_out

Transition IE fallback Default
tweening
Description Options Restrictions

radialwipe

bounceEaseOut
Image rotates clockwise out from the lower-left corner. none none

corner_rightbottom_out

Transition IE fallback Default
tweening
Description Options Restrictions

radialwipe

bounceEaseOut
Image rotates counter-clockwise out from the lower-right corner. none none

curl_horizontal

Transition IE fallback Default
tweening
Description Options Restrictions

gradientwipe

sineEaseOut
A curl wipe with horizontal movement from right to left. Divisor of the image width as curl width. Default is 6. Minimum is 2. Maximum is 10. none

curl_vertical

Transition IE fallback Default
tweening
Description Options Restrictions

gradientwipe

sineEaseOut
A curl wipe with vertical movement from bottom to top. Divisor of the image height as curl height. Default is 6. Minimum is 2. Maximum is 10. none

cut

Transition Default
tweening
Description Options Restrictions

linear
A classic hard cut wipe. none No tweening available. Transition starts immediately.

fade

Transition Default
tweening
Description Options Restrictions

linear
A fade effect to transition from one content to another. Percentage of time where the old and new content overlap and are shown simultaneously as the transition is being played as a fraction of the duration time. Default is 100. Minimum is 0. Maximum is 100. none

flash

Transition IE fallback Default
tweening
Description Options Restrictions

fade

linear
Simulates a photographers camera flash light as transition by fading to and from solid white color. none none

gradientwipe_left

Transition Default
tweening
Description Options Restrictions

sineEaseInOut
A gradient wipe with horizontal movement from right to left. Percentage of the wipe area width. Default is 25. Minimum is 5. Maximum is 100. none

gradientwipe_right

Transition Default
tweening
Description Options Restrictions

sineEaseInOut
A gradient wipe with horizontal movement from left to right. Percentage of the wipe area width. Default is 25. Minimum is 5. Maximum is 100. none

gradientwipe_up

Transition Default
tweening
Description Options Restrictions

sineEaseInOut
A gradient wipe with vertical movement from bottom to top. Percentage of the wipe area height. Default is 25. Minimum is 5. Maximum is 100. none

gradientwipe_down

Transition Default
tweening
Description Options Restrictions

sineEaseInOut
A gradient wipe with vertical movement from top to bottom. Percentage of the wipe area height. Default is 25. Minimum is 5. Maximum is 100. none

inset_leftup

Transition IE fallback Default
tweening
Description Options Restrictions

inset_rightdown

cubicEaseInOut
A box expands from the lower-right corner to the upper-left corner. none none

inset_rightup

Transition IE fallback Default
tweening
Description Options Restrictions

inset_rightdown

cubicEaseInOut
A box expands from the lower-left corner to the upper-right corner. none none

inset_leftdown

Transition IE fallback Default
tweening
Description Options Restrictions

inset_rightdown

cubicEaseInOut
A box expands from the upper-right corner to the lower-left corner. none none

inset_rightdown

Transition Default
tweening
Description Options Restrictions

cubicEaseInOut
A box expands from the upper-left corner to the lower-right corner. none none

iris_cross_in | iris_cross_out

Transition Default
tweening
Description Options Restrict. Transition Default
tweening
Description Options Restrict.

sineEaseIn
A cross shape expands from the center. none none
sineEaseOut
A cross shape shrinks to the center. none none

iris_plus_in | iris_plus_out

Transition Default
tweening
Description Options Restrict. Transition Default
tweening
Description Options Restrict.

sineEaseIn
A plus shape expands from the center. none none
sineEaseOut
A plus shape shrinks to the center. none none

iris_square_in | iris_square_out

Transition Default
tweening
Description Options Restrict. Transition Default
tweening
Description Options Restrict.

sineEaseIn
A square shape expands from the center. none none
sineEaseOut
A square shape shrinks to the center. none none

iris_circle_in | iris_circle_out

Transition Default
tweening
Description Options Restrict. Transition Default
tweening
Description Options Restrict.

sineEaseIn
A circle shape expands from the center. none none
sineEaseOut
A circle shape shrinks to the center. none none

iris_diamond_in | iris_diamond_out

Transition Default
tweening
Description Options Restrict. Transition Default
tweening
Description Options Restrict.

sineEaseIn
A diamond shape expands from the center. none none
sineEaseOut
A diamond shape shrinks to the center. none none

iris_star_in | iris_star_out

Transition Default
tweening
Description Options Restrict. Transition Default
tweening
Description Options Restrict.

sineEaseIn
A five-pointed star shape expands from the center. none none
sineEaseOut
A five-pointed star shape shrinks to the center. none none

pixelate

Transition Default
tweening
Description Options Restrictions

linear
A pixelization effect to transition from one content to another. Sets the maximum width in pixels of each pixelated square. Default is 40. Minimum is 10. Maximum is 50. IE do not respect the elements shape and performs always a rectangle transition.

pull_left

Transition IE fallback Default
tweening
Description Options Restrictions

slide_hide

backEaseOut
The new content is pulled in from right to left. none none

pull_right

Transition IE fallback Default
tweening
Description Options Restrictions

slide_hide

backEaseOut
The new content is pulled in from left to right. none none

pull_up

Transition IE fallback Default
tweening
Description Options Restrictions

slide_hide

backEaseOut
The new content is pulled in from bottom to top. none none

pull_down

Transition IE fallback Default
tweening
Description Options Restrictions

slide_hide

backEaseOut
The new content is pulled in from top to bottom. none none

push_left

Transition IE fallback Default
tweening
Description Options Restrictions

slide_push

cubicEaseOut
The old content is pushed out by new content from right to left. none none

push_right

Transition IE fallback Default
tweening
Description Options Restrictions

slide_push

cubicEaseOut
The old content is pushed out by new content from left to right. none none

push_up

Transition IE fallback Default
tweening
Description Options Restrictions

slide_push

cubicEaseOut
The old content is pushed out by new content from bottom to top. none none

push_down

Transition IE fallback Default
tweening
Description Options Restrictions

slide_push

cubicEaseOut
The old content is pushed out by new content from top to bottom. none none

radialgradient

Transition IE fallback Default
tweening
Description Options Restrictions

fade

linear
A circle gradient expands from the center in two steps. none none

radialwipe_clock

Transition Default
tweening
Description Options Restrictions

sineEaseInOut
A radial hand sweeps clockwise from the twelve o'clock position. none none

radialwipe_wedge

Transition Default
tweening
Description Options Restrictions

sineEaseInOut
A fan unfolds from the top edge, the fan axis at the center. none none

radialwipe_radial

Transition Default
tweening
Description Options Restrictions

sineEaseInOut
A radial hand sweeps clockwise from the upper-left corner. none none

randombars_horizontal

Transition tweening Description Options Restrictions

linear
Transition reveals new content by exposing random horizontal lines of pixels. none Tweening is always linear.

randombars_vertical

Transition tweening Description Options Restrictions

linear
Transition reveals new content by exposing random vertical lines of pixels. none Tweening is always linear.

randomdissolve

Transition tweening Description Options Restrictions

linear
Transition reveals new content by exposing random pixels. Sets the pixel width in pixels. Default is 2. Minimum is 1. Maximum is 16. The transition is extremely CPU intensive. Tweening is always linear

reveal_left

Transition IE fallback Default
tweening
Description Options Restrictions

slide_hide

backEaseIn
The old content is pulled out from right to left. none none

reveal_right

Transition IE fallback Default
tweening
Description Options Restrictions

slide_hide

backEaseIn
The old content is pulled out from left to right. none none

reveal_up

Transition IE fallback Default
tweening
Description Options Restrictions

slide_hide

backEaseIn
The old content is pulled out from bottom to top. none none

reveal_down

Transition IE fallback Default
tweening
Description Options Restrictions

slide_hide

backEaseIn
The old content is pulled out from top to bottom. none none

rotate_in

Transition IE fallback Default
tweening
Description Options Restrictions

iris_circle_out

backEaseIn
The old content rotates and scales down to the center. none none

rotate_out

Transition IE fallback Default
tweening
Description Options Restrictions

iris_circle_in

backEaseOut
The new content rotates and scales up from the center. none none

scale_in

Transition IE fallback Default
tweening
Description Options Restrictions

iris_square_out

backEaseIn
The old content scales down to the center. none none

scale_out

Transition IE fallback Default
tweening
Description Options Restrictions

iris_square_in

backEaseOut
The new content scales up from the center. none none

slide_swap

Transition Default
tweening
Description Options Restrictions

sineEaseInOut
The old content is swaped out by new content in multiple horizontal bands from right to left. Number of horizontal bands. Default is 1. Minimum is 1. Maximum is 100. IE do not respect the elements shape and performs always a rectangle transition.

slide_push

Transition Default
tweening
Description Options Restrictions

sineEaseInOut
The old content is pushed out by new content in multiple horizontal bands from right to left. Number of horizontal bands. Default is 1. Minimum is 1. Maximum is 100. IE do not respect the elements shape and performs always a rectangle transition.

slide_hide

Transition Default
tweening
Description Options Restrictions

sineEaseInOut
The old content is hided out by new content in multiple horizontal bands from right to left. Number of horizontal bands. Default is 1. Minimum is 1. Maximum is 100. IE do not respect the elements shape and performs always a rectangle transition.

spiral

Transition tweening Description Options Restrictions

linear
Tiles spiral clockwise from the upper-left corner. #1 Number of rows. Default is 8. Minimum is 1. Maximum is 100. #2 Number of columns. Default is 8. Minimum is 1. Maximum is 100. Tweening is always linear.

split_horizontal_in

Transition IE fallback Default
tweening
Description Options Restrictions

barn_vertical

quadEaseOut
New content splits from left and right edges and expands toward the center. none none

split_horizontal_out

Transition IE fallback Default
tweening
Description Options Restrictions

barn_vertical

quadEaseOut
Old content splits from center and shrinks toward the left and right edges. none none

split_vertical_in

Transition IE fallback Default
tweening
Description Options Restrictions

barn_horizontal

quadEaseOut
New content splits from top and bottom edges and expands toward the center. none none

split_vertical_out

Transition IE fallback Default
tweening
Description Options Restrictions

barn_horizontal

quadEaseOut
Old content splits from center and shrinks toward the top and bottom edges. none none

smudge

Transition IE fallback Default
tweening
Description Options Restrictions

gradientwipe

circEaseInOut
A gradient wipe with vertical smearing and movement from top to bottom. none none

squares_in

Transition IE fallback Default
tweening
Description Options Restrictions

checkerboard

linear
Multiple box shapes expands from the center of each quadrant toward the corners of each quadrant. #1 Number of horizontal boxes. Default is 8. Minimum is 1. Maximum is 50. #2 Number of vertical boxes. Default is 8. Minimum is 1. Maximum is 50. none

squares_out

Transition IE fallback Default
tweening
Description Options Restrictions

checkerboard

linear
Multiple box shapes expands from the corners of each quadrant toward the center of each quadrant. #1 Number of horizontal boxes. Default is 8. Minimum is 1. Maximum is 50. #2 Number of vertical boxes. Default is 8. Minimum is 1. Maximum is 50. none

stretch_hide_left

Transition IE fallback Default
tweening
Description Options Restrictions

stretch_hide

backEaseOut
New content expands from right edge to left edge. none none

stretch_hide_right

Transition Default
tweening
Description Options Restrictions

backEaseOut
New content expands from left edge to right edge. none IE do not respect the elements shape and performs always a rectangle transition.

stretch_hide_up

Transition IE fallback Default
tweening
Description Options Restrictions

stretch_hide

backEaseOut
New content expands from bottom edge to top edge. none none

stretch_hide_down

Transition IE fallback Default
tweening
Description Options Restrictions

stretch_hide

backEaseOut
New content expands from top edge to bottom edge. none none

stretch_push_left

Transition IE fallback Default
tweening
Description Options Restrictions

stretch_push

backEaseOut
New content expands from right edge to left edge as old content shrinks from left edge to right edge. none none

stretch_push_right

Transition Default
tweening
Description Options Restrictions

backEaseOut
New content expands from left edge to right edge as old content shrinks from right edge to left edge. none IE do not respect the elements shape and performs always a rectangle transition.

stretch_push_up

Transition IE fallback Default
tweening
Description Options Restrictions

stretch_push

backEaseOut
New content expands from bottom edge to top edge as old content shrinks from top edge to bottom edge. none none

stretch_push_down

Transition IE fallback Default
tweening
Description Options Restrictions

stretch_push

backEaseOut
New content expands from top edge to bottom edge as old content shrinks from bottom edge to top edge. none none

stretch_horizontal_in

Transition Default
tweening
Description Options Restrictions

backEaseOut
New content splits and expands from center toward the left and right edges. none IE do not respect the elements shape and performs always a rectangle transition.

stretch_horizontal_out

Transition IE fallback Default
tweening
Description Options Restrictions

stretch_horizontal

backEaseOut
Old content splits and shrinks from the left and right edges toward center. none none

stretch_vertical_in

Transition IE fallback Default
tweening
Description Options Restrictions

stretch_horizontal

backEaseOut
New content splits and expands from center toward the top and bottom edges. none none

stretch_vertical_out

Transition IE fallback Default
tweening
Description Options Restrictions

stretch_horizontal

backEaseOut
Old content splits and shrinks from the top and bottom edges toward center. none none

strips_leftup

Transition Default
tweening
Description Options Restrictions

cubicEaseInOut
A diagonal sweep from the lower-right corner to the upper-left corner. none none

strips_rightup

Transition Default
tweening
Description Options Restrictions

cubicEaseInOut
A diagonal sweep from the lower-left corner to the upper-right corner. none none

strips_leftdown

Transition Default
tweening
Description Options Restrictions

cubicEaseInOut
A diagonal sweep from the upper-right corner to the lower-left corner. none none

strips_rightdown

Transition Default
tweening
Description Options Restrictions

cubicEaseInOut
A diagonal sweep from the upper-left corner to the lower-right corner. none none

turn_horizontal_up

Transition IE fallback Default
tweening
Description Options Restrictions

blinds_up

bounceEaseOut
The even horizontal bands expands from bottom to top as the odd horizontal bands shrinks from top to bottom. Number of horizontal bands. Default is 4. Minimum is 2. Maximum is 12. none

turn_horizontal_down

Transition IE fallback Default
tweening
Description Options Restrictions

blinds_down

bounceEaseOut
The odd horizontal bands expands from top to bottom as the even horizontal bands shrinks from bottom to top. Number of horizontal bands. Default is 4. Minimum is 2. Maximum is 12. none

turn_vertical_left

Transition IE fallback Default
tweening
Description Options Restrictions

blinds_left

bounceEaseOut
The even vertical bands expands from right to left as the odd vertical bands shrinks from left to right. Number of vertical bands. Default is 4. Minimum is 2. Maximum is 12. none

turn_vertical_right

Transition IE fallback Default
tweening
Description Options Restrictions

blinds_right

bounceEaseOut
The odd vertical bands expands from left to right as the even vertical bands shrinks from right to left. Number of vertical bands. Default is 4. Minimum is 2. Maximum is 12. none

wheel

Transition Default
tweening
Description Options Restrictions

sineEaseInOut
Multiple radial hands sweep clockwise. Number of hands. Default is 4. Minimum is 2. Maximum is 20. none

wrench_horizontal

Transition IE fallback Default
tweening
Description Options Restrictions

pixelate

linear
The old content is horizontal expanded until the pixel width equals the image width, than faded to the new content which shrinks horizontal until the pixel width equals the pixel height. none none

wrench_vertical

Transition IE fallback Default
tweening
Description Options Restrictions

pixelate

linear
The old content is vertical expanded until the pixel height equals the image height, than faded to the new content which shrinks vertical until the pixel height equals the pixel width. none none

zigzag

Transition tweening Description Options Restrictions

linear
Tiles move in a horizontal zigzag from the upper-left corner. #1 Number of rows. Default is 8. Minimum is 1. Maximum is 100. #2 Number of columns. Default is 8. Minimum is 1. Maximum is 100. Tweening is always linear.

zoom_in

Transition IE fallback Default
tweening
Description Options Restrictions

fade

linear
The new content fades in and scales down to the center. none none

zoom_out

Transition IE fallback Default
tweening
Description Options Restrictions

fade

linear
The old content fades out and scales up from the center. none none

Tweenings

cvi_tween_lib.js supports tweening capabilities. TransM.js uses only linear tweening, if this lib is missing or if the browser engine do not support HTML 5 canvas element.

linear


linear

sine


EaseIn

sine


EaseOut

sine


EaseInOut

quad


EaseIn

quad


EaseOut

quad


EaseInOut

cubic


EaseIn

cubic


EaseOut

cubic


EaseInOut

quart


EaseIn

quart


EaseOut

quart


EaseInOut

quint


EaseIn

quint


EaseOut

quint


EaseInOut

expo


EaseIn

expo


EaseOut

expo


EaseInOut

circ


EaseIn

circ


EaseOut

circ


EaseInOut

bounce


EaseIn

bounce


EaseOut

bounce


EaseInOut

back


EaseIn

back


EaseOut

back


EaseInOut

elastic


EaseIn

elastic


EaseOut

elastic


EaseInOut

cubic


BezierCurve

cubicBezierCurve function is compatible with -webkit-transition-timing-function WYSIWYG-Editor
"cubicBezierCurve gives you the opportunity to define unlimited, individual tweenings".
This timing function is specified using a cubic Bezier curve, which is defined by four control points. The first and last control points are always set to (0,0) and (1,1), so you just need to specify the two in-between control points. The points are specified as a percentage of the overall duration (percentage: interpolated as a real number between 0 and 1).

Setting Up

Download the TransM archive and include the following files (consider the order) into your webpage.

<script type="text/javascript" src="cvi_tween_lib.js"></script>
<script type="text/javascript" src="cvi_trans_lib.js"></script>
<script type="text/javascript" src="transm.js"></script>

Using It

To add a transm object, just execute the function "transm.add( element, { options } );" to a block-level element.

Usage

Set defaults
transm.defaultWidth      = 320; //INT 64-1024 (px) canvas width
transm.defaultHeight     = 180; //INT 64-1024 (px) canvas height
transm.defaultRadius     = 0; //INT|OBJ [0,0,0,0] radius of the corners
transm.defaultName       = null; //STR canvas name|id
transm.defaultLayer      = null; //STR overlay image path&file
transm.defaultCallback   = null; //STR callback function name
transm.defaultData       = null; //OBJ array of images
transm.defaultAutoplay   = false; //BOOLEAN auto playing at startup
transm.defaultPingpong   = false; //BOOLEAN playing pingpong direction
transm.defaultVerbose    = false; //BOOLEAN be verbose via console
transm.defaultClearbg    = false; //BOOLEAN clear outer elements background
transm.defaultNocache    = false; //BOOLEAN VML image caching (IE only)
transm.defaultNopreload  = false; //BOOLEAN just in time image loading
transm.defaultFadein     = false; //BOOLEAN fade in at startup (not IE)
transm.defaultTimeout    = 6; //FLOAT 1-60 (seconds before break off image loading)
transm.defaultTransition = 'random'; //STR transition name
transm.defaultTweening   = 'default'; //STR tweening name
transm.defaultCparray    = null; //OBJ control points array
transm.defaultDuration   = 2; //FLOAT 0.5-5.0 seconds
transm.defaultFps        = 30; //INT 15-100 frames per seconds (not IE)
transm.defaultDelay      = 5; //FLOAT 0.0-600.0 seconds
transm.defaultMeter      = false; //BOOLEAN show delay meter while auto playing
transm.defaultMfgcolor   = '#ff0000'; //STR meter foreground color
transm.defaultMbgcolor   = '#ffffff'; //STR meter background color
transm.defaultMopacity   = 0.75; //FLOAT 0.1-1.0 meter opacity
transm.defaultMsize      = 32; //INT 24-min(width,height) meter dimension
transm.defaultMposx      = 0; //INT 0-(width-msize) meter position x
transm.defaultMposy      = 0; //INT 0-(height-msize) meter position y

Data format
data = [{
source: 'path/file.jpg', //STR mandatory image path & file
imgshift: 0.5, //FLT optional image shift value (0==top|left, 0.5==center, 1==bottom|right)
callbefore: null, //STR optional simple callback function name (executes on start of transition)
argbefore: null, //STR|INT optional callback argument (string or number only)
callafter: null, //STR optional simple callback function name (executes on end of transition)
argafter: null, //STR|INT optional callback argument (string or number only)
transition: null, //STR optional transition name
alphaimg: null, //STR optional image path & file (if transition=='alpha')
option1: null, //INT optional transition argument #1 (number only)
option2: null, //INT optional transition argument #2 (number only)
tweening: null, //STR optional tweening name
cparray: null, //STR optional control points array (if tweening=='cubicBezierCurve')
duration: null, //FLT optional duration value (seconds)
delay: null, //FLT optional delay value (seconds)
fps: null, //INT optional frames per second
title: '', //STR optional tooltip
onclick: '', //STR optional js-function
href: '', //STR optional URL
target: '_self', //STR optional target
}, {source: 'image.jpg'}]

Add canvas
STRING = transm.add(element, options);
element  == block-level element
options       e.g. {width: 128, height: 64, ...}
width      == INT 64 - 1024 Default: 320
height     == INT 64 - 1024 Default: 180
radius     == INT 0 - [0,0,0,0] Default: 0
name       == STRING Default: null
layer      == STRING Default: null
callback   == STRING Default: null
data       == OBJECT Default: null
autoplay   == BOOLEAN true or false Default: false
pingpong   == BOOLEAN true or false Default: false
verbose    == BOOLEAN true or false Default: false
clearbg    == BOOLEAN true or false Default: false
nocache    == BOOLEAN true or false Default: false
nopreload  == BOOLEAN true or false Default: false
fadein     == BOOLEAN true or false Default: false
timeout    == FLOAT 1 - 60 Default: 6
transition == STRING Default: 'random'
tweening   == STRING Default: 'default'
cparray    == OBJECT Default: [0.25,0.1,0.25,1.0]
duration   == FLOAT 0.5 - 5.0 Default: 2
fps        == INT 15 - 100 Default: 30
delay      == FLOAT 5; //FLOAT 0.0-600.0 seconds
meter      == BOOLEAN true or false Default: false
mfgcolor   == STRING Default: '#ff0000'
mbgcolor   == STRING '#ffffff'
mopacity   == FLOAT Default: 0.1 - 1.0 Default: 0.75
msize      == INT 24 - min(width,height) Default: 32
mposx      == INT 0 - (width-msize) Default: 0
mposy      == INT 0 - (height-msize) Default: 0
(Advice: By adding a canvas to a block-level element, the former content of the element will be overwritten)

Remote control canvas
transm.play(canvas); (start playing)
transm.stop(canvas); (stop playing)
transm.first(canvas); (show first image)
transm.prev(canvas); (show previous image)
transm.show(canvas, image_number); (show this image)
transm.next(canvas); (show next image)
transm.last(canvas); (show last image)

Get some informations
STRING = transm.add(element, options); (returns current canvas name|id)
OBJECT = transm.info(canvas); (returns informations about the last transition)
OBJECT.transition  == used transition //STR
OBJECT.tweening    == used tweening //STR
OBJECT.duration    == real duration value //FLT
OBJECT.fps         == real fps value //FLT
VALUE  = transm.get(canvas, ['busy'|'playing'|'current'|'total'|'transition'|'tweening'|'duration'|'fps']);
VALUE  = busy        == transition in action //BOL
VALUE  = playing     == autoplay in action //BOL
VALUE  = current     == current image number //INT
VALUE  = total       == no. of all images //INT
VALUE  = transition  == used transition //STR
VALUE  = tweening    == used tweening //STR
VALUE  = duration    == real duration value //FLT
VALUE  = fps         == real fps value //FLT
FLOAT  = transm.version;
STRING = transm.released;

Remove canvas
transm.remove(canvas);

Examples
var photos = new Array();
photos = [
  {source:'images/demo/0.jpg', imgshift:0.75},
  {source:'images/demo/1.jpg', title:'dummy', onclick:'alert("dummy")'},
  {source:'images/demo/2.jpg', transition:'alpha', alphaimg:'images/alphamask/usflag.jpg'}
]
var opts = {width:655, height:150, radius:[64,64], timeout:3, layer:'images/layer.png', pingpong:true, clearbg:true, delay: 3.0, meter: true, mopacity: .75, mposx: 615, mposy: 110, data:photos, name:'viewer'};
var my_ele = transm.add(document.getElementById('my_div'), opts);
if(typeof $=='undefined') {function $(v) {return(document.getElementById(v));}}
transm.add($('my_div'), opts);
transm.play($('viewer'));
transm.stop($('viewer'));
transm.show($('viewer'), 2);
alert('transm: '+transm.version+' ('+transm.released+')');
transm.remove($('viewer'));

Download

Please read the license before you download transm.js 1.3

F.A.Q.

Please read the Frequently Asked Questions before you contact the author.

Restrictions

The Internet Explorer implementation has a few system immanent limitations. The problem is that VML images don't support the onload event (or onreadystate). Also IE doesn't cache VML images across page loads. Notice the long delay on page reload! If you watch IE's http traffic (say using Fiddler), you'll see that IE requests each image again. So for every image, TransM.js needs to download it twice. Even the images are in browser cache, VML still need to connect server and get a 304 response. I've found a way to cache VML images. IE 6/7/8 works well with the argument nocache: false, but if you get in conflict with it you can set it to nocache: true. With setting nocache: true IE needs to cycle one time through the play loop, before all images are cached. The number of transition types is limited to 51 and the tweening is always linear. In opposite to the frame accurate transitions, Internet Explorer transitions are time accurate. That is why IE do not support the fps parameter.

History

Version 1.3

Version 1.2 Version 1.1 Version 1.0

Contact

Please leave any comments at this contact formular.

License

transm.js and cvi_trans_lib.js are distributed under the Netzgestade Non-commercial Software License Agreement.
License permits free of charge use on non-commercial and private web sites only under special conditions (as described in the license). This license equals neither "open source" nor "public domain". There are also Commercial Software Licenses available.

YOU AGREE TO ALL CONDITIONS OF THIS LICENCE AGREEMENT CONCERNING THE USE OF THE SOFTWARE BY ACCEPTING THIS LICENCE.
IF YOU DO NOT AGREE TO ALL CONDITIONS OF THIS AGREEMENT, YOU SHALL NOT INSTALL THE SOFTWARE, OR USE IT IN OTHER WAYS.

Other Projects

transm.netzgesta.de © 2014 by Christian Effenberger feed   twitter   facebook   myspace   delicious   digg   reddit   magnoliacom   newsvine   furl   google   yahoo   blinklist   mister-wong