Il nuovo approccio al web, il cosiddetto Web 2.0, si può apprezzare sotto tanti aspetti di cui quello multimediale è sicuramente quello principale, ma senza il cosiddetto DHTML, o meglio senza l’utilizzo massiccio di Javascript tutto questo non sarebbe stato possibile.
Superata la prima fase di incompatibilità tra browser, di cui ancora ne paghiamo lo scotto, c’è stata la nascita di una miriade di librerie Javascript che hanno dotato il Web di un livello di interattività notevole, inizialmente non pensato. Una di quelle che ha avuto più diffusione è stata Jquery, che ha creato delle solide basi per la sua facile espansione.
Quella che vi presentiamo oggi infatti è una libreria plug-in di JQuery, chiamata Spritely.net che consente di creare fantastiche animazione con la sempre verde tecnica dello sprite e del parallax scrolling.
Per farvi capire le potenzialità vi vorrei far vedere un piccolo significativo esempio fatto da noi di Realm, che vorrei sviluppare in più puntate, perchè noi valiamo (cit. l’Oreal)! In effetti l’uso della libreria è molto semplice, per ora vi mostriamo l’uso della tecnica del parallax scrolling. Ecco il risultato:
In sostanza ci sono 2 immagini, una per il cielo che è fissa, mentre un’altra costituita da onde.
La struttura html è la seguente:
Alla quale applichiamo questo css, che specifica solamente le immagini da applicare come sfondo e null’altro.
#stage{position: relative; top: 0px; left: 0px; z-index: 100; height: 250px; width:100%; overflow: hidden; } .stage {position:absolute; width: 100%;height: 250px; } #bg { background: #aedfe5 url("") 0 0 repeat-x;} #wave1, #wave2{ background: transparent url("") left bottom repeat-x; } Ora la parte interessante è questa seguente, perché con poche righe di codice è possibile creare un bell’effetto, avendo ovviamente scaricato e utilizzato la libreria Spritely.net
(function($) { $(document).ready(function() { $j ('#wave1').pan({fps: 30, speed: 1, dir: 'left'}); $j ('#wave2').pan({fps: 30, speed: 1, dir: 'right'}); }); Ma quanto è divertente e semplice lavorare con queste librerie…e allora perché non aggiungere anche un altro effetto per rendere maggiormente il moto ondoso? Guardate qui sotto!
Pensavo che magari potremmo continuare ad espandere questo piccolo esempio, sempre se siete interessati.
Fateci sapere!