Interaktív parallaxis kép létrehozása

Feb 2, 2026

kézikönyv

Parallaxis görgetés már nem a garantált figyelem-grabber, amelyet korábban szokott, de vannak más módok a parallax technikák használatára, hogy részt vegyenek a látogatókkal és fokozzák felhasználói tapasztalat .

Vessünk egy pillantást Fisk's honlapja , tervezte Bmo , és másfajta parallaxis folyik itt: az élénk színű fő kép 3D-ben mozog, az egérmozgásokra válaszul.

5 tipp a szupergyors CSS-hez

Ez egy lenyűgöző hatás, amely nem túl nehéz megvalósítani; Egyszerűen kövesse az alábbi lépéseket, hogy a webhelyének szemet gyönyörködtető mélységérzetét adja meg.

Hozzon létre saját szemet gyönyörködtető helyét a tökéletes web hosting és weboldal építője eszköz. És az út mentén mentse el a tervezési fájlokat a legjobban felhő tároló .

01. HTML kezdeményezése

Az első lépés az, hogy meghatározza a HTML-dokumentumot, amely a HTML tartályból áll a fej- és testrészek tárolására. Míg a fejrész elsősorban felelős a külső CSS és JavaScript erőforrások betöltéséért, a testrész tárolja a 02 lépésben létrehozandó tartalmi elemeket.

 & lt;! Html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; Cím & gt; egér görgetés & lt; / title & gt;
& link rel = "stylesheet" type = "szöveg / 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. Tartalmi elemek

A technika lehetővé teszi, hogy bármely tartalomtartály az adat-parallaxi attribútum segítségével megjelenítse a hatás megjelenítéséhez. Minden első szintű gyermekelem jelenik meg a parallaxis prezentációval. Ez a példa három gyermekréteget állít fel a parallaxis számára, de többet adhat hozzá, ha szeretné. Tartalma is hozzáadhatja ezeket a rétegeket, például szöveget vagy képeket; A PNG vagy az SVG átláthatósággal a legjobban működik.

 & LT; Cikkadat-parallax & gt;
  & lt; div & gt; & lt; / div & gt;
  & lt; div & gt; & lt; / div & gt;
  & lt; div & gt; & lt; / div & gt;
& lt; / cikk & gt;

03. Parallaxed tartály stílus

Hozzon létre egy új fájlt "styles.css". Az első szabálysor ebben a fájlban beállítja a parallaxed tartály alapértelmezett méretét és pozíció módját. Fontos, hogy relatív pozícionálást használjunk úgy, hogy a gyermekelemek elhelyezhetők, ahol a tartály található. A szélesség és magasság be van állítva, hogy fedezze a teljes képernyőt, hogy lehetővé tegye a maximális interaktivitást.

 [Adat-parallaxis] {
  Pozíció: relatív;
  Szélesség: 100VW;
  Magasság: 100VH;
}

04. Parallax gyerekek

Az adat-parallaxed tartály belsejében lévő első szintelemek mindegyike méretezett, és a központilag megjelennek. A szülők relatív pozícionálásával együtt a mérőegység százalékát használják, lehetővé téve a méretezés és pozícionálás a parallaxed tartályhoz képest. Ebben a példában egy átlátszó piros háttér bemutatására használt értelemben -, akkor cserélje ki ezt a PNG vagy SVG kép meg választását @background: url ( „a képét ide”).

 [Adat-parallaxis] & gt; * {
  Pozíció: abszolút;
  Szélesség: 50%;
  Magasság: 50%;
  Bal: 25%;
  Top: 25%;
  Határ: 1PX Solid # 000;
  Háttér: RGBA (255,0,0, 0,25)
}

05. Indítsa el a JavaScriptet

Hozzon létre egy "kód.js" nevű új fájlt. A JavaScriptet a felhasználói egér kölcsönhatásokra adott válaszok irányítására használják. Nem szeretnénk, hogy a JavaScript futtassa a JavaScript-kódot, amíg az oldal teljesen betöltötte, ezért a 06. és 07. lépések kódja a terhelési esemény által kiváltott funkciót, amely aktiválódik, amikor az ablak befejeződött.

 ablak.addeventlistener ("terhelés", funkció () {
  *** 6. lépés
});

06. Csomópont keresés

A JavaScript első tevékenysége az oldal után azonnal végrehajtható, hogy megtalálja az összes parallaxrétert. Először is megtalálják a parallaxis tartályokat, majd gyermekeiket követik. Minden gyermeknek van egy indexszáma az "adatindex" attribútum alatt.

 Ar csomópontok = dokumentum.QuerySelectorall ("[Data-parallax]");
a (var i = 0; i & lt; nodes.lengnth, i ++) {
  VAR Gyermekek = csomópontok [i]. Gyermekek;
  mert (var n = 0; n & lt; childrengnth, n ++) {
  Gyermekek [n] .tattribute ("adatindex", n + 2);
  }
  *** 7. lépés itt
}

07. Parallaxis hallgatók

Az utolsó lépés az, hogy egy esemény hallgatót alkalmazzon a parallaxed tartály feletti egérmozgásra. Bármely ilyen intézkedések kiváltó jellemző kiszámításához az új pozíciókat a parallaxis rétegek alapján az egér pozícióját, és az adatok-index attribútum lépésben meghatározott 06 - így minden egyes réteg frissítése eltérő ütemben. Az egyes számítás eredményét a réteg attribútumon keresztül alkalmazzák.

 csomópontok [i] .addeventlistener ("Mousemove", funkció (e) {
  var Elms = This.mylys;
  mert (var c = 0; c & lt; Elms.length, C ++) {
  var Divisor = PARSEINT (Elms [C] .getattribute ("Data-Index");
  var startx = this.offetwidth / 4;
  VAR Starty = this.offsetheight / 8;
  szilfák [c] .style.left = startx - (((e.screenX / osztó) -e.clientX) / 3) + "px";
  szilfák [c] .style.top = startY - (((e.screenY / osztó) -e.clientY) / 3) + "px";
  }
});

Ezt a cikket eredetileg a Creative Web Design magazin 272-es kiadásában tették közzé Web designer . Itt vásároljon 272 kérdést vagy Iratkozzon fel itt a webdesignerre .

Kapcsolódó cikkek:

Animálja az SVG-t a JavaScript-el
Liquid Effects létrehozása WebGl-vel
10 módja annak, hogy elkerüljük a böngésző kompatibilitási problémáit

Interaktív parallaxis kép létrehozása

01. HTML kezdeményezése

02. Tartalmi elemek

03. Parallaxed tartály stílus

04. Parallax gyerekek

05. Indítsa el a JavaScriptet

06. Csomópont keresés

07. Parallaxis hallgatók

kézikönyv - Most Popular Articles

Hogyan kell rangsorolni a Google-ban

Első lépések Bulma

Hogyan lehet létrehozni egy alkalmazást a VUE.JS-vel

A fém visszaverődések rajzolása

A MAYA-ban való robbanások szimulálása

Festeni egy portrét, mint a Van Gogh

Építsen egy egyszerű zenelejátszót reagálással

Készítsen kompozitot a Photoshop-ban

Kategóriák