Obefläckade helskärmsbakgrundsbilder med jQuery

Idag ska vi bygga en enkel och rolig webbsida med det enda syftet att visa Fullscreenr, ett bra litet jQuery-plugin som gör det enkelt att lägga till en bakgrundsbild till din webbplats som automatiskt anpassar sig till fönsterstorleken.

Vi ska också kasta in något @ font-face och rgba-åtgärder för att hålla sakerna moderna och pedagogiska på resten av byggnaden. Låt oss börja!

demo

Bara så att du kan få en känsla för vad vi bygger, kolla in demon nedan. För att se jQuery in action, ändra storlek på webbläsarfönstret och se hur bilden anpassas dynamiskt.

Visa demo

Nu när du har sett hur det fungerar, låt oss bygga det!

Steg 1: Grab Fullscreenr

Det första du vill göra är att gå till Fullsreenr hemsida och ladda ner en kopia. Ta tag i JS-filerna och släng dem i en mapp med en grundläggande webbplatsram: html, css och bildmapp.

Steg 2: Starta HTML

För att börja HTML-koden, kastas i koden för en tom sida och lägger till referenser för stilarket och de två JavaScript-filerna.

Design Shack + Fullscreenr

Steg 2: Välj en bakgrundsbild

Innan vi lägger in koden för att placera vår bakgrundsbild, behöver vi veta storleken. Det betyder förstås att vi behöver hitta en bild.

Jag tog bilden nedan av Faisal.Saeed på Flickr Creative Commons. Det är en fantastisk snöig bergsplats som borde göra den perfekta inställningen för vår webbplats.

Därefter format jag bilden så att den skulle bli 907px med 680px. Det här är de dimensioner som vi ska använda i vårt nästa steg.

Steg 3: Sätt in Fullscreenr-snippet

I demofilerna i Fullscreenr-hämtningen ska du hitta följande JavaScript-kod för att aktivera plugin. Jag har anpassat den lite med de bilddimensioner som anges ovan.

var FullscreenrOptions = {bredd: 907, höjd: 680, bgID: '#bgimg'}; jQuery.fn.fullscreenr (FullscreenrOptions);

Allt du behöver göra för din egen version är att ändra höjd och bredd för att matcha din egen bild.

Steg 4: Body HTML

Därefter finns det en bit av HTML på demoversidan som du behöver ta. Strukturen kan verka lite skön, men verkligen alla utvecklare har gjort appliceras bakgrundsbilden till kroppen och skapade en grundläggande behållare (realBody) för att du sedan ska lägga till resten av innehållet. Om du inte gillar div-ID-namnen som används av utvecklaren, var god att ändra dem till något mer konventionellt.

<img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_4.jpg"> <p>Pluggen levereras med ett streckat mönsterbildsöverlägg, som visas nedan i en zoomad vy. Om du inte gillar den här effekten, helt enkelt lämna den!</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_5.jpg"> <p>Om du vill kan du stanna här och fortsätta med din egen design. Om du är intresserad av var du ska åka härifrån, avslutar jag med lite rolig design. </p> <h2>Steg 6: Lägg till en bakgrundsdel och en rubrik</h2> <p>Nu när vi har vår bakgrundsbild vill vi centrera en div över toppen och ge den en bakgrundsfyllning. Vi kommer också att ge den en grundläggande rubrik som jag trodde verkade lämplig med tanke på den snöiga bakgrundsbilden. </p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_6.jpg"> <h2>Steg 7: Lägg till en rubrikbild</h2> <p>Nästa steg är extremt enkelt. Allt du behöver göra är att kasta i en bild som är samma bredd som behållaren (800px).</p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_7.jpg"> <h2>Steg 8: Lägg till lite text</h2> <p>I det här steget lägger vi till en del grundläggande fylltext till sidan och i nästa lägger vi till ett galler av bilder. Eftersom texten hypotetiskt knyts till bilderna slänger vi allt i ett? div.</p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_8.jpg"> <h2>Steg 9: Lägg till galleriet</h2> <p>För att avsluta sidan upp, ska vi kasta i ett enkelt bildgalleri som i princip bara är ett nät med nio JPG. För att ge fotograferna kredit, har jag länkat till de ursprungliga källbilderna på Flickr. </p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_9.jpg"> <h2>Slutsats</h2> <p>jQuery och Fullscreenr-plugin presenterar den enklaste och snyggaste lösningen jag har hittat för skalbara bakgrundsbilder. Om du hellre vill ha samma effekt med CSS, kolla in Chris Coyiers metoder på CSS-Tricks. Chris presenterar tre möjliga alternativ, vars sista använder ren CSS och fungerar mycket bättre än andra CSS-försök som jag har sett. </p> <p>Som alltid tack för att du läste. Om du gillade artikeln ger oss en tweet, digg eller någon annan social rop ut du kan komma med!</p>