Opret et interaktivt parallaxbillede

Sep 11, 2025

hvordan

Parallax Scrolling er ikke længere den garanterede opmærksomhed - grabber det plejede at være, men der er andre måder at bruge parallax teknikker til at engagere dine besøgende og forbedre din brugererfaring .

Se på Fisks websted , designet af BMO. , og du vil bemærke en anden slags parallax på gang: dets farvestrålende hovedbillede bevæger sig i 3D, som svar på dine musevægter.

5 tips til super-hurtig CSS

Det er en imponerende effekt, der ikke er for svært at implementere; Du skal blot følge disse trin for at give dit websted en iøjnefaldende følelse af dybde.

Opret dit eget iøjnefaldende websted med det perfekte Web Hosting. service og. Website Builder. værktøj. Og undervejs gem dine designfiler i det bedste Sky lagring .

01. Start HTML.

Det første skridt er at definere HTML-dokumentet, som består af HTML-beholderen til opbevaring af hoved- og kropssektionerne. Mens hovedsektionen primært er ansvarlig for at indlæse de eksterne CSS- og JavaScript-ressourcer, gemmes kroppsektionen de indholdselementer, der skal oprettes i trin 02.

 & LT;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; hoved & gt;
& lt; titel & gt; mus scroll & 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. Indholdselementer

Teknikken tillader enhver indholdsbeholder ved hjælp af Data-Parallax-attributten for at vise effekten. Hvert første niveau børneelement vil vise med parallax præsentationen. Dette eksempel indstiller tre barnelag til parallaxen, men du kan tilføje mere, hvis du vil. Du kan også tilføje indhold til disse lag som tekst eller billeder; PNG eller SVG med gennemsigtighed vil fungere bedst.

 & lt; Artikel Data-Parallax & GT;
  & lt; DIV & GT; / DIV & GT;
  & lt; DIV & GT; / DIV & GT;
  & lt; DIV & GT; / DIV & GT;
& lt; / artikel & gt

03. Parallax Container Style

Opret en ny fil kaldet 'Styles.css'. Det første sæt regler i denne fil angiver standardstørrelsen på parallaxbeholderen og dens positionstilstand. Det er vigtigt at bruge relativ positionering, så barnetelementerne kan placeres i forhold til, hvor beholderen er placeret. Bredden og højden er indstillet til at dække hele skærmen for at muliggøre maksimal interaktivitet.

 [Data-parallax] {
  position: relativ;
  Bredde: 100VW;
  Højde: 100Vh;
}

04. Parallax Børn

Hvert af de første niveauelementer inde i dataparallaxbeholderen er dimensioneret og placeret til at fremstå centralt. Sammen med forældrenes relative positionering anvendes procenten som måleenheden, hvilket gør det muligt at placere limning og positionering i forhold til parallaxbeholderen. Til dette eksempel bruges en gennemsigtig rød baggrund til at demonstrere effekten - du kan erstatte dette med PNG- eller SVG-billede af dit valg ved hjælp af @Background: URL ("dit billede her").

 [Data-Parallax] & GT; * {
  position: absolut;
  Bredde: 50%;
  Højde: 50%;
  Venstre: 25%;
  Top: 25%;
  Border: 1px fast # 000;
  Baggrund: RGBA (255,0,0, .25)
}

05. Start javascript

Opret en ny fil kaldet 'CODE.JS'. JavaScript vil blive brugt til at kontrollere svarene på brugerens musinteraktioner. Vi vil ikke have JavaScript til at køre nogen af JavaScript-koden, indtil siden er fuldt indlæst, og dermed koden for trin 06 og 07, der placerer en funktion, der udløses af lasthændelsen, som aktiverer, når vinduet har afsluttet indlæsning.

 vindue.AddeventListener ("Load", funktion () {
  *** trin 6 her
});

06. Node søgning

Javascripts første aktivitet til at udføre umiddelbart efter siden er klar, er at finde alle de parallaxlag. For det første findes parallax containere efterfulgt af deres børn. Hvert barn har et indeksnummer, der anvendes på dem under "Data-Index" -attributten.

 AR NODES = DOCUMENT.Queryselectorall ("[Data-Parallax]");
for (var I = 0; I & lt; nodes.længde; i ++) {
  Var Children = Nodes [i] .Børn;
  for (var n = 0; n & lt; børn.Længde; n ++) {
  børn [n] .Setattribute ("Data-Index", n + 2);
  }
  *** Trin 7 her
}

07. Parallax lyttere.

Det sidste trin er at anvende en begivenhedslytter til enhver musebevægelse, der forekommer over parallaxbeholderen. Eventuelle sådanne handlinger udløser en funktion til at beregne de nye positioner af de parallaxlag baseret på musens position og datalindeksattributten defineret i trin 06 - hvilket resulterer i hvert lag opdatering på forskellige skridt. Resultatet af hver beregning påføres lagene via stilattributten.

 NODES [I] .ADDEVENTLISTENER ("Mousemove", funktion (E) {
  Var Elms = This.Children;
  for (Var C = 0; C & Lt; Elms.Length; C ++) {
  Var Divisor = Parseint (ELMS [C] .Getattribute ("Data-Index"));
  var startx = denne.offsetwidth / 4;
  var startende = this.offsetheight / 8;
  elms [c] .style.left = startx - (((e.screenx / divisor) -e.clientx) / 3) + "px";
  elms [c] .style.top = Starty - (((E.Screeny / Divisor) -E.Clienty) / 3) + "px";
  }
});

Denne artikel blev oprindeligt offentliggjort i udstedelse 272 af Creative Web Design Magazine Webdesigner . Køb problem 272 her eller Abonner på Web Designer her .

Relaterede artikler:

Animere SVG med JavaScript
Opret likvide effekter med WebGL
10 måder at undgå cross-browser kompatibilitetsproblemer

Opret et interaktivt parallaxbillede

01. Start HTML.

02. Indholdselementer

03. Parallax Container Style

04. Parallax Børn

05. Start javascript

06. Node søgning

07. Parallax lyttere.

hvordan - Mest populære artikler

Sådan fremskyndes Retopologi i Maya

10 måder at opbygge bedre 3D World-miljøer

Kom godt i gang med Babel 7

Sådan opretter du et videospil karakter i Zbrush

genskabe en manga klassisk

Hold perfekt versionskontrol med abstrakt

Modellering Kompleks Geometri: 5 Top Tips

Sådan tilføjes data til dine skitse designs

Kategorier