Share
I denne opplæringen, den andre i en todelerserie, tar vi den fantastiske vektorbaserte illustrasjonen som er produsert i Yulia Sokolovas "Hvordan lage en langrullende bakgrunn for et nettsted" og kodes det opp i et levende nettsted.
Vi setter ting sammen slik at når du ruller ned fra toppen av siden, ser du en "Alien Lander" som gjør veien til å røre seg ned. I begynnelsen vil vi se en UFO sveve i rommet.
Når vi ruller ned, vil UFO nå atmosfæren og bli en "fremmedkammer".
Og så til slutt, når den passerer gjennom trelinjen, vil den bli til en "liten grønn mann" som gjør sin landing på bakken.
Ta en titt på live demo!
I dette prosjektet bruker vi SVG-bilder, slik at vi kan dra nytte av deres evne til å flytte seg vesentlig, og deres små filstørrelse.
Før vi begynner koding, trenger du bildet som ble opprettet i del 1 av denne opplæringsserien, delt i fire SVG-filer:
Du kan eksportere disse SVG-bildene selv fra din foretrukne grafikkapp hvis du vil, eller alternativt finner du alle fire bildene klare til bruk i kildefilene på GitHub.
Opprett en ny mappe for prosjektet ditt og inne i det lage en undermappe kalt "css" og en annen kalt "bilder".
Kopier og lim inn dine fire SVG-bilder i den nye "bilder" -mappen.
I mappen "css" lagrer du en fil med navnet "style.css".
I hovedmappen opprett en ny fil med navnet "index.html".
Din mappestruktur skal nå se slik ut:
I filen "index.html" legger du til følgende grunnleggende HTML for å få essensielle og laste stilarket:
Scrolling Alien Lander
Det kan virke counterintuitivt, men vi skal faktisk legge til vårt bakgrunnsbilde ved hjelp av en img element i stedet for som et CSS bakgrunnsbilde. Vi gjør dette fordi:
Nå som du forstår hvorfor vi tar denne tilnærmingen, la oss starte kodingen!
I filen "index.html" legger du til denne koden:
Hvis du forhåndsviser filen i en nettleser, bør du se bildet fylle visningsporten. Imidlertid vil det fortsatt være litt hvitt mellomrom rundt kantene.
Dette skyldes at nettlesere inkluderer en liten margin på kropp element som standard. For å overstyre dette legger du til denne CSS-filen i "style.css" -filen:
kropp margin: 0;
Det er også en annen nettleser standard vi må overstyre, den av vise Egenskapen på bildene er satt til på linje. Hvis du ruller ned til bunnen av siden, ser du at det for øyeblikket er et lite hvitt mellomrom på bildet på grunn av denne standarden. Endre det ved å legge til:
img display: block;
Du bør nå se "background.svg" -bildet fylle opp vinduet flush med kantene, og hvis du endrer størrelsen på vinduets bredde, ser du SVG-bildet rescale selv for å passe til den nye størrelsen. Høyden på nettstedoppsettet endres også for å opprettholde det riktige aspektforholdet for "background.svg" -bildet.
For å få bildet som vi nettopp har satt opp som et bakgrunnsbilde, trenger vi en måte å gjøre resten av innholdet sitt over toppen av det i forgrunnen. Vi kan oppnå dette ved å legge til en div element som vil fungere som en beholder, og deretter endre sitt stilling og z-indeks eiendommer.
I filen "index.html", etter bildet du nettopp har lagt til, sett inn denne nye diven:
Og i "style.css" legg til dette CSS:
.forgrunnen posisjon: absolutt; topp: 0; venstre: 0; høyde: 100%; bredde: 100%; z-indeks: 1;
La oss løpe gjennom det vi gjør med koden ovenfor.
Først ved å sette inn stilling til absolutte vi tar elementet ut av den vanlige dokumentflyten, (som ellers ville legge den under bakgrunnsbildet), slik at vi kan plassere det hvor som helst vi velger.
Så satte vi topp og venstre egenskaper til 0 som skifter elementet opp til toppen av vinduet og justerer det horisontalt med vårt bakgrunnsbilde.
Etter det gir vi elementet a høyde og bredde av 100%. Dette sørger for at elementet ikke kollapser til ingenting, gjemmer noe innhold i det.
Til slutt satte vi z-indeks til 1 som bringer elementet videre slik at det sitter foran bakgrunnsbildet vårt (som er på standard z-indeks av auto). Dette forhindrer at innholdet i elementet blir skjult av bakgrunnsbildet.
Vår forgrunnsbeholder er nå klar til å ha innhold lagt til det.
Måten vi skal gjøre på UFO "land" på bakken, er å skape tre paneler, ett for hvert landingsstadium. Vi legger da til det tilsvarende SVG-bildet for hvert panel, for eksempel "ufo.svg" -filen som et bakgrunnsbilde med fast posisjon. Bildet vil da forbli på plass under rulle mens bakgrunnen beveger seg bak den, noe som skaper illusjonen av nedstigningen.
Inne i "forgrunnen" div, legg til dette nye div:
Legg nå følgende kode i CSS:
.ufo_section høyde: 100%; bakgrunn: url (... /images/ufo.svg); bakgrunn-gjentak: ikke-gjenta; bakgrunnsposisjon: senter; bakgrunnsstørrelse: 40% auto; bakgrunnsbeslutning: fast;
I den første linjen i vår kode ovenfor gir vi elementet a høyde av 100% for å sikre at innholdet blir synlig. Deretter legger vi til vårt "ufo.svg" bilde som bakgrunn. Vi setter inn background-repeat til no-repeat som vi bare vil ha en UFO å dukke opp, og vi lager da Bakgrunnen-stilling plasser bildet i midten både horisontalt og vertikalt.
Med vår background-size Egenskapen, vi setter bredden som en prosentbasert verdi og tillater at høyden automatisk beregnes. Denne bredden er trukket fra det originale vektorgravet hvor bredden på UFO er omtrent 40% bredden av den samlede illustrasjonen.
Ved å sette bredden på bildet "ufo.svg" i prosent, når vinduet blir endret og bildet "background.svg" endres med det, vil UFO-bildet også justere bredden for å beholde de tiltenkte proporsjonene.
På den endelige linjen satt vi Bakgrunnen-feste til fast, noe som betyr at bildet vil bli løst på plass mens vi ruller, og gir oss vår illusjon om nedstigningen.
Prøv å forfriske siden og rulle nå - du bør se UFO beveger seg vertikalt i mellom planeter.
Når du ruller ned på nettstedet ditt, vil du legge merke til at UFO forsvinner når du går ned langt nok. Dette skjer fordi vi ruller forbi høyden på ufo_section panel så vi kan ikke lenger se bakgrunnen på det punktet.
Vi skal stable tre paneler som dette på toppen av hverandre, slik at når vi ruller forbi en og dens bakgrunn forsvinner bakgrunnen til følgende panel vises, skaper effekten av ett bilde som erstattes av det neste.
Så vi gjentar nå prosessen vi brukte ovenfor for å sette inn bildene "alien_comet.svg" og "alien_landing.svg".
Til HTML-koden din, legg til følgende like etter din ufo_section div og fortsatt inne i forgrunnen din div:
Deretter legger du til disse nye klassene i CSS:
.comet_section høyde: 100%; bakgrunn: url (... /images/alien_comet.svg); bakgrunn-gjentak: ikke-gjenta; bakgrunnsposisjon: senter; bakgrunnsstørrelse: 15% automatisk; bakgrunnsbeslutning: fast; .landing_section høyde: 100%; bakgrunn: url (... /images/alien_landing.svg); bakgrunn-gjentak: ikke-gjenta; bakgrunnsposisjon: senter; bakgrunnsstørrelse: 15% automatisk; bakgrunnsbeslutning: fast; stilling: relativ;
Vi bruker alle de samme kodene og teknikkene her, med bare bildefilnavnene endret og bredden på background-size eiendom satt til 15% for å passe til de smalere bildene vi nettopp har lagt til.
Din "style.css" -fil er nå ferdig og bør inneholde følgende kode:
kropp margin: 0; img display: block; .forgrunnen posisjon: absolutt; topp: 0; venstre: 0; høyde: 100%; bredde: 100%; z-indeks: 1; .ufo_section høyde: 100%; bakgrunn: url (... /images/ufo.svg); bakgrunn-gjentak: ikke-gjenta; bakgrunnsposisjon: senter; bakgrunnsstørrelse: 40% auto; bakgrunnsbeslutning: fast; .com_seksjon høyde: 100%; bakgrunn: url (... /images/alien_comet.svg); bakgrunn-gjentak: ikke-gjenta; bakgrunnsposisjon: senter; bakgrunnsstørrelse: 15% automatisk; bakgrunnsbeslutning: fast; .landing_section høyde: 100%; bakgrunn: url (... /images/alien_landing.svg); bakgrunn-gjentak: ikke-gjenta; bakgrunnsposisjon: senter; bakgrunnsstørrelse: 15% automatisk; bakgrunnsbeslutning: fast; stilling: relativ;
Gå tilbake til nettstedet ditt nå, rul ned og du bør se UFO-turneringen i kometen, så litt lenger ned blir til "lille grønne mannen".
Akkurat nå ser du at vi har et par problemer å løse når du ruller, og de er:
Fordi bildet vårt "background.svg" ikke har en fast størrelse, vet vi ikke hvilken eksakt pixelhøyde hvert panel burde være før du laster inn. Det vi kan bestemme oss på er imidlertid høyden hvert panel skal være i prosent av høyden på "background.svg".
Ved hjelp av jQuery kan vi implementere denne prosessen:
Mens vi er på det, legger vi også inn et par ekstra tomme divs for å fungere som mellomrom mellom hvert panel og sette høyde ved hjelp av jQuery også. Å legge mellomrom mellom panelene vil gi en jevnere overgang, og løse problemet med å se bildet "alien_comet.svg" før bildet "ufo.svg" er borte.
Oppdater HTML, så det er en spacer div mellom hver eksisterende div som:
Og i hodet delen, last inn i jQuery ved å legge til følgende:
Før avslutningen
Accentsconagua
Vi vil at denne funksjonen skal brenne når siden først lastes, og når den endres, for å oppnå dette legger du også til følgende kode etter åpningen manus stikkord:
$ (dokument) .ready (funksjon () set_section_heights ();); $ (vindu) .resize (funksjon () set_section_heights (););
Inne i set_section_heights () funksjon, det første vi må gjøre er å finne ut hvor høyt vårt bakgrunnsbilde er, og lagre det som en variabel. For å gjøre dette legg til denne koden:
var doc_height = $ (". bakgrunn"). høyde ();Med den første delen av koden, $ ( "Bakgrunn"), jQuery finner elementet med klassenavnet bakgrunn. Den vedlagte .høyde() funksjonen får det elementets pikselhøyde som et heltall. Dette forteller oss hvor høyt vårt "background.svg" -bilde er og lagrer det nummeret i variabelen doc_height.
Nå skal vi sette opp et objekt der vi kan definere:
Vi kommer til å iterere gjennom dette objektet og bruke verdiene det inneholder for å endre størrelsen på seksjonene i forgrunnen vår.
La oss starte med bare en oppføring i objektet:
var section_heights = "ufo_section": 0.25
Her har vi satt indeksen, (verdien til venstre), til ufo_section for å matche klassenavnet til vår første seksjon.
Da har vi satt verdien til 0.25 som er en annen måte å uttrykke 25% på. I et øyeblikk skal vi multiplisere denne verdien med nummeret som er lagret i doc_height variabel, dvs. høyden på bakgrunnsbildet. Ved å gjøre dette vil vi si at vi vil ha ufo_section panelet til å være 25% av den nåværende høyden av "background.svg".
For eksempel, hvis høyden på "background.svg" var 1000px høyden på ufo_seksjonen skulle komme ut som 250px:
1000 * 0,25 = 250
Nå som vi har gått gjennom hvordan dette objektet vil fungere, la vi legge til noen oppføringer for de andre elementene vi vil sette høyder på. Oppdater objektet ditt på følgende måte:
var section_heights = "ufo_section": 0.25, "spacer_one": 0.03, "comet_section": 0.36, "spacer_two": 0,06, "landing_section": 0.298
Merk: Jeg valgte disse verdiene basert på prøve og feil, så vær så snill å leke med tallene etter å ha fullført denne veiledningen for å se effektene.
section_heights GjenstandMed vårt objekt fullført er vi klare til å starte iterering gjennom det og endre størrelsen på panelene våre.
Først trenger vi en $ .Hver () funksjon for å iterere section_heights objekt og trekk ut indeksen og verdien (henholdsvis klassenavn og høyde), fra hver oppføring den inneholder.
Legg til denne koden etter din section_heights gjenstand:
$ .each (section_heights, funksjon (indeks, verdi) console.log ("Index:" + index, "| Value:" + value););For å tillate deg å se hvordan den ovennevnte iterasjonsfunksjonen utdataer index og verdi variabler, bruker vi console.log () å skrive en liten melding til konsollen for hver oppføring i section_heights gjenstand.
Oppdater nettstedet ditt, åpne Chrome Web Developer Tools (eller tilsvarende i din foretrukne nettleser), og se på konsollen. Du bør se dette:
Til venstre for hver melding etter indeks: du kan se index for hver oppføring, det vil si klassenavnene til elementene vi ønsker å endre størrelse på.
Til høyre for hver melding etter Verdi: du kan se verdi for hver oppføring, dvs. brøkdel av totalhøyde hvert panel skal være.
Nå, i stedet for å bare logge disse dataene til konsollen, la oss bruke den til å angi størrelsen på forgrunnsdelene våre. Slett console.log () linje og erstatt den med dette:
$ ("." + indeks) .height (Math.floor (verdi * doc_height));La oss bryte ned hva denne linjen gjør.
Først har vi $ ("." + indeks). Vi bruker dette for å finne elementet vi ønsker å endre størrelse på. For eksempel, med den første oppføringen i objektet vårt index er satt til ufo_section. I så fall vurderer den første delen av koden vår å bli $. (".ufo_section"). Med denne koden blir jQuery bedt om å søke på siden for elementet med klassen ufo_section.
Neste legger vi til .høyde (...). Med denne koden vil jQuery sette høyden på elementet den har funnet, endre den til verdien som er sendt inn mellom parentesene.
I mellom brakettene vil du se verdi * doc_height. Det er her vi gjør multiplikasjonen vi tidligere nevnte for å beregne den planlagte panelhøyden. For eksempel har den første oppføringen til objektet verdien 0.25. Dette nummeret blir multiplisert med nummeret som er lagret i doc_height variabel.
Rundt multiplikasjonen av de to variablene vil du se Math.floor (). Dette runder resultatet av vår multiplikasjon ned til nærmeste hele tall.
Så setter alt sammen, hvis verdien av doc_height er 5197, den første oppføringen i vårt objekt vil multiplisere det ved 0.25 gir oss et resultat av 1299,25.
Math.floor () vil rundt det beløpet ned til 1299. Dette betyr at vår kode nå skal vurderes til å bli: $. (".ufo_section") .height (1299);
Med denne linjen vil jQuery finne elementet med klassen ufo_section og sett høyden til 1299px.
Det bryter opp HTML og JavaScript. Din ferdige "index.html" -fil skal nå inneholde denne koden:
Scrolling Alien Lander 