Opret en mus-kontrolleret parallax baggrundseffekt

Sep 12, 2025

hvordan

(Billedkredit: Renaud Rohlinger)

Websteder med Parallax Scrolling fortsætter med at være populære af en grund: De skaber en behagelig og engagerende browseroplevelse for brugeren. Vi har allerede set på den bedste fantastiske Parallax Scrolling Websites at inspirere dig, men hvad gør du, hvis du vil lave en af dine egne?

Heldigvis er Fransk Creative Developer Renaud Rohlinger her for at vise dig rebene for, hvordan du opretter en parallax rullende baggrund, som du kan styre med musen. Tjek de fantastiske resultater på hans site. , og lær derefter fra Rohlinger selv under, hvordan du kan replikere effekten i dit næste projekt.

Du kan også prøve en af disse Website Builders. , og mens du overvejer din webstedsydelse, skal du kontrollere din Web Hosting. Tjenesten arbejder for dig. Fik et mediehundrende websted? Sikkerhedskopiere med pålidelige Sky lagring .

01. Definer HTML-dokumentrammen

Det første skridt er at definere rammerne 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 kroppsektionen til at definere sidens indholdselementer i trin 2.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; hoved & gt;
& lt; titel & gt; parallax baggrund & lt; / titel & gt;
& lt; link rel = "stylesheet" type = "tekst / css"
href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / Head & GT;
& lt; body & gt;
   *** trin 2 her
& lt; / body & gt;
& lt; / html & gt;

02. Identificer HTML-indholdet

Kropsindholdet består af displayetekst og en divbeholder ved hjælp af Data-Parallax. attribut. Det er dette beholderelement, der vil blive brugt til parallax baggrund, med hvert af dets barnelementer, der skal styles med de krævede baggrundsbilleder. I dette eksempel har beholderen tre billedlag, der skal oprettes fra Child Div-elementerne.

 & lt; h1 & gt; Hej! & Lt; / h1 & gt;
& lt; div data-parallax & gt;
   & lt; DIV & GT; / DIV & GT;
   & lt; DIV & GT; / DIV & GT;
   & lt; DIV & GT; / DIV & GT;
& lt; / div & gt;

03. Opret en CSS Parallax Container

Opret en ny fil kaldet stilarter.css. . Det første skridt i denne fil indstiller standardindholdets farve til at være hvid, og indstillingerne for parallax baggrundsbeholderen. Fast positionering påføres parallaxbeholderen, så den forbliver i samme position som indhold ruller over det. En standardfarve anvendes som sidefarven, mens et negativt Z-indeks gør det muligt for beholderen at blive vist under sidens indhold.

 HTML, krop {
   Farve: #fff;
}
[Data-Parallax] {
   Position: Fast;
   Bredde: 100VW;
   Højde: 100Vh;
   TOP: 0;
   Venstre: 0;
   z-index: -1;
   Baggrundsfarve: # 000;
}

04. Opsæt CSS Parallax Layers

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

 [Data-Parallax] & GT; * {
   position: absolut;
   Bredde: 100VW;
   Højde: 100Vh;
   BAGGRUND-Gentag: Gentag;
   Baggrundsstørrelse: 20VW 20VW;
}

05. Brug CSS baggrundslag

Mens hvert af billedlagene deler positionerne og størrelsesindstillingerne, der er defineret i trin 4, bruger hvert lag et unikt billede. NTH-Child Selector bruges til at henvise hvert enkelt element i parallaxbeholderen. Baggrundsbilledattributten bruges til at tegne to linjer, der skaber en gittervirkning, når den er flisebelagt. Lavere lag Brug mørkere farver til at hjælpe med at give en dybde.

 [Data-Parallax] & GT; *: nth-barn (1) {
   baggrundsbillede:
      lineær gradient (til højre, # 333 1px,
  gennemsigtig 1px),
      Lineær gradient (til bund, # 333 1px,
  gennemsigtig 1px);
}
[Data-Parallax] & GT; *: nth-barn (2) {
   baggrundsbillede:
      Lineær-gradient (til højre, # 777 1px,
gennemsigtig 1px),
      lineær gradient (til bund, # 777 1px,
gennemsigtig 1px);
}
[Data-Parallax] & GT; *: nth-barn (3) {
   baggrundsbillede
      lineær-gradient (til højre, #fff,
gennemsigtig 1px),
      lineær gradient (til bund, #fff 1px,
 gennemsigtig 1px);
}

06. Udfør JavaScript Layer initiation

Opret en ny fil kaldet Code.js. . Dette trin finder parallaxbeholderen og initierer hvert af sine billedlag med Data-index. Attribut, der vil blive brugt i trin 7. Dette skal udføres fra en funktion, der er tilsluttet browservinduets belastningshændelse, så koden kun udføres, når sidens kropsindhold er klar.

 Window.AddeventListener ("Load", funktion () {
   VAR Container = Dokument.
forespørgselselektor ("[Data-parallax]");
   HARNODES = Container.Children;
   for (var n = 0; n & lt; childnodes.længde; n ++) {
      barnnader [n] .Setattribute ("data-index", n + 1);
   }
   **** trin 7 her
});

07. Beregn JavaScript Mouse Movement

Effekten er afhængig af at flytte de billeder, der er forbundet med hvert parallaxlag som reaktion på musens bevægelse. Den parallaxbeholder, der er identificeret i trin 6, har en mousemove. Hændelseslytter vedhæftet, 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å indeksnummeret, der anvendes i trin 6.

 container.addeventListener ("mousemove",
 funktion (e) {
   Var Elms = This.Children;
   for (Var C = 0; C & Lt; Elms.Length; C ++) {
      VAR MOTION = Parseint (Elms [C].
Getattribute ("Data-Index")) / 10;
      var x = ((e.clientx) * bevægelse) + "px";
      var y = ((e.clienty) * bevægelse) + "px"; elms [c] .style.backgroundposition = x +
"" + Y;
   }
});

Denne artikel blev oprindeligt offentliggjort i Creative Web Design Magazine Webdesigner . Køb problem 290 nu.

Relaterede artikler:

10 bedste CSS-rammer i 2019
Sådan tilføjes animation til SVG med CSS
52 Web Design Tools til at hjælpe dig med at arbejde smartere i 2019

Opret en mus-kontrolleret parallax baggrundseffekt

01. Definer HTML-dokumentrammen

02. Identificer HTML-indholdet

03. Opret en CSS Parallax Container

04. Opsæt CSS Parallax Layers

05. Brug CSS baggrundslag

06. Udfør JavaScript Layer initiation

07. Beregn JavaScript Mouse Movement

hvordan - Mest populære artikler

Sådan oprettes vandsimuleringer

Sådan maler du farverig animationskunst i Photoshop

Sådan opbygges et bloggingssted med Gatsby

Build Cross-Platform Mobile Apps med Googles fladder

Gør realistisk 3D-hår og pels i 3DS MAX og V-RAY

Opret dynamisk bevægelse i en sammensætning

Sådan illustreres til en begivenhed

Lav en hi-troskab prototype i atomisk

Kategorier