Creați un efect de fundal paralax controlat de șoarece

Sep 12, 2025

să

(Credit Imagine: Renaud Rohlinger)

Site-urile cu derularea Parallax continuă să fie populară pentru un motiv: creează o experiență plăcută și angajată de navigare pentru utilizator. Ne-am uitat deja la cea mai bună uimitoare Parallax defilând Site-uri Web pentru a vă inspira, dar ce faceți dacă doriți să faceți una dintre dvs.?

Din fericire, dezvoltatorul de creație franceză Renaud Rohlinger este aici pentru a vă arăta cablurile pentru a crea un fundal de derulare paralax pe care îl puteți controla cu mouse-ul. Verificați rezultatele uimitoare Site-ul său , apoi învățați de la Rohlinger însuși mai jos despre cum puteți replica efectul în următorul proiect.

De asemenea, puteți încerca una dintre acestea Constructori de site-uri web , și în timp ce vă gândiți la performanța site-ului dvs., verificați-vă web hosting Serviciul funcționează pentru dvs. Ai un site greu mass-media? Înapoi cu fiabilitate Stocare in cloud .

01. Definiți cadrul documentului HTML

Primul pas este definirea cadrului documentului HTML. Aceasta constă în recipientul HTML care descrie documentul ca având secțiuni pentru cap și corp. În timp ce secțiunea capului leagă fișierele JavaScript extern și CSS, secțiunea corpului este utilizată pentru a defini elementele de conținut al paginii în pasul 2.

 și lt;! Doctype html & gt;
& lt; html & gt;
& lt; head & gt;
& title & gt; pararallax fundal & lt; / titlu & gt;
& Link Rel = "Stylesheet" Type = "Text / CSS"
href = "stiluri.css" / & gt;
& lt; script src = "code.js" & gt; / lt; / script & gt;
& lt; / head & gt;
& lt; corp & gt;
   *** Pasul 2 aici
& lt; / corp & gt;
& lt; / html & gt;

02. Identificați conținutul HTML

Conținutul corpului constă în textul de afișare și un container DIV folosind Data-paralax. atribut. Este acest element de container care va fi utilizat pentru fundalul parallax, fiecare dintre elementele sale de copil care urmează să fie înalte cu imaginile de fundal necesare. În acest exemplu, recipientul are trei straturi de imagine care urmează să fie create de la elementele DIV ale copilului.

 H1 & gt; salut! & Lt; / h1 & gt;
"DATA DIV-PARALLAX & GT;
   & lt; div & gt; / lt; / div & gt;
   & lt; div & gt; / lt; / div & gt;
   & lt; div & gt; / lt; / div & gt;
& lt; / div & gt;

03. Creați un container CSS parallax

Creați un fișier nou numit stiluri.Css. . Primul pas din acest fișier stabilește culoarea implicită a conținutului să fie albă și setările pentru containerul de fundal Parallax. Poziționarea fixă este aplicată la recipientul Parallax pentru a permite să rămână în aceeași poziție cu conținutul derulează peste el. O culoare implicită este aplicată ca culoarea paginii, în timp ce un indice Z negativ permite ca containerul să apară sub conținutul paginii.

 HTML, corpul {
   Culoare: #ffff;
}
[Data-paralax] {
   Poziție: fixă;
   Lățime: 100VW;
   Înălțime: 100VH;
   Top: 0;
   stânga: 0;
   Z-Index: -1;
   Culoare de fundal: # 000;
}

04. Configurați straturile CSS parallax

Fiecare dintre straturile de imagine este setat să utilizeze poziționarea absolută cu o dimensiune pentru a se potrivi cu fereastra browserului. Imaginea Parallax din acest exemplu se va baza pe un model specific de dimensiuni care urmează să repete. Puteți alege să repetați doar imaginea verticală utilizând repetarea-y sau orizontal utilizând repetarea-X.

 [Data-paralax] & GT; * {{
   Poziție: absolută;
   Lățime: 100VW;
   Înălțime: 100VH;
   Fundal-Repeat: Repetați;
   Dimensiune de fundal: 20VW 20VW;
}

05. Utilizați straturi de fundal CSS

În timp ce fiecare dintre straturile de imagine au setările de poziție și dimensiune definite la pasul 4, fiecare strat utilizează o imagine unică. Selectorul NTH-COPIL este utilizat pentru a face referire la fiecare element individual din recipientul Parallax. Atributul de imagine de fundal este utilizat pentru a desena două linii care creează un efect de rețea atunci când este gresie. Straturile inferioare Utilizați culori mai întunecate pentru a vă ajuta să oferiți o percepție a adâncimii.

 [Data-paralax] & GT; *: NTH-COPIL (1) {
   imagine de fundal:
      linear-gradient (la dreapta, # 333 1px,
  transparent 1px),
      linear-gradient (în partea de jos, # 333 1px,
  transparent 1px);
}
[Data-parallax] & gt; *: NTH-COPIL (2) {
   imagine de fundal:
      linear-gradient (la dreapta, # 777 1px,
transparent 1px),
      Gradient linear (în partea de jos, # 777 1px,
transparent 1px);
}
[Data-parallax] & gt; *: NTH-COPIL (3) {
   imagine de fundal
      linear-gradient (la dreapta, #fff,
transparent 1px),
      linear-gradient (în partea de jos, #fff 1px,
 transparent 1px);
}

06. Efectuați inițierea stratului JavaScript

Creați un fișier nou numit Cod.js. . Acest pas găsește containerul paralax și inițiază fiecare din straturile sale de imagine cu Indexul de date Atribut care va fi utilizat în etapa 7. Aceasta trebuie efectuată dintr-o funcție atașată la evenimentul de încărcare al ferestrei browserului, astfel încât codul să fie executat numai când conținutul corpului paginii este gata.

 fereastră.AdDeventlistener ("încărcare", funcția () {
   Var container = document.
QuerySelector ("[date-parallax]");
   VAR COPILODES = container.children;
   pentru (var n = 0; n & lt; childnodes.Length; n ++) {
      Childnoduri [N] .SetAttribute ("Indexul datelor", N + 1);
   }
   **** Pasul 7 Aici
});

07. Calculați mișcarea mouse-ului JavaScript

Efectul se bazează pe deplasarea imaginilor asociate fiecărui strat paralax ca răspuns la mișcarea mouse-ului. Containerul parallax identificat la pasul 6 are o mousemove.ro Ascultător eveniment atașat, care declanșează o funcție pentru repoziționarea imaginilor de fundal ale straturilor parallax ori de câte ori există mișcarea mouse-ului. Fiecare strat are un calcul de mișcare pe baza numărului indexului aplicat la pasul 6.

 container.addeventlistener ("mousemove",
 (E) {
   VAR Elms = the.children;
   pentru (var c = 0; c & lt; elms.length; c ++) {
      var motion = parseint (Elms [C].
GETTTRIBUTE ("indicele de date")) / 10;
      var x = ((e.clientx) * mișcare) + "px";
      var y = ((E.Clienty) * mișcare) + "px"; Elms [c] .Style.backroundPozition = x +
"" + Y;
   }
});

Acest articol a fost publicat inițial în revista Creative Web Design Web designer . Cumpărați problema 290 acum.

Articole similare:

10 cele mai bune cadre CSS în 2019
Cum se adaugă animație la SVG cu CSS
52 Instrumente de design web pentru a vă ajuta să lucrați mai inteligent în 2019

Creați un efect de fundal paralax controlat de șoarece

01. Definiți cadrul documentului HTML

02. Identificați conținutul HTML

03. Creați un container CSS parallax

04. Configurați straturile CSS parallax

05. Utilizați straturi de fundal CSS

06. Efectuați inițierea stratului JavaScript

07. Calculați mișcarea mouse-ului JavaScript

să - Cele mai populare articole

22 cele mai bune instrumente de design UI

Ce este în interiorul unghiului 8?

Folosiți butonul de instrumente MARMOSET pentru a prezenta modele în VR

Cum se creează o pictură de ulei digital folosind artrajul

Iluminează lucrul 3D cu lumini de cupolă

Regulile de tipografie web receptivă

Cum să trageți o figură umedă

10 Reguli de aur pentru SVG-urile responsabile

Categorii