Hozzon létre egy egérvezérelt parallax háttérhatást

Feb 2, 2026

kézikönyv

(Kép hitel: Renaud Rohlinger)

A parallaxis görgetéssel rendelkező webhelyek továbbra is népszerűek az ok miatt: Kellemes és vonzó böngészési élményt teremtenek a felhasználó számára. Már a legjobb lenyűgöző parallaxis görgetés Weboldalak inspirálni, de mit csinálsz, ha az egyiket szeretné tenni?

Szerencsére a francia kreatív fejlesztő Renaud Rohlinger itt van, hogy megmutassa a kötéleket, hogy hogyan hozzunk létre egy parallaxis görgetési hátteret, amelyet az egérrel vezérelhet. Nézze meg a csodálatos eredményeket honlapja , és aztán megtanulja a RoHlinger-t az alábbiakban, hogyan lehet megismételni a hatást a következő projektben.

Megpróbálhatod az egyiket is Website Builders , és miközben figyelembe veszi a webhely teljesítményét, ellenőrizze web hosting A szolgáltatás az Ön számára működik. Van egy média nehéz oldala? Biztonsági mentés megbízható felhő tároló .

01. Határozza meg a HTML dokumentum kereteit

Az első lépés a HTML-dokumentum keretének meghatározása. Ez a HTML-tartályból áll, amely leírja a dokumentumot a fej és a test részeként. Míg a fejrész összeköti a külső JavaScript és a CSS fájlokat, a testrész a 2. lépésben szereplő oldal tartalmi elemeinek meghatározására szolgál.

 & lt;! Doctype html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; Cím & gt; Parallax háttér & lt; / title & gt;
& link rel = "stylesheet" típus = "Text / CSS"
href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; test & gt;
   *** 2. lépés
& lt; / test & gt;
& lt; / html & gt;

02. Határozza meg a HTML-tartalmat

A testtartalom a megjelenítési szövegből és a DIV konténerből áll adat-parallaxis tulajdonság. Ez a konténerelem, amelyet a parallaxish háttérre használnak, mindegyik gyermek eleme a szükséges háttérképekkel kialakítva. Ebben a példában a tartálynak három képrétege van a Child Div elemekből.

 & lt; h1 & gt; hello! & Lt; / h1 & gt;
& lt; div adat-parallaxis & gt;
   & lt; div & gt; & lt; / div & gt;
   & lt; div & gt; & lt; / div & gt;
   & lt; div & gt; & lt; / div & gt;
& lt; / div & gt;

03. Hozzon létre egy CSS parallaxed tartályt

Hozzon létre egy új fájlt styles.css . Az első lépés ebben a fájlban beállítja az alapértelmezett tartalomszínt fehérre, és a parallax háttértartály beállításai. A parallaxisederre rögzített pozícionálást alkalmazzuk, hogy ugyanolyan helyzetben maradjon, mint a tartalom görgetése. Az oldal színének alapértelmezett színét alkalmazzuk, míg a negatív z-index lehetővé teszi, hogy a tartály megjelenjen az oldal tartalma alatt.

 HTML, test {
   Szín: #FFF;
}
[Data-parallax] {
   Pozíció: fix;
   Szélesség: 100VW;
   Magasság: 100VH;
   Top: 0;
   Bal: 0;
   Z-index: -1;
   Háttérszín: # 000;
}

04. Állítsa be a CSS parallax rétegeket

A képrétegek mindegyike úgy van beállítva, hogy abszolút pozícionálást használjon a böngészőablakhoz való illesztéshez. A példa parallaxi képe egy adott méretű mintázaton alapul, amely megismétlődik. Előfordulhat, hogy csak akkor ismételheti meg a képet függőlegesen ismételje meg az ismétlődő-y-t, vagy vízszintesen ismételje meg az ismétlést.

 [Adat-parallaxis] & gt; * {
   Pozíció: abszolút;
   Szélesség: 100VW;
   Magasság: 100VH;
   Háttér ismétlés: ismétlés;
   Háttér méret: 20VW 20VW;
}

05. Használja a CSS háttérrétegeket

Míg a képrétegek mindegyike megosztja a 4. lépésben meghatározott pozíciót és méret beállításokat, az egyes rétegek egyedi képet használnak. Az NTH-Gyermekválasztó a parallaxed tartályon belül minden egyes elemre hivatkozik. A háttérkép attribútum két vonal rajzolására szolgál, amelyek rácshatást hoznak létre, amikor csempézett. Az alsó rétegek sötétebb színeket használnak, hogy segítsen a mélység észlelését.

 [Adat-parallaxis] & gt; *: nth-child (1) {
   háttérkép:
      Lineáris gradiens (jobbra, # 333 1px,
  átlátszó 1px),
      Lineáris gradiens (alul, # 333 1px,
  átlátszó 1px);
}
[adat-parallaxis] & gt; *: nth-child (2) {
   háttérkép:
      Lineáris gradiens (jobbra, # 777 1px,
átlátszó 1px),
      lineáris gradiens (alul, # 777 1px,
átlátszó 1px);
}
[adat-parallaxis] & gt; *: nth-child (3) {
   háttérkép
      lineáris gradiens (jobbra, #fff,
átlátszó 1px),
      lineáris gradiens (alsó, #FFF 1px,
 átlátszó 1px);
}

06. Végezze el a JavaScript réteg megkezdését

Hozzon létre egy új fájlt kód.js . Ez a lépés megtalálja a parallaxed tartályt, és megindítja az egyes képrétegeket a adatindex A 7. lépésben használandó attribútum Ezt a böngészőablak terhelési eseményhez csatolt függvényből kell elvégezni, hogy a kód csak akkor történjen meg, ha az oldal testtartalma készen áll.

 ablak.addeventlistener ("terhelés", funkció () {
   Var Container = dokumentum.
queryselector ("[Data-parallax]");
   var childnodes = konténer.children;
   mert (var n = 0; n & lt; childnodes.lengnth, n ++) {
      gyermeknevek [n] .setattribute ("adatindex", n + 1);
   }
   **** A 7. lépés itt
});

07. Számítsa ki a JavaScript egérmozgalmat

A hatás az egyes parallaxrétegekhez kapcsolódó képek mozgatására támaszkodik az egér mozgására. A 6. lépésben azonosított parallaxeder tartalmaz egy üszli Eseményhallgató csatolva, amely kiváltja a funkciót a parallaxi rétegek háttérképeinek áthelyezésére, amikor egérmozgalom van. Minden réteg mozgási számítással rendelkezik a 6. lépésben alkalmazott indexszám alapján.

 konténer.addeventlistener ("Mousemove",
 funkció (e) {
   var Elms = This.mylys;
   mert (var c = 0; c & lt; Elms.length, C ++) {
      var motion = parseint (Elms [C].
getattribute ("adatindex")) / 10;
      var x = ((e.clientx) * mozgás) + "px";
      var y = ((e.clienty) * mozgás) + "px"; Elms [c] .style.backgroundposition = x +
"" + y;
   }
});

Ezt a cikket eredetileg a Creative Web Design magazinban tették közzé Web designer . Vásároljon 290 kérdést.

Kapcsolódó cikkek:

10 legjobb CSS keretrendszer 2019-ben
Hogyan lehet hozzáadni animációt az SVG-hez CSS-vel
52 Webes design eszközök, amelyek segítenek abban, hogy 2019-ben okosabbak legyenek

Hozzon létre egy egérvezérelt parallax háttérhatást

01. Határozza meg a HTML dokumentum kereteit

02. Határozza meg a HTML-tartalmat

03. Hozzon létre egy CSS parallaxed tartályt

04. Állítsa be a CSS parallax rétegeket

05. Használja a CSS háttérrétegeket

06. Végezze el a JavaScript réteg megkezdését

07. Számítsa ki a JavaScript egérmozgalmat

kézikönyv - Most Popular Articles

Hogyan lehet egyszerűsíteni a keverék alakzatát Mayában

Hogyan lehet energiát adni az életedre

Építsen egy animált osztott képernyő céloldalt

Koncepció tervezési tippek a művészek számára

Az Adobe Capture CC használata

Fénykép konvertálása VR SET

Készítsen kompozitot a Photoshop-ban

Gyorsítsa fel a 3D-s modellezést

Kategóriák