Captions are containers which can be customized via CSS Classes for the animation and other data options. Captions must include the class=”caption”
Example:
|
1
2
3
4
5
6
7
|
<p></p>
<ul>
<li data-link="http://www.google.de" data-slotamount="7" data-transition="boxslide"><img alt="" data-fullwidthcentering="off" src="//demo.mandeeps.com/portals/19/Skins/Dixit/PortalTemplate/img/slider/slide1f.jpg"> <div class="caption sft big_white" data-easing="easeOutBack" data-speed="700" data-x="400" data-y="100" start="1700">KICKSTART YOUR WEBSITE</div>
</li>
<li></li></ul>
|
Notice that we have CSS class for start animation “sft” and a color “big_white”. We can specify incoming and outgoing animations such as class=”caption sft fade big_white”
Similarly, we have attributes such as data-x and data-y for positioning and data-start and data-end for timing.
CSS Classes
Incoming Animations:
- sft - Short from Top
- sfb - Short from Bottom
- sfr - Short from Right
- sfl - Short from Left
- lft - Long from Top
- lfb - Long from Bottom
- lfr - Long from Right
- lfl - Long from Left
- fade - fading
- randomrotate- Fade in, Rotate from a Random position and Degree
Outgoing Animations:
This is optional – if not set, the same animation type will be used as incoming animation.
- stt - Short to Top
- stb - Short to Bottom
- str - Short to Right
- stl - Short to Left
- ltt - Long to Top
- ltb - Long to Bottom
- ltr - Long to Right
- ltl - Long to Left
- fadeout - fading
- randomrotateout- Fade in, Rotate from a Random position and Degree
Colors:
- big_white
- big_orange
- medium_grey
Data Options
- data-x The horizontal position in the standard (via startwidth option defined) screen size (other screen sizes will be calculated)
- data-y vertical position in the standard (via startheight option defined) screen size (other screen sizes will be calculated)
- data-speed duration of the animation in milliseconds
- data-start after how many milliseconds should this caption start to show
- data-easing special easing effect of the animation. Options:
easeOutBack, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic
easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint
easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine
easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc
easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack
easeInBounce, easeOutBounce, easeInOutBounce
- data-endspeed duration of the animation when caption leaves the stage in milliseconds
- data-end after how many milliseconds should this caption leave the stage (should be bigger than data-start+data-speed !
- data-endeasing special easing effect of the animation. Options:
easeOutBack, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic
easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint
easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine
easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc
easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack
easeInBounce, easeOutBounce, easeInOutBounce