7 maggio 2016

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:

animation.css oggetti website x5
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 AvanzateStatistiche, SEO e CodiceEsperto 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.



32 commenti:

  1. buonasera, non mi dilungo a dire che tutto funziona alla grande... ma come sempre tento di smanettare...
    volevo far si che due oggetti non iniziassero l'animazione insieme ma uno dei due avesse un piccolo ritardo...
    ho provato a duplicare lo script modificando le variabili ma iniziano comunque nello stesso momento...
    forse inserendo 'setTimeout' si potrebbe ottenere...
    ho trovato questa indicazione in rete, ma sicuramente non è così che va impostata:

    window.setTimeout("index()", 10000);

    in cui ho inserito la function "index" che mi sembra sia quella che lo script esegue...ma forse non ci ho capito un granchè...

    RispondiElimina
    Risposte
    1. Ciao Antonio,
      come scritto sul sito dell'autore ti è sufficiente un CSS che aggiunga la proprietà animation-delay all'oggetto desiderato.
      Esempio:

      #imCell_4 {
      -webkit-animation-delay: 5s;
      animation-delay:5s;
      }

      Elimina
  2. ah l'inglese... come non lo sopporto...
    grazie comunque dell'indicazione...
    buona giornata...

    RispondiElimina
  3. ciao,
    seguendo il primo metodo, quello dello script senza le ancore, aggiungendo righe allo script per ogni cella da animare...

    $('#imCell_1').addClass('animated slideInLeft');
    $('#imCell_2').addClass('animated fadeOutRightBig');
    $('#imCell_3').addClass('animated rotateInUpLeft');

    si ottiene lo stesso effetto delle ancore, senza il piccolo intoppo che in anteprima se si cambia effetto, si deve fare obbligatoriamente ctrl+anteprima per visualizzare il cambiamento...
    buona domenica...

    RispondiElimina
    Risposte
    1. Ciao Antonio,
      certo, infatti abbiamo indicato anche questo metodo ma, oltre a dover rilevare l'id delle celle, gli effetti saranno visibili solo al caricamento della pagina quindi, se un oggetto da animare si trova in basso, in funzione della risoluzione del monitor, potresti non vedere mai l'animazione.

      Elimina
  4. e aggiungo...
    sostituendo #imCell_1 con ad esempio il nome di un div (ad es. primo), si possono animare div all'interno della stessa cella...

    $('#primo').addClass('animated slideInLeft');
    $('#secondo').addClass('animated fadeOutRightBig');
    ciao

    RispondiElimina
    Risposte
    1. Perdonaci Antonio ma, in questo caso, se stai scrivendo del codice HTML (Oggetto HTML e/o Oggetto Testo) non serve nessun codice JS ma basta aggiungere le classi nel codice HTML stesso:

      <div class="animated slideInLeft">Lorem ipsum dolor</div>

      E l'effetto sarà visibile solo al caricamento della pagina.

      Buona domenica anche a te.

      Elimina
  5. ok grazie della precisazione...naturalmente anche questo probabilmente era scritto in inglese sul sito dell'autore...devo provare ad essere più attento prima di scrivere...

    RispondiElimina
    Risposte
    1. "...devo provare ad essere più attento prima di scrivere..."
      Ma no, perché? Tutti i commenti arricchiscono perché mettono in luce aspetti che, ad una prima lettura dell'articolo, possono sfuggire o possono chiarire passaggi dati per scontati, come l'inserimento diretto delle classi ad un elemento che si vuole animare.
      Quindi grazie dei tuoi contributi :)

      Elimina
  6. Scusate ragazzi ma io non ho ancora capito come dividere ed inserire questa funzione effetto :( Animare gli oggetti di WebSite X5 con la libreria Animate.css non e' che ci sono quei famosi file inprogetto website x5 allegati? una volta li inserivate :( cosi era un po' tutto piu' facile da capire

    RispondiElimina
    Risposte
    1. Ciao Fabrizio,
      alleghiamo i file di progetto solo quando non è possibile scrivere nell'articolo tutto quello che bisogna fare per riprodurre le nostre demo perché verrebbe un articolo troppo lungo. In questo caso sono da seguire solo tre passi, due in meno di quelli di WebSite X5 :)
      E' importante, inoltre, soprattutto per chi con il web ci lavora, capire quello che si riproduce, e, con un copia-incolla di oggetti questo non si potrà mai ottenere.

      Elimina
    2. volevo solo capire i codici dove vanno nella propieta pagina? e poi il file che si scarica .css effetti dove va? nella cartella directory?

      Elimina
    3. Rileggi con attenzione l'articolo, è scritto passo passo come fare ed i termini utilizzati sono gli stessi che trovi nel programma.

      Elimina
  7. quando inserisco esempio una scritta oggetto poi ci devo mettere un ancora nomitata cosi:MSanimated-nomeEffetto

    RispondiElimina
  8. :( niente non ci riesco peccato non avere il progetto :(

    RispondiElimina
  9. ciao
    non capisco come mai ma non riesco a visualizzare l'animazione.
    ho fatto, nelle proprietà di una singola pagina, sezione esperto, il copia incolla del codice qui su indicato, poi ho assegnato il nome dell'effetto all'ancora e allegato il file animate.css
    dato he il programma lo propone nella cartella files, di default, io lo ho anche portato nella radice con programma ftp
    ho dato una letta al codice della vs pagina demo e alla mia, ma naturalmente non ho capito dove sbaglio.
    questo il link
    http://www.miotorneo.com/test.html
    grazie per l'eventuale aiuto
    fab

    RispondiElimina
    Risposte
    1. Ciao,
      come prima cosa non hai chiuso correttamente il tag </style> (vedi punto 3 dell'articolo).
      Poi, quando hai allegato il file animate.css al progetto, non hai spuntato la casella "Collega il file..." (punto 2 dell'articolo).

      Elimina
  10. grazie, come sempre genitlissimi
    in realtà il tag style mi sembrava chiuso correttamente; quello che non avevo fatto era proprio l'errore del punto 2
    fab

    RispondiElimina
    Risposte
    1. In realtà l'errore sul tag style c'è, come puoi vedere QUI
      Sei fortunato che i browser, a volte, sono molto tolleranti :)

      Elimina
  11. in realtà reale è ovvio che tu (voi) hai (avete) ragione

    io mi ero limitato a copiare il codice e non so proprio come ho fatto a inserire quel tag.....
    noi impediti del web siam proprio forti eh...
    scusa la perdita di tempo e grazie ancora
    Fab

    RispondiElimina
    Risposte
    1. Ciao,
      la "realissima realtà vera" è che il nostro commento era solo per evitarti futuri problemi con quel tag omesso :) :)

      Non ti preoccupare, nessuna perdita di tempo sul cucuzzolo :)

      Elimina
  12. Ciao a tutti,
    se applico questo tutorial al mio progetto non solo non viene eseguita alcuna animazione ma mi sparisce la riga, utilizzo la modifica full width forse da problemi quello?
    Un'altra considerazione è che se applicato alla prima funziona mentre nelle altre scompare.
    Grazie per il lavoro che fate

    RispondiElimina
    Risposte
    1. Ciao,
      probabilmente stai sbagliando qualcosa. Sembra l'effetto di un errore javascript: sicuro di aver messo bene gli apici?
      Comunque senza una prova online da vedere non possiamo dire di più.

      Elimina
  13. in realtà ora sembra andare correttamente, website x5 ha crashato e al riavvio funzionava correttamente.
    grazie per la risposta comunque.

    RispondiElimina
  14. Ciao! Ho provato a seguire gli step che avete proposto. In teoria mi sembra tutto abbastanza semplice... in pratica, invece, mi blocco al primo passaggio. Ovvero: quando provo ad assegnare il nome all'ancora mi si apre una finestrella in cui mi si dice che non sono ammessi caratteri speciali!

    RispondiElimina
    Risposte
    1. Ciao Marina,
      qualche domanda: qualche versione stai usando? Dove stai inserendo il nome dell'ancora? E precisamente cosa stai inserendo come nome per l'ancora?

      Elimina
    2. Ciao! Intanto grazie mille per la risposta! :-)
      La versione che utilizzo è website x5 evolution 11, ma ho già risolto! Non so cosa sia successo, ma è bastato chiudere e riaprire il programma e funziona!!!! Grazie! Senza le istruzioni che ho letto qui non ci sarei riuscita!

      Elimina
  15. Mi sono accorta adesso di avere comunque un problema: da tablet non tutti gli effetti sono visibili. Sai quale può essere il motivo?

    RispondiElimina
    Risposte
    1. Ciao,
      gli effetti, come abbiamo scritto nell'articolo, non sono tutti supportati dai browser più vecchi.
      Visto che i tablet dovrebbero avere i browser "moderni", verifica sul sito dell'autore se vedi correttamente tutti gli effetti.

      Elimina
  16. Sul sito dell'autore tutto ok (anche se non vedo la scritta. vedo una barra arancione che si muove a seconda dell'effetto selezionato). La cosa strana è che sbloccando la rotazione del tablet e visualizzando il sito in orizzontale gli effetti funzionano tutti. Dovrò provare a cambiare il valore 0.55 oppure meglio provare con altri effetti? Mi dispiacerebbe rinunciare ad avere un minimo di animazione, ma non voglio rischiare che elementi importanti non vengano visualizzati (perchè il problema alla fine è quello: non solo non compaiono le animazioni... non compaiono gli oggetti a cui le ho applicate). Scusate se vi stresso!

    RispondiElimina
    Risposte
    1. Ciao,
      dovremmo vedere la pagina online dove hai implementato le animazioni per provare a capire il problema.
      Puoi inviarci il link anche per mail: la trovi in alto a destra del blog.

      Elimina
  17. Certo, volentieri! Grazie mille!

    RispondiElimina