Share
I den här handledningen, den andra i en tvådelarserie, tar vi den fantastiska vektorbaserade illustrationen som produceras i Yulia Sokolovas "Hur man skapar en lång rullningsbakgrund för en webbplats" och kodar upp den till en levande webbplats.
Vi sätter saker ihop så att när du rullar ner från toppen av sidan ser du en "Alien Lander" som gör sin väg att röra ner. I början kommer vi att se en UFO sväva i rymden.
När vi rullar ner kommer UFO att nå atmosfären och bli en "främmande komet".
Och då slutligen, när den passerar genom trädlinjen, blir den en "liten grön man" som gör sin landning på marken.
Ta en titt på live demo!
I det här projektet använder vi SVG-bilder så att vi kan dra nytta av deras förmåga att flytta sig vätskeformigt och deras små filstorlek.
Innan vi börjar kodning behöver du den bild som skapades i del 1 av denna handledningsserie, separerad i fyra SVG-filer:
Du kan exportera dessa SVG-bilder själv från din favorit grafikapp om du vill, eller alternativt hittar du alla fyra bilderna klara för användning i källfilerna på GitHub.
Skapa en ny mapp för ditt projekt och inuti det skapar du en undermapp med namnet "css" och ett annat namngivet "bilder".
Kopiera och klistra in dina fyra SVG-bilder i den nya mappen "bilder".
I mappen "css" skapar du en fil med namnet "style.css".
I huvudmappen skapa en ny fil med namnet "index.html".
Din mappstruktur ska nu se ut så här:
I filen "index.html" lägger du till följande grundläggande HTML för att få väsentliga uppgifter och ladda stilarket:
Scrolling Alien Lander
Det kan tyckas kontraintuitivt, men vi kommer faktiskt att lägga till vår bakgrundsbild med hjälp av en img element snarare än som en CSS-bakgrundsbild. Vi gör det här eftersom:
Nu när du förstår varför vi tar detta tillvägagångssätt, låt oss börja kodning!
Lägg till den här koden i filen "index.html":
Om du förhandsgranskar din fil i en webbläsare bör du se bilden som fyller visningsporten. Det kommer dock fortfarande att finnas något vitt utrymme runt kanterna.
Detta beror på att webbläsare innehåller en liten marginal på kropp element som standard. För att åsidosätta detta lägger du till den här CSS i filen "style.css":
kropp marginal: 0;
Det finns också en annan webbläsars standard vi måste överväga, den för visa egenskapen på bilderna är inställd på i kö. Om du bläddrar till botten på sidan ser du att det för närvarande finns ett litet vitt utrymme under bilden på grund av denna standard. Ändra det genom att lägga till:
img display: block;
Nu ska du se "background.svg" -bilden fylla upp fönstret flush med kanterna, och om du ändrar storleken på fönstrets bredd ser du SVG-bildskalningen själv så att den passar den nya storleken. Höjden på platslayouten ändras också för att upprätthålla det korrekta bildförhållandet för "background.svg" -bilden.
För att göra bilden som vi just placerat beter sig som en bakgrundsbild, behöver vi ett sätt att få resten av vårt innehåll att sitta överst på det i förgrunden. Vi kan uppnå detta genom att lägga till en div element som kommer att fungera som en behållare och sedan ändra dess placera och z-index egenskaper.
I din "index.html" -fil, efter den bild du just lagt till, sätt in den här nya div:
Och i "style.css" lägg till den här CSS:
.förgrund position: absolut; topp: 0; vänster: 0; höjd: 100%; bredd: 100%; z-index: 1;
Låt oss springa igenom vad vi gör med koden ovan.
Först genom att ställa in placera till absolut vi tar elementet ur det vanliga dokumentflödet (vilket annars skulle placera det under bakgrundsbilden), så att vi kan placera det var som helst vi väljer.
Sedan satte vi topp och vänster egenskaper till 0 som flyttar elementet upp till fönstret och horisontellt anpassar det med vår bakgrundsbild.
Därefter ger vi elementet a höjd och bredd av 100%. Detta gör att elementet inte kollapsar till ingenting, gömmer något innehåll inom det.
Slutligen ställer vi in z-index till 1 vilket leder elementet framåt så det sitter framför vår bakgrundsbild (som är standard z-index av auto). Detta förhindrar att innehållet i elementet döljs av bakgrundsbilden.
Vår förgrundsbehållare är nu redo att ha innehåll tillagt det.
Det sätt på vilket vi ska göra vår UFO "land" på marken längst ner är genom att skapa tre paneler, en för varje landningsteg. Vi lägger sedan till motsvarande SVG-bild för varje panel, till exempel "ufo.svg" -filen som en bakgrundsbild med fast position. Bilden förblir sedan på plats under rullning medan bakgrunden rör sig bakom den och skapar illusionen av nedstigningen.
Inuti din "förgrund" div, lägg till det här nya div:
Lägg nu till följande kod till din CSS:
.ufo_section height: 100%; bakgrund: url (... /images/ufo.svg); background-repeat: no-repeat; bakgrundsställning: center; bakgrundsstorlek: 40% auto; bakgrundsbeslut: fast;
I den första raden i vår ovanstående kod ger vi elementet a höjd av 100% för att se till att innehållet blir synligt. Sedan lägger vi till vår "ufo.svg" -bild som bakgrund. Vi ställer in bakgrund-repeat till no-repeat som vi bara vill ha en UFO att dyka upp, och vi gör då bakgrund-positionen Placera bilden i mitten både horisontellt och vertikalt.
Med vår background-storlek egendom, ställer vi in bredden som ett procentbaserat värde och tillåter höjden att automatiskt beräknas. Denna bredd dras från den ursprungliga vektorbilden där UFO: s bredd är ungefär 40% bredden på den övergripande illustrationen.
Genom att ställa in bredden på vår "ufo.svg" -bild i procent, när fönstret ändras och "background.svg" -bilden ändras med den, anpassas även UFO-bilden till dess bredd för att behålla de avsedda proportionerna.
På sista linjen ställer vi in background-fastsättning till fast, vilket innebär att bilden blir fast på plats när vi rullar och ger oss vår illusion om nedstigningen.
Prova att uppdatera din sida och bläddra nu - du bör se UFO-röret vertikalt bland planeterna.
När du rullar ner på din webbplats, när du går ner tillräckligt långt så märker du att UFOen försvinner. Detta händer eftersom vi rullar förbi höjden på ufo_section så vi kan inte längre se bakgrunden.
Vi ska stapla tre paneler så här ovanpå varandra, så att när vi rullar över en och dess bakgrund försvinner följande panels bakgrund visas, skapa effekten av en bild som ersätts av nästa.
Så vi ska nu upprepa processen som vi använde ovan för att infoga bilderna "alien_comet.svg" och "alien_landing.svg".
Till din HTML, lägg till följande just efter din ufo_section div och fortfarande inom din förgrund div:
Sedan till din CSS lägg till dessa nya klasser:
.comet_section height: 100%; bakgrund: url (... /images/alien_comet.svg); background-repeat: no-repeat; bakgrundsställning: center; bakgrundsstorlek: 15% auto; bakgrundsbeslut: fast; .landing_section height: 100%; bakgrund: url (... /images/alien_landing.svg); background-repeat: no-repeat; bakgrundsställning: center; bakgrundsstorlek: 15% auto; bakgrundsbeslut: fast; position: relativ;
Vi använder alla samma kod och tekniker här, med bara bildfilnamnen ändras och bredden på background-storlek fastighet satt till 15% för att passa de smalare bilderna vi just lagt till.
Din "style.css" -fil är nu klar och bör innehålla följande kod:
kropp marginal: 0; img display: block; .förgrund position: absolut; topp: 0; vänster: 0; höjd: 100%; bredd: 100%; z-index: 1; .ufo_section height: 100%; bakgrund: url (... /images/ufo.svg); background-repeat: no-repeat; bakgrundsställning: center; bakgrundsstorlek: 40% auto; bakgrundsbeslut: fast; .com_sektion höjd: 100%; bakgrund: url (... /images/alien_comet.svg); background-repeat: no-repeat; bakgrundsställning: center; bakgrundsstorlek: 15% auto; bakgrundsbeslut: fast; .landing_section height: 100%; bakgrund: url (... /images/alien_landing.svg); background-repeat: no-repeat; bakgrundsställning: center; bakgrundsstorlek: 15% auto; bakgrundsbeslut: fast; position: relativ;
Gå tillbaka till din webbplats nu, bläddra ner och du ska se UFO vända sig in i kometen, sedan lite längre ner vända sig till den "lilla gröna mannen".
Just nu märker vi att vi har några problem att lösa när du rullar, och de är:
Eftersom vår "background.svg" -bild inte har en fast storlek vet vi inte den exakta pixelhöjden som varje panel ska vara innan du laddar. Det som vi kan bestämma oss på är dock den höjd som varje panel ska vara i procent av höjden på "background.svg".
Med jQuery kan vi genomföra denna process:
Medan vi är på det lägger vi också till ett par extra tomma divs för att fungera som distans mellan de olika panelerna och ställa in deras höjd med jQuery också. Om du lägger till mellanslag mellan panelerna kommer det att bli en smidigare övergång, vilket löser problemet med att se "alien_comet.svg" bilden innan "ufo.svg" bilden är borta.
Uppdatera din HTML så det finns en spacer div mellan varje befintlig div som så:
Och i huvudavsnittet laddar du in jQuery genom att lägga till följande:
Innan stängningen
Accentsconagua
Vi vill att den här funktionen ska brinna när sidan först laddas och när den ändras, så lägg till följande kod efter din öppning manus märka:
$ (dokument) .ready (funktion () set_section_heights ();); $ (fönster) .resize (funktion () set_section_heights (););
Inuti set_section_heights () funktion, det första vi behöver göra är att ta reda på vilken höjd vår bakgrundsbild är för närvarande och spara den som en variabel. För att göra så lägg till den här koden:
var doc_height = $ (". background"). höjd ();Med den första delen av koden, $ ( "Bakgrund"), jQuery hittar elementet med klassnamnet bakgrund. Den bifogade .höjd() funktionen får då det elementets pixelhöjd som ett heltal. Detta berättar hur hög vår "background.svg" -bild är och sparar det numret i variabeln doc_height.
Nu ska vi ställa in ett objekt där vi kan definiera:
Vi kommer att iterera genom det här objektet och använda de värden som den innehåller för att ändra storlek på sektionerna i vår förgrund.
Låt oss börja med bara en post i objektet:
var section_heights = "ufo_section": 0.25
Här har vi satt indexet (värdet till vänster) till ufo_section för att matcha klassnamnet på vår första sektion.
Sedan har vi satt värdet till 0,25 vilket är ett annat sätt att uttrycka 25%. I ett ögonblick kommer vi att multiplicera detta värde med det nummer som lagrats i doc_height variabel, dvs höjden på bakgrundsbilden. Genom att göra det säger vi att vi vill ha ufo_section panelen för att vara 25% av den aktuella höjden av "background.svg".
Om till exempel höjden på "background.svg" var 1000px höjden på ufo_section skulle komma ut som 250px:
1000 * 0,25 = 250
Nu när vi har gått igenom hur det här objektet kommer att fungera, låt oss lägga till några poster för de andra elementen vi vill ställa in höjder på. Uppdatera ditt objekt till följande:
var section_heights = "ufo_section": 0.25, "spacer_one": 0.03, "comet_section": 0.36, "spacer_two": 0.06, "landing_section": 0.298
Notera: Jag har valt dessa värden baserat på försök och fel så var det fritt att leka med siffrorna efter att ha slutfört denna handledning för att se effekterna.
section_heights ObjektMed vårt objekt komplett är vi redo att starta iterering genom det och ändra storlek på våra paneler.
Först behöver vi en $ .Each () funktion att iterera section_heights objekt och extrahera indexet och värdet (representerar klassnamnet respektive höjden), från varje post som den innehåller.
Lägg till den här koden efter din section_heights objekt:
$ .each (section_heights, funktion (index, värde) console.log ("Index:" + index, "| Value:" + värde););För att du ska kunna se hur den här upprepade funktionen utmatar index och värde variabler vi använder console.log () att skriva ett litet meddelande till konsolen för varje post i section_heights objekt.
Ladda om din webbplats, öppna Chrome Web Developer Tools (eller motsvarande i din favorit webbläsare) och titta på konsolen. Du borde se detta:
Till vänster om varje meddelande efter Index: du kan se index för varje post, dvs klassnamnen på de element vi vill ändra storlek på.
Till höger om varje meddelande efter Värde: du kan se värde för varje ingång, dvs bråkdelen av den totala höjden vardera panelen bör vara.
Nu istället för att bara logga in dessa data till konsolen, låt oss använda den för att ställa in storlekarna på våra förgrundsavsnitt. Ta bort console.log () linje och ersätt det med följande:
$ ("." + index) .höjd (Math.floor (värde * doc_height));Låt oss bryta ner vad den här linjen gör.
Först har vi $ ("." + index). Vi använder det här för att hitta det element vi vill ändra storlek på. Till exempel med den första posten i vårt objekt the index är inställd på ufo_section. I det här fallet utvärderar den första delen av vår kod att bli $. (".ufo_section"). Med denna kod uppmanas jQuery att söka på sidan för elementet med klassen ufo_section.
Nästa lägger vi till .höjd (...). Med denna kod ställer jQuery höjden på det element som den har hittat, ändrar den till det värde som passerat mellan parenteserna.
Mellan parenteserna ser du värde * doc_height. Det är här vi gör multiplikationen som vi nämnde förut för att beräkna den avsedda panelhöjden. Till exempel har den första posten i vårt objekt värdet 0,25. Detta nummer multipliceras med numret som sparats i doc_height variabel.
Runt multipliceringen av dessa två variabler ser du Math.floor (). Detta runda resultatet av vår multiplicering ner till närmaste heltal.
Så sätter allt ihop, om värdet av doc_height är 5197, den första posten i vårt objekt skulle multiplicera det förbi 0,25 vilket ger oss ett resultat av 1299,25.
Math.floor () kommer att runda det beloppet ner till 1299. Det innebär att vår kod nu ska utvärderas för att bli: $. (".ufo_section"). höjd (1299);
Med denna linje kommer jQuery att hitta elementet med klassen ufo_section och ställ dess höjd till 1299px.
Det sveper upp din HTML och JavaScript. Din färdiga "index.html" -fil bör nu innehålla den här koden:
Scrolling Alien Lander 