L'associazione tra Javascript, immagini e l'idea di 'liquido' o 'fluido' potrebbe far pensare a situazioni come quelle del plugin maxImage per jQuery di cui abbiamo parlato qualche giorno fa: la gestione delle dimensioni delle immagini nel contesto di layout fluidi/liquidi.

Nel caso oggetto di questo post, invece, il concetto di 'liquido' va inteso in senso più o meno letterale, come si può notare da demo :) Alla base dell'effetto una piccola libreria Javascript creata da Andrea Giammarchi che ci presenta il tutto in questo post sul suo blog.

5 CommentiDi' la tua

Il tuo indirizzo email non sarà mostrato pubblicamente. I campi obbligatori sono contrassegnati da *

[...] gestione smart delle immagini in bg, autoresize e altro (jQuery)  >> ed altro effetto liquido >> [...]

tabelle, banner slide, immagini bg | lo stanzino di EngiMedia
tabelle, banner slide, immagini bg | lo stanzino di EngiMedia

Complimenti andr3a, non solo per averlo realizzato tecnicamente. Vogliamo metterci che hai avuto anche una bella idea? ;-)

daweb
daweb

Lo taggo come "splendido" ;-) !!

Giuseppe
Giuseppe

grazie Cesare e grazie EsseZeta. Il logo del *mio* vaio sembra quasi spam, in realtà  é perfetto come modello di esempio. Clickate il pallino alla fine per reverse più effetti random o usate nell'url ?left oppure ?right, ?top o ?bottom, il default. La tecnica é meravigliosamente semplice. Si stretcha un'immagine di N pixels e la si fa muovere in direzione opposta al div con la stessa immagine come background posizionato il quale si espande (o contrae nel caso del reverse) per velocità /scale factor. Tramite aggiustamenti in pixels é quindi possibile far combaciare in un punto ben definito l'immagine reale usata come background con quella in movimento. La cosa bella é che sono due elementi DOM, e le operazioni ottimizzate al punto da poter essere visualizzato in modo fluido e accattivante anche in Google Android oppure iPhone, nonostante la loro limitata potenza di calcolo. Mi fa piacere almeno uno abbia apprezzato, é un effetto che pesa minified e gzipped 1.2Kb senza richiedere alcuna libreria e per di più nessuna libreria di effetti fa questo (fino ad ora, essendo il codice open source sotto licenza Mit Style, tra le più permissive) ... enjoy ^_^

andr3a
andr3a

l'avevo vista ieri... catturato dal logo del mio vaio... ho anche provato (senza riuscirci poi tanto) di comprendere la tecnica... sempre bravo andr3a :p

EsseZeta
EsseZeta