You can animate any single HTML element inside a slide simply assigning to it some classes.
General class
To every animated element you must assign the class animated.This class set general behaviors.
Animation classes
Then you must:
- Assign a class for enter animation. Enter animation classes names have the "In" suffix or infix (like
fadeIn, flipInX, rotateIn, slideInUp, etc.).
- Assign a class for exit animation. Exit animation classes have the "Out" suffix or infix (
fadeOut, flipOutX , rotateOut , slideOutUp, etc.)
- Finally, if you need, you may modify animations speed and delay.
Available on enter transition classes : fadeIn, fadeInUp, fadeInUpBig, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, bounceIn, bounceInUp, bounceInDown, bounceInLeft, bounceInRight, rotateIn, rotateInBig, rotateInUpLeft, rotateInUpRight, rotateInDownLeft, rotateInDownRight, slideIn, slideInUp, slideInDown, slideInLeft, slideInRight, flipInX, flipOutX, lightSpeedIn, rollIn, rollInRight, zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp
Available on exit transition classes : fadeOut, fadeOutUp, fadeOutUpBig, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, bounceOut, bounceOutUp, bounceOutDown, bounceOutLeft, bounceOutRight, rotateOut, rotateOutUpLeft, rotateOutUpRight, rotateOutDownLeft, rotateOutDownRight, slideOut, slideOutUp, slideOutDown, slideOutLeft, slideOutRight, flipOutX, flipOutX, lightSpeedOut, hingeOut, rollOut, rollOutLeft, zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp
Modifier classes
- Delay : You can use delayInXXXX and delayOutXXXX classes (where XXXX is 500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000) to delay in and/or out animation and create temporized animation sequences.
- Speed : Animations has a base speed of 1 second. You can modify animation speed using
slowIn, slowOut, fastIn, fastOut, xslowIn, xslowOut classes.
Single slides timing
You can customize single slides timing using data- attributes.
data-pause The amount of time (in ms) between each auto transition. Override option pause setting.
<ul class="mbslider">
<li data-pause="7000">
.......
</li>
</ul>
data-pauseBeforeOut
Pause before slide change in milliseconds. It allows out animation completion before the next slide enter. It works both in auto mode and in manual mode. Override option pauseBeforeOut setting.
<ul class="mbslider">
<li data-pauseBeforeOut="2000">
.......
</li>
</ul>
data-pauseAfterIn
Pause added to slide pause in milliseconds. For every slide you may define a pause for in animation completion an a pause for slide reading. It works both in auto mode and in manual mode. Override option pauseAfterIn setting.
<ul class="mbslider">
<li data-pauseAfterIn="2000">
.......
</li>
</ul>
Slide show Example
Here's the code of the slide show you will find on the site home page.
HTML
<ul class="mbslider fade">
<li id='slide_1'>
<h1><img alt="" class="img-responsive center-block animated delayOut1000 rotateInBig zoomOut" src="assets/img/LogoMbSlider_l.png" /></h1>
<h3 class="text-center animated delayIn1000 bounceInRight fadeOutDown">Create animated presentations in minutes!</h3> </li>
<li id='slide_2' data-pauseAfterIn="4000" data-pauseBeforeOut="5000" data-pause="5000">
<div class="container">
<div class="row">
<div class="col-sm-3">
<img alt="" class="img-responsive center-block animated rollIn rollOut delayOut3500" src="assets/img/conte-scontornato_L.png" />
</div>
<div class="col-sm-9">
<ul>
<li class="h2 animated delayIn1000 delayOut2000 bounceInRight hingeOut">
<big>Define timing for every slide</big>
</li>
<li class="h2 animated delayIn1500 delayOut1000 bounceInRight fadeOutDown"><big>Define in and out animations for every HTML element in the slide</big></li>
<li class="h2 animated delayIn2000 bounceInRight fadeOutDown"><big>Fully responsive - will adapt to any device</big></li>
</ul>
</div>
</div>
</div>
</li>
<li id='slide_3' data-pauseAfterIn="4000" data-pauseBeforeOut="5000" data-pause="5000">
<div class="container">
<div class="row">
<div class="col-sm-9">
<ul>
<li class="h2 animated delayIn1000 delayOut2000 bounceInLeft hingeOut"><big>Slides can contain any HTML content</big></li>
<li class="h2 animated delayIn1500 delayOut1000 bounceInLeft fadeOutDown"><big>Callback API and public methods</big></li>
<li class="h2 animated delayIn2000 bounceInLeft fadeOutDown"><big>Support Modern Browser with fall back for ie8 and ie9.</big></li>
</ul>
</div>
<div class="col-sm-3">
<img alt="" class="img-responsive center-block animated rollInRight rollOutLeft delayOut3500 flippedY" src="assets/img/conte-scontornato-rotated.png" />
</div>
</div>
</div>
</li>
</ul>
JavaScript
<script>
$(function() {
var slider = $('.mbslider');
slider.mbSlider({
customAnimation: "slide", // Slide is removed before
// transition to next slide
auto: true, // Automatic slide show
pause: 8000,
pauseBeforeOut: 2000, // Default pause before out
pager: false, // Pager and controls are hidden
controls: false,
onSliderLoad: function(currentIndex) {
setTimeout(function() {
// Important! Class fade hide slider content
// I use it to hide slider during initialization
// and i remove it only whem the slider is ready.
slider.removeClass('fade');
}, 2000);
}
})
</script>