Animare gli oggetti di WebSite X5 con la libreria Animate.css

La libreria Animate.css è una collezione di animazioni CSS3 facilmente integrabile in un sito web. Basta aggiungere due classi all'elemento che si vuole animare, una generica (animated) e l'altra che corrisponde al nome dell'effetto che si vuole ottenere e la libreria pensa al resto.
In WebSite X5, se vogliamo applicare l'animazione agli oggetti predefiniti del programma, le cose, come sempre, si fanno un po' più complicate, poiché non si può intervenire direttamente sul codice generato.
Se l'animazione riguardasse un unico oggetto e volessimo visualizzarla al caricamento della pagina, basterebbe:

1. allegare la libreria al progetto;
2. nel sorgente della pagina individuare l'id della cella (imCell_n) corrispondente all'oggetto da animare;
3. assegnare le classi opportune con jQuery.
   Un esempio di codice da inserire Prima della chiusura del tag HEAD per animare con effetto bounce l'oggetto con id="imCell_1" :
   

   <script>
   $(document).ready(function(){
     $('#imCell_1').addClass('animated bounce');
   });
   </script>
   

Il metodo che descriveremo permette invece di generalizzare e semplificare l'uso della libreria, in modo che possa essere facilmente applicato a più oggetti nella pagina e che l'animazione avvenga al caricamento della pagina ma solo quando l'oggetto è visibile nello schermo. Qui la nostra demo:

DEMO

Questi i passi da seguire:

1. Assegnare agli oggetti a cui deve essere applicato l'effetto un'ancora, il cui nome deve necessariamente essere così composto: MSanimated-nomeEffetto
   dove MSanimated- è un prefisso non modificabile uguale per tutti gli oggetti e nomeEffetto è il nome dell'effetto dell'animazione scelto.
   Si possono provare gli effetti disponibili a QUESTO LINK. Attenzione a riportare correttamente nell'ancora il nome dell'effetto scelto, rispettando le minuscole e maiuscole.
   Nel caso si debba assegnare lo stesso effetto a più oggetti, poiché non è possibile avere due ancore con lo stesso nome, è necessario inserire, nel nome dell'ancora, uno o più numeri come suffisso. Esempio: MSanimated-bounce123
2. Scaricare la libreria Animate.css dal sito dell'autore oppure dalla nostra demo ed allegarla al progetto in Impostazioni Avanzate → Statistiche, SEO e Codice → Esperto → File allegati al codice spuntando la casella Collega il file.
3. In Proprietà Pagina → Esperto → Prima della chiusura del tag HEAD inserire questo codice CSS:

   <style>
       .MShidden{visibility:hidden;}
   </style>

   e questo codice jQuery Prima della chiusura del tag BODY:

   <script>
   /* ===============================================================
   Author's custom code: http://quellidelcucuzzolo.blogspot.it
   Please do not remove credit
   ============================================================== */
   var $msAnimation_block = $("div[id^='MSanimated-']").parent();
   var animationType = new Array();
   $msAnimation_block.addClass("MShidden animated");
   $msAnimation_block.each(function(index) {
     animationType[index] = $(this).find(">:first-child").attr("id").replace("MSanimated-", "").replace(/\d+/, "");
   })
   $(window).on("load scroll", function() {
     $msAnimation_block.each(function(index) {
       if ($(this).offset().top <= $(window).scrollTop() + $(window).height() * 0.55 && $(this).hasClass("MShidden")) {
         $(this).removeClass("MShidden").addClass(animationType[index]);
       }
     })
   });
   </script>

   Il valore 0.55 (personalizzabile) rappresenta la percentuale dell'altezza della finestra del browser a cui si deve trovare l'oggetto per iniziare l'animazione.
   

Si fa presente che, a volte, il programma non aggiorna il nome delle ancore se non si forza la generazione dell'anteprima cliccando contemporaneamente il tasto Ctrl.

La libreria è proposta dall'autore come cross-browser, ma si consiglia di verificare la resa dell'effetto scelto con browser diversi. Essendo animazioni CSS3 ovviamente non potranno essere visualizzate su browser più datati.