Opret en musekontrolleret parallaks baggrundseffekt

parallax museside
(Billedkredit: Renaud Rohlinger)

Websteder med parallaksrulning er fortsat populære af en grund: de skaber en behagelig og engagerende browseroplevelse for brugeren. Vi har allerede set på det bedste bedøvelse parallaksrulning websteder for at inspirere dig, men hvad laver du, hvis du vil lave en af ​​dine egne?

Heldigvis er den franske kreative udvikler Renaud Rohlinger her for at vise dig rebene til, hvordan du opretter en parallaksrullebaggrund, som du kan kontrollere med musen. Tjek de fantastiske resultater den hans side , og lær derefter af Rohlinger selv nedenfor, hvordan du kan replikere effekten i dit næste projekt.

Du kan også prøve en af ​​disse hjemmesidebygere , og mens du overvejer ydeevnen til dit websted, skal du kontrollere din webhosting tjenesten fungerer for dig. Har du et medietungt sted? Sikkerhedskopier med pålidelig Sky lagring .



hvordan man holder en blyant til tegning

01. Definer HTML-dokumentrammen

parallax museside

Åbning til en monokrom stænkskærm sidestiller straks animerede 3D-baggrunde med japansk typografi(Billedkredit: Renaud Rohlinger)

Det første trin er at definere rammen for HTML-dokumentet. Dette består af HTML-beholderen, der beskriver dokumentet som at have sektioner til hoved og krop. Mens hovedafsnittet forbinder de eksterne JavaScript- og CSS-filer, bruges hovedafsnittet til at definere sideindholdselementerne i trin 2.

Parallax Background *** STEP 2 HERE

02. Identificer HTML-indholdet

Brødets indhold består af displaytekst og en div-container ved hjælp af data-parallaks attribut. Det er dette containerelement, der vil blive brugt til parallaksbaggrunden, hvor hvert af dets underordnede elementer skal designes med de krævede baggrundsbilleder. I dette eksempel har containeren tre billedlag, der skal oprettes fra underordnede div-elementer.

adobe-certificerede associerede eksamensspørgsmål

Hello!

03. Opret en CSS parallax container

parallax museside

Når du ruller ned, bliver tingene mere farverige med opmuntring til at følge kattens karakter og klikke dig igennem til hovedporteføljen(Billedkredit: Renaud Rohlinger)

Opret en ny fil kaldet styles.css . Det første trin i denne fil indstiller standardindholdsfarven til at være hvid og indstillingerne for parallaksbaggrundsbeholderen. Fast positionering anvendes på parallaxbeholderen for at tillade, at den forbliver i samme position, som indholdet ruller over den. En standardfarve anvendes som sidefarven, mens et negativt z-indeks tillader, at beholderen vises under sideindholdet.

html, body{ color: #fff; } [data-parallax]{ position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: -1; background-color: #000; }

04. Opsæt CSS parallax lag

Hvert af billedlagene er indstillet til at bruge absolut positionering med en størrelse, der svarer til browservinduet. Parallaksbilledet i dette eksempel vil være baseret på et bestemt størrelse mønster, der er indstillet til at gentage. Du kan vælge kun at gentage billedet lodret ved hjælp af repeat-y eller vandret ved at gentage-x.



[data-parallax] > *{ position: absolute; width: 100vw; height: 100vh; background-repeat: repeat; background-size: 20vw 20vw; }

05. Brug CSS-baggrundslag

parallax museside

Renaud er ivrig efter at finde udviklingsarbejde fra stedets reklame og spilder ingen chance for at fremvise sin WebGL-dygtighed(Billedkredit: Renaud Rohlinger)

Mens hvert billedlag deler de indstillinger for position og størrelse, der er defineret i trin 4, bruger hvert lag et unikt billede. Nth-child-vælgeren bruges til at henvise til hvert enkelt element i parallaxbeholderen. Baggrundsbilledattributten bruges til at tegne to linjer, der skaber en gittereffekt, når de er flisebelagt. Lavere lag bruger mørkere farver for at give en opfattelse af dybde.

[data-parallax] > *:nth-child(1){ background-image: linear-gradient(to right, #333 1px, transparent 1px), linear-gradient(to bottom, #333 1px, transparent 1px); } [data-parallax] > *:nth-child(2){ background-image: linear-gradient(to right, #777 1px, transparent 1px), linear-gradient(to bottom, #777 1px, transparent 1px); } [data-parallax] > *:nth-child(3){ background-image linear-gradient(to right, #fff, transparent 1px), linear-gradient(to bottom, #fff 1px, transparent 1px); }

06. Udfør JavaScript-laginitiering

Opret en ny fil kaldet code.js . Dette trin finder parallaksbeholderen og indleder hvert af dets billedlag med data-indeks attribut, der vil blive brugt i trin 7. Dette skal udføres fra en funktion, der er knyttet til browservinduets indlæsningshændelse, så koden kun udføres, når sidens kropsindhold er klar.

window.addEventListener('load', function(){ var container = document. querySelector('[data-parallax]'); var childNodes = container.children; for(var n=0; n

07. Beregn JavaScript-musens bevægelse

Effekten er afhængig af at flytte de billeder, der er knyttet til hvert parallaxlag som reaktion på musens bevægelse. Parallaxbeholderen identificeret i trin 6 har en mousemove begivenhedslytter knyttet, som udløser en funktion til at omplacere baggrundsbilleder af parallaxlagene, når der er musebevægelse. Hvert lag har en bevægelsesberegning baseret på det indeksnummer, der blev anvendt i trin 6.

container.addEventListener('mousemove', function(e){ var elms = this.children; for(var c=0; c

Denne artikel blev oprindeligt offentliggjort i kreativt webdesignmagasin Webdesigner . Køb nummer 290 nu.

Relaterede artikler:

er det muligt at tegne en perfekt cirkel