Immagini di sfondo a schermo intero senza sforzo con jQuery

Oggi costruiremo una pagina web semplice e divertente al solo scopo di mostrare Fullscreenr, un piccolo piccolo plugin jQuery che semplifica l'aggiunta di un'immagine di sfondo al tuo sito che si adatta automaticamente alle dimensioni della finestra.

Effettueremo anche alcune azioni @ font-face e rgba per mantenere le cose moderne ed educative sul resto della build. Iniziamo!

dimostrazione

Solo per farti un'idea di ciò che stiamo costruendo, guarda la demo qui sotto. Per vedere il jQuery in azione, ridimensiona la finestra del browser e osserva come l'immagine si adatta dinamicamente.

Guarda la demo

Ora che hai visto come funziona, costruiamolo!

Passaggio 1: afferrare Fullscreenr

La prima cosa che vorrete fare è andare sul sito Web di Fullsreenr e scaricarne una copia. Prendi i file JS e inseriscili in una cartella con un framework di base del sito web: html, css e cartella images.

Passaggio 2: avviare l'HTML

Per iniziare l'HTML, gettato nel codice per una pagina vuota e aggiungere i riferimenti per il foglio di stile e i due file JavaScript.

Design Shack + Fullscreenr

Passaggio 2: selezionare un'immagine di sfondo

Prima di inserire il codice per posizionare la nostra immagine di sfondo, dovremo conoscere la dimensione. Il che ovviamente significa che dobbiamo trovare un'immagine.

Ho catturato l'immagine qui sotto da Faisal. Passa su Flickr Creative Commons. È una fantastica scena di montagna innevata che dovrebbe fare la scenografia perfetta per il nostro sito.

Successivamente, ho ridimensionato l'immagine in modo che fosse 907 px per 680 px. Queste sono le dimensioni che useremo nel prossimo passo.

Passaggio 3: inserisci lo snippet Fullscreenr

Nei file demo del download di Fullscreenr, dovresti trovare il seguente snippet di JavaScript per abilitare il plug-in. L'ho personalizzato un po 'con le dimensioni dell'immagine sopra specificate.

var FullscreenrOptions = {width: 907, height: 680, bgID: '#bgimg'}; jQuery.fn.fullscreenr (FullscreenrOptions);

Tutto quello che devi fare per la tua versione è cambiare l'altezza e la larghezza in modo che corrisponda a quella della tua immagine.

Passaggio 4: HTML del corpo

Di seguito, c'è una porzione di HTML nella pagina demo che dovrai catturare. La struttura può sembrare un po 'strana, ma in realtà tutto ciò che lo sviluppatore ha fatto è applicare l'immagine di sfondo al corpo e creare un contenitore di base (realBody) per poi aggiungere tutto il resto del contenuto. Se non ti piacciono i nomi ID div usati dallo sviluppatore, sentiti libero di cambiarli in qualcosa di più convenzionale.

<img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_4.jpg"> <p>Il plugin viene fornito con una sovrapposizione di immagini a punti punteggiati, mostrati sotto in una visualizzazione ingrandita. Se questo effetto non ti piace, lascia semplicemente fuori!</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_5.jpg"> <p>Se vuoi, puoi fermarti qui e procedere con il tuo design. Se sei interessato a dove andare da qui, finirò con un po 'di design divertente. </p> <h2>Passaggio 6: aggiungere uno sfondo Div e intestazione</h2> <p>Ora che abbiamo la nostra immagine di sfondo, vogliamo centrare un div sulla parte superiore di esso e dargli un riempimento di sfondo. Gli daremo anche un'intestazione di base che pensavo sembrasse appropriata data l'immagine di sfondo innevata. </p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_6.jpg"> <h2>Passaggio 7: aggiungere un'immagine di intestazione</h2> <p>Il prossimo passo è estremamente facile. Tutto quello che devi fare è lanciare un'immagine della stessa larghezza del contenitore (800px).</p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_7.jpg"> <h2>Passaggio 8: aggiungi del testo</h2> <p>In questo passaggio aggiungeremo alla pagina un testo di riempimento di base e nel prossimo aggiungeremo una griglia di immagini. Poiché il testo si collegherà ipoteticamente alle immagini, lo getteremo tutto in una? Griglia? div.</p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_8.jpg"> <h2>Passaggio 9: aggiungere la galleria</h2> <p>Per finire la pagina, inseriremo una semplice galleria di immagini che è fondamentalmente solo una griglia di nove JPG. Per dare credito ai fotografi, ho collegato ciascuno alle immagini di origine originali su Flickr. </p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_9.jpg"> <h2>Conclusione</h2> <p>jQuery e il plugin Fullscreenr presentano la soluzione più semplice e di bell'aspetto che ho trovato per immagini di sfondo scalabili. Se preferisci provare lo stesso effetto con i CSS, dai un'occhiata ai metodi di Chris Coyier su CSS-Tricks. Chris presenta tre possibili alternative, l'ultima delle quali usa puro CSS e funziona molto meglio di altri tentativi CSS che ho visto. </p> <p>Come sempre, grazie per la lettura. Se ti è piaciuto l'articolo dacci un tweet, digg o qualsiasi altro messaggio sociale che puoi fare!</p>