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

Condividi su:
  • del.icio.us
  • Digg
  • Facebook
  • Upnews
  • Wikio IT
  • Segnalo
  • Sphinn
  • StumbleUpon

, , , , , , , , ,