Come creare una semplice TV con HTML e Javascript

Anche gli effetti grafici più semplici possono risultare complessi da realizzare in Javascript, fortunatamente per agevolare la scrittura dei nostri script ci viene incontro la libreria script.aculo.us che in accopiata con Prototype permette di ottenere veloci e semplici transizioni. In questo esempio sfrutteremo script.aculo.us e il suo effetto SwitchOff per creare una nostra TV in HTML e Javascript da accendere e spegnere quando vogliamo e, per non farci mancare niente, potremo anche decidere cosa mandare in onda!

Un’immagine della TV che abbia l’area dello schermo trasparente, in modo che sotto si veda il “film” scelto. Nel nostro caso abbiamo scelto la mitica scena di Spiderpork, vera punta di diamante del divertentissimo Simpson – Il Film. Una GIF animata che ci dia l’illusione che nello schermo ci sia un filmato e non un’immagine statica, molto semplice da realizzare ma di sicuro effetto. Le funzioni Javascript serviranno a dare l’illusione di spegnere/accendere lo schermo.

Per ordinare nello spazio i nostri livelli adotteremo la proprietà z-index che accetta come valore un numero che determinerà la posizione del DIV rispetto agli altri (il DIV in primo piano avrà z-index:1, il secondo z-index:2 e così via). Normalmente i DIV non appena vengono chiusi mandano a capo l’elemento HTML successivo, per eliminare questo inconveniente assegneremo l’attributo position:absolute al livello del filmato e position:relative al livello della TV.

Il lato Javascript grazie a script.aculo.us è ridotto a queste poche righe di codice:

[code lang="Javascript"]
function switchoff(){
new Effect.SwitchOff('switchoff_demo');
}
function accendi(){
new Effect.Appear('switchoff_demo');
}
[/code]

Ed ecco un’anteprima della TV una volta caricato lo script:

In questo caso, la prima funzione spegne la TV con una realistica animazione che caratterizza le vecchie TV a tubo catodico, la seconda al contrario accende la TV con un fade in. E’ possibile scaricare lo script da qui. Chissà cosa direbbe il grande Homer Simpson, vedendo questa scena all’interno di una TV realizzata con CSS e Javascript… Mitico!!! 😀

Via | MatrixTeo Blog