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.
Categoria: Scripting, Grafica | Permalink
Commenti
1
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 - 13:05
2
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 - 13:12
3
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 - 13:21
4
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.
5
ho usato supersized di cui parla Giovanni in un esperimento che ho fatto qualche mese fa… secondo me è migliore www.pierdomenico.org
6
@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 - 15:25
7
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…
8
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 - 15:39
9
@6 Eh già l’immagine purtroppo è 500×375px
Supersized l’ho usato ma mi è parso davvero pesantissimo
10
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%…
11
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 - 08:56
12
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 - 04 Agosto 2010 - 18:13