Creare un div animato con JavaScript

- Letture: 2.982

Avete presente l’effetto di quei div, che vengono esplosi nelle pagine web?

In pratica il div esploso fa andare a capo il contenuto della pagina, al fine di focalizzare l’attenzione su altre informazioni secondarie come dei tab, pubblicità o semplicemente approfondimenti aggiuntivi.

Andiamo a vedere come creare un div animato

Per questo tipo di sviluppo useremo un JavaScript: Animate Colspan Div

La cosa importante è avere una pagina con il seguente DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  • Andiamo a richiamare il JavaScript tra i tag <head>…</head>

<script type="text/javascript" src="animatedcollapse.js"></script>

Vi ricordo che qualora spostiate il file JS in sottocartelle di inserite il percorso esatto esempio JS/animatedcollapse.js

  • A questo punto creiamo il collegamento al pulsante che farà esplodere il div

<a href="javascript:collapse2.slideit()">Visibile/Invisibile</a>

Realizzato il collegamento al JavaScript andremo a creare il nostro div nascosto

<div id="cat" style="background-color: #99E0FB;">
<div style="padding: 0 5px">
<p align="center" class="Stile1">QUESTO DIV PRENDE LE DIMENSIONI <br />
A SECONDA DEL CONTENUTO DEL DIV </p>
</div></div>
<script type="text/javascript">
var collapse2=new animatedcollapse("cat", 500, true)
</script>

Il nostro contenuto sarà dentro un div di id=”cat” che verrà preso in considerazione dal Js successivo per impostare il tempo dell’animazione di esplosione.

Ovviamente non sta a me ricordarvi, che il div può contenere qualsiasi oggetto testo, immagine, flash e che può essere personalizzato tramite CSS esterni nel colore, dimensioni e posizioni.

Scarica il sorgente
Guarda il Tutorial

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Partner & Chief Innovation Officer di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

22 Commenti

  1. complimenti …. bello e funziona anke molto bene …. di facile utilizzo …. senti ma se volessi che il div cmparisse … come si può dire … in orizzontale …. cioè al posto che dal”alto verso il basso da destra verso sinistra …..

  2. Si dovrebbe modificare il file .js e dove si impostano parametri per l’altezza height sostituire con la larghezza width

    Dovrei averci azzeccato :)

  3. è no anke io ci avevo pensato … sono andato sul file .js e ho fatto un cerca e sostituisci …. ho sostituito tutte le parole height con width … ma quqando provo a cliccare su visibile/invisibile mi viene fuori una finestra di avviso con il seguente mess : please wait until document has fully loaded then click again …

  4. an e volevo anke chiederti una cosa … solo che nn so dove postarla … io volevo crare tipo un menu del tipo | home | chi sono | ecc | …. come faccio a fare in modo che quando vado sopra con il mouse su una di queste parole la parola scenda e sparisca e intanto ne compaia un’altra dall’alto … ??? del tipo vai sopra home e vedi home che scorre verso giu ma man mano che scende sparisce un pezzo e da sopra ricompare home …. xo nn in flash …. javascript … oppure boh ….

  5. Giulio forse ho capito cosa intendi, diciamo che a farlo a mano ci vorrebbe tempo, invece con qualche programma potresti riuscirci.

    Ti consiglio Sothink DHTMLMenu

    Crei facilmente dei menu accessibili a tutti i browser

    saluti

  6. Ciao Giulio, ma se voglio che il div sia aperto come stato iniziale, come devo fare?

    grazie mille..

  7. Basterebbe inserire nel body la funzione collapse2.slideit()

    in questo modo

    <body onload="collapse2.slideit();">

    Il problema è che la pagina deve essere caricata per far partire la funzione e quindi ti darebbe errore…

  8. cia julius tu parli di ..” che il div può contenere qualsiasi oggetto testo, immagine, flash ..” beh ho provato a mettere una img ed e’ ok, sparisce e ricompare…
    ma con un oggetto flash, mi rimane in “primo piano” anche se dovrebbe scomparire.. :-(
    Ho inserito un file flash nel tuo file di esempii e da’ lo stesso “errore”…. tu ne sei a conoscenza? si puo’ risolvere?

    GRAZIEEEEEE!!!!!!!!!!!!!!!!!

  9. Ciao Julius, ho seguito le tue indicazioni….le immagini all’interno dei div animati non hanno nessun problema…ma se all’immagini do un effetto (il glossy) mi appare in sovrimpressione e non si chiude come dovrebbe.
    Hai un’idea per come risolvere questo problemino?
    Ti ringrazio.
    Ciao ciao

  10. ah dimenticavo!!!!!
    il problema me lo da solo con l’insopportabile explorer (firefox e safari nessun problema)

  11. Ciao Julius,
    ma se dovessi applicare l’effetto a 3 div nella stessa pagina invece che ad uno solamente?

    Come posso fare?

  12. @nextart: ciao caro, stai inserendo flash con SWFObject?

    @Giacomo: verifico

    @Dario: utilizza la stessa sintassi cambiano le classi e i riferimenti

  13. Werwolfe

    Ciao, volevo chiederti se era possibile, modificare il file, in modo che si apra in orizzontale e non in verticale, come posso fare? c’è un modo?
    o non è possibile?

  14. @WerwolfeCiao Juilius sono riuscito a far funzionare in orizzontale lo script, sostituendo height con width e funziona, ma il div, l’animazione del div inizia dal centro, non è possibile farla iniziare da destra? o sinistra? ti ringrazio sempre in anticipo per la risposta

  15. Giuseppe

    Ciao Juilius, non riesco a sfruttare questo script con il tuo JD FLV Player, nel senso che in Firefox se il player è contenuto nel div nascosto, viene cmq. visualizzato benchè il div sia ancora “compresso”…mentre in IE tutto funziona correttamente! Sto impazzendo, puoi aiutarmi?!?!?

    Grazie!

  16. Si può far aprire il div dal basso verso l’alto?
    grazie!
    ciao e complimenti!

  17. ho provato cosi ma non funziona:

    Web design

    QUESTO DIV PRENDE LE DIMENSIONI
    A SECONDA DEL CONTENUTO DEL DIV

    Web design

    QUESTO DIV PRENDE LE DIMENSIONI
    A SECONDA DEL CONTENUTO DEL DIV

    var collapse2=new animatedcollapse(“cat”, 500, true)

    var collapse1=new animatedcollapse(“cat”, 500, true)

  18. Ciao… ho provato il tutto e funziona…
    Però se lascio aperto un div e poi ricarico la stessa pagina (F5) il div rimane aperto..come posso evitare questa cosa?
    Grazie

  19. se lascio aperto un div e poi ricarico la stessa pagina (F5) il div rimane aperto..come posso evitare questa cosa?
    Grazie

Commenti