Sfondi stretch con jQuery

giovedì 22 luglio 2010 - 12:46

di napolux

Backstretch è un semplicissimo plugin jQuery che vi permetterà  di aggiungere alle vostre pagine web un background a resize dinamico: l’immagine di sfondo scelta verrà  ridimensionata in base alle dimensioni della finestra del browser, il tutto in una singola riga di codice:

$.backstretch("http://tuosito.it/immagine.jpg");

Con l’avvento di monitor ad alta risoluzione la possibilità  di “riempire” tutto lo schermo con una singola immagine (di solito una fotografia) indipendentemente dalla dimensione della finestra è assolutamente irrinunciabile per tutti quei siti web che puntano sempre e comunque sull’alto impatto grafico, BackStretch risolve elegantemente e semplicemente questo problema.

Tags:, ,

Categoria: Grafica | Commenta

Commenti per Sfondi stretch con jQuery

A giudicare dall’esempio sul sito non funziona molto bene. Intanto a grandezze diverse, a me l’immagine cambia (compaiono o scompaiono dei tetti in basso). Inoltre l’immagine é sgranata per colpa del resize, decisamente non il massimo per un sito dall’alto impatto grafico.

# - Postato da Andrea 22 luglio 2010 alle 13:05

Probabilmente ha più senso preparare diverse immagini a varie grandezze, e cambiarle dinamicamente a seconda della dimensione della finestra, invece di fare il resize.

Se invece é necessario che l’immagine combaci perfettamente ad ogni risoluzione bisogna aspettare un po’ di tempo e poi usare background-size: 100%

Se dovessi fare una cosa del genere in un mio sito, credo che userei modernizr per vedere se il secondo approccio é fattibile, e per i browser che non lo supportano userei il primo.

# - Postato da Andrea 22 luglio 2010 alle 13:12

Bhe, che l’immagine sia sgranata immagino sia una naturale conseguenza della sua bassa qualità , non dello script in se.
Idem per i dettagli (i tetti) in basso.
Perché la foto non venga deformata, da qualche parte i dettagli devono scomparire a seconda di come ridimensioni la finestra del browser.

A me sembra una valida alternativa

# - Postato da Davide 22 luglio 2010 alle 13:21

Ho trovato anche questo articolo in si parla di un altro plugin jQuery che permette di impostare un’immagine come sfondo che si adatta automaticamente alle dimensioni della finestra sfondo a tutto schermo con jQuery.
Altra caratteristica molto interessante, permette di realizzare una vero e proprio slideshow di immagini, con transazioni e preloading, come sfondo del layout web.

# - Postato da Giovanni 22 luglio 2010 alle 13:30

ho usato supersized di cui parla Giovanni in un esperimento che ho fatto qualche mese fa… secondo me é migliore http://www.pierdomenico.org

# - Postato da Daniel 22 luglio 2010 alle 15:23

@Davide: E per far vedere un esempio di sfondo ridimensionabile a tutte le grandezze prendi un’immagine di bassa qualità ? :-/

# - Postato da Andrea 22 luglio 2010 alle 15:25

a me l’immagine cambia (compaiono o scompaiono dei tetti in basso)

non é mica un errore…
dipende dai rapporti tra le due dimensioni del rettangolo…
se la finestra solo la stringi in larghezza compaiono i tetti, se la rimpicciolisci in proporzione esatta invece no…
deve essere così, dal momento che altrimenti l’immagine verrebbe strechata…

per la sgranatura… quello é un altro paio di maiche…
ma per il bg uno sceglie roba tipo nuvole proprio per ovviare a problemi del genere…

# - Postato da EsseZeta 22 luglio 2010 alle 15:33

Che non sia un errore dipende dal tipo di immagine che uno mette di sfondo. Se ad esempio é una cornice, non é un problema se é distorta, ma lo é se scompare uno dei lati.

# - Postato da Andrea 22 luglio 2010 alle 15:39

@6 Eh già  l’immagine purtroppo é 500x375px

Supersized l’ho usato ma mi é parso davvero pesantissimo

# - Postato da Napolux 22 luglio 2010 alle 15:41

Se ad esempio é una cornice, non é un problema se é distorta

senza nessuna polemica, andrea, solo per ragionare…
ma non sono affatto d’accordo…
una cornice uno spessore ce lo avrà  sempre… no?
e se uno fa come me che metto due finestre una accanto all’altra? e quindi le stringo a metà  larghezza dello schermo…

lo so sono casi particolari…
diciamo comunque che lo script in oggetto ragiona per certe tipologie di sfondi e che per altri servono script che invece rendono l’immagine sempre al 100%…

# - Postato da EsseZeta 22 luglio 2010 alle 19:10

lo script mi piace molto!! per alcuni progetti secondo me é utile, anche se, in linea di principio non mi piace molto inserire una foto come background a tutto schermo…

# - Postato da Marco Pini 28 luglio 2010 alle 08:56

Molto utile davvero questo Script, bisogna però tenere sempre conto della grandezza della foto… Sono per una soluzione più efficace secondo me: unire lo strech a un cambio dinamico delle immagini a diverse risoluzioni.

# - Postato da Softplace.it 4 agosto 2010 alle 18:13

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>