ago 06
Altra puntata dello Scriptaculous Wiki dove spiego con un esempio pratico l’effetto SwitchOff!
Per la prima volta i miei Esperimenti si fondono con la sezione Scriptaculous Wiki! Per spiegare infatti l’effetto SwitchOff metteremo subito in pratica l’effetto base per creare una vera e propria TV!
E’ tutto abbastanza semplice, basta creare due div, uno, quello che conterrà il filmato da inserire nella tv, ha la proprietà position:relative, l’altro, il contenitore che rappresenta la tv, ha l’area dedicata allo schermo trasparente in modo da visualizzare il filmato. Per gestire l’ordine dei livelli nello spazio utilizzeremo la proprietà z-index che posizionerà il Filmato Layer sotto il Tv Layer. Inseriremo due funzioni “Accendi TV” e “Spegni TV“, la prima accenderà la tv con un fade, la seconda la spegnerà con il già citato SwitchOff.
Passiamo al codice dell’esempio, questo è quello relativo alla parte HTML:
<body style="padding:10px;"> <div id="container" style="position:relative;z-index:3;width:120px;height:120px;background:url(tv.gif);background-repeat:no-repeat;"> </div> <div id="switchoff_demo" style="position:absolute;z-index:1;top:38px;left:34px;width:90px;height:90px; background:url(spider-pork.gif);"></div> <br/><br/> <a href="javascript:switchoff()">Spegni la tv!</a> | <a href="javascript:accendi()">Accendi</a> </body>
Questo il Javascript:
function switchoff(){
new Effect.SwitchOff('switchoff_demo');
}
function accendi(){
new Effect.Appear('switchoff_demo');
}
Potete osservare l’esempio o scaricare da qui sotto o a destra del titolo.
agosto 6th, 2009 at 17:27
Contento di vedere un mio coetaneo (io sono un 94) serio e che sa css, html, php, javascript…
Bel sito, strano che l’abbia trovato solo ora
ciao
agosto 6th, 2009 at 17:49
Ciao Albyz! Questo è il genere di commento che mi fa piacere e mi spinge a continuare a scrivere sul blog! Spero che il blog continui a piacerti! Un saluto!
agosto 7th, 2009 at 10:20
Sinceramente degli articoli me ne interessano solo alcuni, come quello che parla della differenza tra div e tabelle, oppure i vantaggi del css con il mod rewrite, oppure personalizzare il canale di youtube… Cose piuttosto semplici ma che possono interessare a tanti. Ti consiglio di fare articoli su queste cose utili, ad esempio l’insetto sullo schermo non interessa a molti (specialmente ai web designers). E soprattutto nei design dei siti web hai uno stile molto simile al mio: tante icone, pochi colori, aspetto “pulito” (io questa caratteristica l’ho acquisita dopo l’acquisto di un mac), quindi ti consiglio di fare grafiche per wordpress, di fare tutorial su come creare elementi web 2.0 con photoshop (anche video tutorial) ecc ecc.
Un pò come ha fatto il ragazzo che ha creato artedelweb.it
Ciao e buon lavoro!!
agosto 7th, 2009 at 10:39
Valuterò il tuo consiglio, grazie! A dire il vero questo blog è nato come piccolo “laboratorio” personale, quindi inserisco anche articoli apparentemente inutili ma che sono creativi e dai quali si può partire per altre idee. Ciao!
agosto 7th, 2009 at 15:31
[...] l’articolo completo: Scriptaculous Wiki, creiamo una TV con Effect.SwitchOff! [...]
agosto 8th, 2009 at 00:31
[...] Via | MatrixTeo Blog [...]