Tool - Caption Transition Viewer - Jssor Slider Development KIT

Jssor responsive touch swipe javascript image slider

Best Performance Slider, Most Scalable Slider

Jssor responsive touch swipe javascript image slider

Best Performance Slider, Most Scalable Slider

Caption Transition

Duration:

Move

Fly (Hor):

Fly (Ver):

Clip:

During (Hor):

During (Ver):

During (Clip):

Easing (Hor):

Easing (Ver):

Easing (Clip):

Scale (Hor):

Scale (Ver):

Scale (Clip):

Round (Hor):

Round (Ver):

Round (Clip):

Zoom

Rotate

Fade

During (Zoom):

During (Rotate):

During (Fade):

Easing (Zoom)

Easing(Rotate)

Easing(Fade)

Scale (Zoom):

Scale (Rotate):

Scale (Fade):

Round (Zoom):

Round (Rotate):

Z-Index

During (ZIndex):

Easing (ZInd..)

Scale (ZIndex):

Round (ZIndex):

The form above is to build and play caption transition. You can build a new caption transition or modify any of 390+ predefined caption transitions.
A caption transition can be any or combination of 'Fly (Hor)', 'Fly (Ver)', 'Clip', 'Zoom' and 'Rotate'.
Once you get a transition that you prefer, you can copy the transition code from the text box at bottom of the form.

Tool - Caption Transition Viewer

Duration

A period in milliseconds indicates how long the whole caption transition will last.

Fly (Hor)

A group of option indicates whether to move caption element by distance of 'slide width' horizontally.

Fly (Ver)

A group of option indicates whether to move caption element by distance of 'slide height' vertically.

Clip

A group of option indicates whether to clip caption element.

Zoom

A group of option indicates whether to zoom caption element.

Rotate

A group of option indicates whether to rotate caption element.

Fade

A group of option indicates whether to fade caption element.

'During'

Given a whole caption transition during a period from 0 to 1. For each sub transition, the 'During' option specifies 'begin time' and 'end time' within the whole caption transition.

'Easing'

'Easing' indicates variation of speed to play animation.

'Scale'

'Scale' indicates scale of default value. e.g. for 'Fly (Hor)', the default move distance is 'slide width', if scale is 0.3, the move distance would be 0.3 * 'slide width'.

'Round'

'Round' indicates how many times to repeat the animation. If 'Round' is 2, it plays 2 times.