Vsebina
- 01. Določite okvir dokumenta HTML
- 02. Določite vsebino HTML
- 03. Ustvarite CSS vsebnik za paralakso
- 04. Nastavite sloje paralakse CSS
- 05. Uporabite sloje ozadja CSS
- 06. Izvedite zagon sloja JavaScript
- 07. Izračunajte gibanje miške JavaScript
Spletna mesta s paralaksnim drsenjem so še vedno priljubljena z razlogom: uporabniku ustvarijo prijetno in privlačno izkušnjo brskanja. Za navdih smo si že ogledali najboljša osupljiva drsna spletna mesta z paralakso, toda kaj storite, če želite ustvariti enega od svojih?
Na srečo je tu francoski razvijalec kreativcev Renaud Rohlinger, ki vam bo pokazal vrvi, kako ustvariti paralaksno drsno ozadje, ki ga lahko nadzirate z miško. Oglejte si neverjetne rezultate na njegovi spletni strani, nato pa se od Rohlingerja spodaj naučite, kako lahko ponovite učinek v naslednjem projektu.
Lahko tudi preizkusite katerega od teh graditeljev spletnih mest, in medtem ko razmišljate o uspešnosti svojega spletnega mesta, preverite, ali storitev spletnega gostovanja deluje za vas. Imate medijsko težko spletno mesto? Varnostno kopirajte z zanesljivim shranjevanjem v oblaku.
01. Določite okvir dokumenta HTML
Prvi korak je določitev okvira dokumenta HTML. Ta je sestavljen iz vsebnika HTML, ki opisuje dokument kot odseke za glavo in telo. Medtem ko odsek glave povezuje zunanji datoteki JavaScript in CSS, se del telesa uporablja za določanje elementov vsebine strani v 2. koraku.
! DOCTYPE html> html> head> title> Parallax Background / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> script src = "code.js"> / script> / head> body> * * * 2. KORAK TUKAJ / body> / html>
02. Določite vsebino HTML
Vsebina telesa je sestavljena iz prikaznega besedila in vsebnika div z uporabo podatkovna paralaksa atribut. Ta element vsebnika bo uporabljen za ozadje paralaksa, pri čemer bo vsak njegov podrejeni element oblikovan z zahtevanimi slikami ozadja. V tem primeru ima vsebnik tri sloje slike, ki jih je treba ustvariti iz podrejenih elementov div.
h1> Pozdravljeni! / h1> div data-parallax> div> / div> div> / div> div> / div> / div>
03. Ustvarite CSS vsebnik za paralakso
Ustvarite novo datoteko z imenom styles.css. Prvi korak v tej datoteki nastavi privzeto barvo vsebine na belo in nastavitve za vsebnik za ozadje paralakse. Fiksno pozicioniranje se uporabi za vsebnik paralaks, da ostane v enakem položaju kot se pomika vsebina nad njim. Kot barva strani se uporabi privzeta barva, negativni z-indeks pa omogoča, da se vsebnik prikaže pod vsebino strani.
html, body {color: #fff; } [data-parallax] {položaj: fiksno; širina: 100vw; višina: 100vh; zgoraj: 0; levo: 0; z-indeks: -1; barva ozadja: # 000; }
04. Nastavite sloje paralakse CSS
Vsaka od slikovnih plasti je nastavljena tako, da uporablja absolutno pozicioniranje z velikostjo, ki ustreza oknu brskalnika. Slika paralakse v tem primeru bo temeljila na vzorcu določene velikosti, ki se nastavi na ponovitev. Izberete lahko, da sliko ponovite samo navpično s ponovitvijo y ali vodoravno s ponovitvijo x.
[data-parallax]> * {položaj: absolutno; širina: 100vw; višina: 100vh; background-repeat: ponovitev; velikost ozadja: 20vw 20vw; }
05. Uporabite sloje ozadja CSS
Medtem ko ima vsaka od slikovnih plasti skupne nastavitve položaja in velikosti, določene v 4. koraku, vsaka plast uporablja edinstveno sliko. Izbirnik n-podrejenega se uporablja za sklicevanje na vsak posamezen element v vsebniku paralaksa. Atribut slike ozadja se uporablja za risanje dveh črt, kar ob ploščicah ustvari učinek mreže. Spodnji sloji uporabljajo temnejše barve, da pomagajo zaznati globino.
[data-parallax]> *: nth-child (1) {image-background: linear-gradient (desno, # 333 1px, prozoren 1px), linearni gradient (spodaj, # 333 1px, prozoren 1px); } [data-parallax]> *: nth-child (2) {image-background: linear-gradient (desno, # 777 1px, transparent 1px), linear-gradient (spodaj, # 777 1px, transparent 1px) ; } [data-parallax]> *: nth-child (3) {slika ozadja linearni gradient (desno, #fff, prozoren 1px), linearni gradient (spodaj, #fff 1px, prozoren 1px); }
06. Izvedite zagon sloja JavaScript
Ustvarite novo datoteko z imenom code.js. V tem koraku se najde vsebnik paralaks in se vsaka njegova plast slike začne z indeks podatkov atribut, ki bo uporabljen v koraku 7. To je treba izvesti iz funkcije, ki je priključena na dogodek nalaganja okna brskalnika, tako da se koda izvede šele, ko je vsebina telesa strani pripravljena.
window.addEventListener ("load", function () {var container = document. querySelector ("[data-parallax]"); var childNodes = container.children; for (var n = 0; nchildNodes.length; n ++) {childNodes [n] .setAttribute ("indeks podatkov", n + 1);} * * * * 7. KORAK TUKAJ});
07. Izračunajte gibanje miške JavaScript
Učinek je odvisen od premikanja slik, povezanih z vsako paralaksno plastjo, kot odziv na premikanje miške. Vsebnik paralakse, opredeljen v koraku 6, ima a premik miške priložen poslušalec dogodkov, ki sproži funkcijo za premestitev slik ozadja plasti paralakse, kadar koli se premika miška. Vsak sloj ima izračun gibanja na podlagi indeksne številke, uporabljene v 6. koraku.
container.addEventListener ("premik miške", funkcija (e) {var elms = this.children; for (var c = 0; celms.length; c ++) {var motion = parseInt (elms [c]. getAttribute ("indeks podatkov ")) / 10; var x = ((e.clientX) * motion) +" px "; var y = ((e.clientY) * motion) +" px "; brestovi [c] .style.backgroundPosition = x + "" + y;}});
Ta članek je bil prvotno objavljen v reviji Creative Web Design Oblikovalec spletnih strani. Kupite številko 290 zdaj.
