È possibile animare ogni elemento HTML all'interno di una slide semplicemente assegnandogli alcune classi.
Classe generale
Ad ogni elemento animato è necessario assegnare la classe animated .
Classi di animazione
Quindi è necessario:
- Assegnare una classe che definisce l'animazione in entrata dell'elemento. Le classi di animazione in entrata hanno il suffisso o l'infisso "In" (come in
fadeIn , flipInX , rotateIn , slideInUp , ecc.).
- Assegnare una classe che definisce l'animazione in uscita dell'elemento. Le classi di animazione in uscita hanno il suffisso o l'infisso "Out" (come in
fadeOut , flipOutX , rotateOut , slideOutUp , ecc.)
- Infine, se necessario, è possibile modificare la velocità e il ritardo delle animazioni.
Classi che definiscono animazioni in entrata: 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
Classi che definiscono animazioni in uscita: 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
Ritardo e modifica della velocità delle animazioni
- Ritardo : È possibile utilizzare le classi delayInXXXX e delayOutXXXX (dove XXXX è 500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500 o 5000) per ritardare l'animazione e/o creare sequenze temporizzate di animazioni.
- Velocità : Le animazioni hanno una velocità base di 1 secondo. È possibile modificare la velocità di animazione utilizzando le classi
slowIn, slowOut, fastIn, fastOut, xslowIn, xslowOut.
Temporizzazione di singole diapositive
È possibile personalizzare i tempi delle singole slide utilizzando alcuni attributi data-.
data-pause La quantità di tempo in cui la slide rimane sulla schermo prima di iniziare la transizioni in uscita. Se impostato viene utilizzato invece del valore assegnato all'opzione di configurazione pause.
<ul class="mbslider">
<li data-pause="7000">
.......
</li>
</ul>
data-pauseBeforeOut Tempo che consente il completamento dell'animazione in uscita prima di inserire la diapositiva successiva. Funziona sia in modalità automatica che in modalità manuale. Esegue l'override all'opzione di configurazione pauseBeforeOut.
<ul class="mbslider">
<li data-pauseBeforeOut="2000">
.......
</li>
</ul>
data-pauseAfterIn Tempo che consente il completamento dell'animazione in entrata. Per ogni diapositiva si può definire una tempo per il completamento dell'animazione un una tempo per la lettura dei contenuti. Funziona sia in modalità automatica che in modalità manuale. Esegue l'override all'opzione di configurazione pauseAfterIn.
<ul class="mbslider">
<li data-pauseAfterIn="2000">
.......
</li>
</ul>
Esempio di presentazione animata
Ecco il codice della presentazione sulla home page del sito.
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>