Innhold
- 01. Definer rammeverket for HTML-dokumenter
- 02. Identifiser HTML-innholdet
- 03. Opprett en CSS-parallaksbeholder
- 04. Sett opp CSS parallax lag
- 05. Bruk CSS bakgrunnslag
- 06. Utfør JavaScript-laginitiering
- 07. Beregn musebevegelse av JavaScript
Nettsteder med parallaksrulling fortsetter å være populære av en grunn: de skaper en hyggelig og engasjerende nettopplevelse for brukeren. Vi har allerede sett på de beste fantastiske parallaksrullingsnettstedene for å inspirere deg, men hva gjør du hvis du vil lage en av dine egne?
Heldigvis er den franske kreative utvikleren Renaud Rohlinger her for å vise deg tauene for hvordan du lager en parallaksrullende bakgrunn som du kan kontrollere med musen. Sjekk de fantastiske resultatene på nettstedet hans, og lær deretter av Rohlinger selv nedenfor om hvordan du kan replikere effekten i ditt neste prosjekt.
Du kan også prøve en av disse nettstedbyggerne, og mens du vurderer ytelsen til nettstedet ditt, må du sjekke at webhotelltjenesten din fungerer for deg. Har du et tungt nettsted? Sikkerhetskopier med pålitelig skylagring.
01. Definer rammeverket for HTML-dokumenter
Det første trinnet er å definere rammeverket for HTML-dokumentet. Dette består av HTML-beholderen som beskriver dokumentet som å ha seksjoner for hode og kropp. Mens head-delen knytter de eksterne JavaScript- og CSS-filene, brukes body-delen til å definere sideinnholdselementene i trinn 2.
! DOCTYPE html> html> head> title> Parallax Background / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> script src = "code.js"> / script> / hode> kropp> * * * TRINN 2 HER / kropp> / html>
02. Identifiser HTML-innholdet
Kroppsinnholdet består av displaytekst og en div-beholder ved hjelp av data-parallaks Egenskap. Det er dette containerelementet som skal brukes til parallaksbakgrunnen, med hvert av de underordnede elementene som skal utformes med de nødvendige bakgrunnsbildene. I dette eksemplet har beholderen tre bildelag som skal opprettes fra underordnede element.
h1> Hei! / h1> div data-parallaks> div> / div> div> / div> div> / div> / div>
03. Opprett en CSS-parallaksbeholder
Opprett en ny fil som heter styles.css. Det første trinnet i denne filen setter standard innholdsfarge til å være hvit, og innstillingene for parallaksbakgrunnsbeholderen. Fast posisjonering brukes på parallaksbeholderen slik at den forblir i samme posisjon som innholdet blar over den. En standardfarge brukes som sidefarge, mens en negativ z-indeks gjør at beholderen kan vises under sideinnholdet.
html, kropp {farge: #fff; } [data-parallax] {posisjon: fast; bredde: 100vw; høyde: 100vh; topp: 0; venstre: 0; z-indeks: -1; bakgrunnsfarge: # 000; }
04. Sett opp CSS parallax lag
Hvert av bildelagene er satt til å bruke absolutt posisjonering med en størrelse som samsvarer med nettleservinduet. Parallaksbildet i dette eksemplet vil være basert på et bestemt størrelse mønster som er satt til å gjenta. Du kan velge å bare gjenta bildet vertikalt ved hjelp av repeat-y, eller horisontalt med repeat-x.
[data-parallaks]> * {posisjon: absolutt; bredde: 100vw; høyde: 100vh; bakgrunn-gjenta: gjenta; bakgrunnsstørrelse: 20vw 20vw; }
05. Bruk CSS bakgrunnslag
Mens hvert av bildelagene deler posisjons- og størrelsesinnstillingene som er definert i trinn 4, bruker hvert lag et unikt bilde. Nth-child-velgeren brukes til å referere til hvert enkelt element i parallaksbeholderen. Bakgrunnsbildeattributtet brukes til å tegne to linjer som skaper en rutenetteffekt når de er flislagt. Lavere lag bruker mørkere farger for å gi en oppfatning av dybde.
[data-parallax]> *: nth-child (1) {bakgrunnsbilde: lineær-gradient (til høyre, # 333 1px, transparent 1px), lineær-gradient (til bunn, # 333 1px, transparent 1px); } [data-parallax]> *: nth-child (2) {bakgrunnsbilde: lineær gradient (til høyre, # 777 1px, transparent 1px), lineær gradient (til bunn, # 777 1px, transparent 1px) ; } [data-parallax]> *: nth-child (3) {bakgrunnsbilde lineær-gradient (til høyre, #fff, gjennomsiktig 1px), lineær-gradient (til bunn, #fff 1px, gjennomsiktig 1px); }
06. Utfør JavaScript-laginitiering
Opprett en ny fil som heter code.js. Dette trinnet finner parallaksbeholderen og starter hvert av bildelagene med dataindeks attributt som skal brukes i trinn 7. Dette må utføres fra en funksjon knyttet til nettleservinduets lasthendelse, slik at koden bare kjøres når sidens kroppsinnhold er klart.
window.addEventListener ("load", function () {var container = document. querySelector ("[data-parallax]"); var childNodes = container.children; for (var n = 0; nchildNodes.length; n ++) {childNodes [n] .setAttribute ("dataindeks", n + 1);} * * * * TRINN 7 HER});
07. Beregn musebevegelse av JavaScript
Effekten er avhengig av å flytte bildene som er knyttet til hvert parallakslag som svar på musebevegelse. Parallaxbeholderen identifisert i trinn 6 har a mousemove hendelseslytter tilknyttet, som utløser en funksjon for å plassere bakgrunnsbilder av parallaxlagene når det er musebevegelse. Hvert lag har en bevegelsesberegning basert på indeksnummeret som ble brukt i trinn 6.
container.addEventListener ("mousemove", funksjon (e) {var elms = this.children; for (var c = 0; celms.length; c ++) {var motion = parseInt (elms [c]. getAttribute ("data-index) ")) / 10; var x = ((e.clientX) * bevegelse) +" px "; var y = ((e.clientY) * bevegelse) +" px "; alm [c] .style.backgroundPosition = x + "" + y;}});
Denne artikkelen ble opprinnelig publisert i kreativt magasin for webdesign Webdesigner. Kjøp utgave 290 nå.
