Turinys
- 01. Apibrėžkite HTML dokumentų sistemą
- 02. Nustatykite HTML turinį
- 03. Sukurkite CSS paralaksinį konteinerį
- 04. Nustatykite CSS paralaksinius sluoksnius
- 05. Naudokite CSS fono sluoksnius
- 06. Atlikite „JavaScript“ sluoksnio inicijavimą
- 07. Apskaičiuokite „JavaScript“ pelės judėjimą
Svetainės su paralaksiniu slinkimu ir toliau yra populiarios dėl tam tikrų priežasčių: jos sukuria malonią ir patrauklią naršymo patirtį vartotojui. Mes jau peržiūrėjome geriausias stulbinančias paralaksų slinkimo svetaines, kad jus įkvėptų, bet ką daryti, jei norite sukurti savo?
Laimei, prancūzų kūrybos kūrėjas Renaudas Rohlingeris yra čia, kad parodytų virves, kaip sukurti paralaksinio slinkimo foną, kurį galite valdyti pele. Patikrinkite nuostabius jo svetainės rezultatus ir tada sužinokite iš paties Rohlingerio, kaip galite pakartoti efektą kitame savo projekte.
Taip pat galite išbandyti vieną iš šių svetainių kūrėjų ir, kol svarstote savo svetainės našumą, patikrinkite, ar jūsų žiniatinklio prieglobos paslauga jums tinka. Turite žiniasklaidos svetainę? Kurkite atsarginę kopiją naudodami patikimą debesies saugyklą.
01. Apibrėžkite HTML dokumentų sistemą
Pirmiausia reikia apibrėžti HTML dokumento struktūrą. Tai susideda iš HTML talpyklos, kurioje aprašoma, kad dokumente yra galvos ir kūno skyriai. Nors antraštės skyrius susieja išorinius „JavaScript“ ir CSS failus, turinio skyrius naudojamas apibrėžiant puslapio turinio elementus 2 veiksme.
! DOCTYPE html> html> head> title> Paralakso fonas / pavadinimas> link rel = "stylesheet" type = "text / css" href = "styles.css" /> scenarijus src = "code.js"> / scenarijus> / galva> kūnas> * * * 2 ŽINGSNIS ČIA / body> / html>
02. Nustatykite HTML turinį
Pagrindinį turinį sudaro rodomas tekstas ir „div“ konteineris, naudojant duomenų paralaksas atributas. Būtent šis konteinerio elementas bus naudojamas paralaksiniam fonui, o kiekvienas jo antrinis elementas bus sukurtas reikalingais fono paveikslėliais. Šiame pavyzdyje sudėtiniame rodinyje yra trys vaizdo sluoksniai, kuriuos reikia sukurti iš elementų „child div“.
h1> Sveiki! / h1> div duomenų paralaksas> div> / div> div> / div> div> / div> / div>
03. Sukurkite CSS paralaksinį konteinerį
Sukurkite naują failą pavadinimu stiliai.css. Pirmasis šio failo žingsnis nustato numatytąją turinio spalvą kaip baltą ir paralaksinio fono konteinerio parametrus. Fiksuota padėtis taikoma paralaksiniam indui, kad jis liktų toje pačioje padėtyje, kaip turinys slenka per jį. Kaip puslapio spalva taikoma numatytoji spalva, o neigiamas z indeksas leidžia konteinerį rodyti po puslapio turiniu.
html, body {spalva: #fff; } [duomenų paralaksas] {padėtis: fiksuota; plotis: 100vw; aukštis: 100vh; viršuje: 0; kairėje: 0; z indeksas: -1; fono spalva: # 000; }
04. Nustatykite CSS paralaksinius sluoksnius
Kiekvienas vaizdo sluoksnis yra nustatytas naudoti absoliučią padėties nustatymą, kurio dydis atitinka naršyklės langą. Paralakso vaizdas šiame pavyzdyje bus pagrįstas konkretaus dydžio modeliu, kuris bus nustatytas pakartoti. Galite pasirinkti pakartoti vaizdą tik vertikaliai, naudodami pakartotinį y, arba horizontaliai, naudodami pakartotinį x.
[duomenų paralaksas]> * {pozicija: absoliutus; plotis: 100vw; aukštis: 100vh; fonas pakartoti: pakartoti; fono dydis: 20vw 20vw; }
05. Naudokite CSS fono sluoksnius
Nors kiekvienas vaizdo sluoksnis dalijasi 4 veiksme apibrėžtais padėties ir dydžio nustatymais, kiekvienas sluoksnis naudoja unikalų vaizdą. N-tasis vaiko parinkiklis naudojamas nurodyti kiekvienam paralaksinio indo elementui. Fono paveikslėlio atributas naudojamas dviem linijoms nubrėžti, kuris plytelėmis sukuria tinklelio efektą. Apatiniai sluoksniai naudoja tamsesnes spalvas, kad padėtų suvokti gylį.
[data-parallax]> *: n-asis vaikas (1) {fono paveikslėlis: tiesinis gradientas (į dešinę, # 333 1px, skaidrus 1px), tiesinis gradientas (į apačią, # 333 1px, skaidrus 1px); } [data-parallax]> *: n-asis vaikas (2) {fono paveikslėlis: tiesinis gradientas (į dešinę, # 777 1px, skaidrus 1px), tiesinis gradientas (į apačią, # 777 1px, skaidrus 1px) ; } [duomenų paralaksas]> *: n-tasis vaikas (3) {foninio vaizdo tiesinis gradientas (į dešinę, #fff, skaidrus 1px), tiesinis gradientas (į apačią, #fff 1px, skaidrus 1px); }
06. Atlikite „JavaScript“ sluoksnio inicijavimą
Sukurkite naują failą pavadinimu kodas.js. Šis žingsnis suranda paralaksinį konteinerį ir inicijuoja kiekvieną jo vaizdo sluoksnį duomenų rodyklė atributas, kuris bus naudojamas 7 veiksme. Tai turi būti atlikta naudojant funkciją, pridėtą prie naršyklės lango įkėlimo įvykio, kad kodas būtų vykdomas tik tada, kai paruoštas puslapio turinys.
window.addEventListener ("load", function () {var container = document. querySelector ("[data-parallax]]"; var childNodes = container.children; for (var n = 0; nchildNodes.length; n ++) {childNodes [n] .setAttribute ("data-index", n + 1);} * * * * 7 ŽINGSNIS ČIA});
07. Apskaičiuokite „JavaScript“ pelės judėjimą
Poveikis priklauso nuo vaizdų, susijusių su kiekvienu paralaksiniu sluoksniu, perkėlimo, atsižvelgiant į pelės judėjimą. 6 žingsnyje nustatytas paralaksinis indas turi a pelės perkėlimas pridedamas įvykių klausytojas, kuris suaktyvina funkciją parallaksinių sluoksnių fono paveikslėliams perkelti, kai tik juda pelė. Kiekvienas sluoksnis turi judesio apskaičiavimą pagal indekso numerį, taikomą 6 veiksme.
container.addEventListener ("mousemove", funkcija (e) {var elms = tai.vaikai; for (var c = 0; celms.length; c ++) {var motion = parseInt (elms [c]. getAttribute ("data-index ")) / 10; var x = ((e.clientX) * motion) +" px "; var y = ((e.clientY) * motion) +" px "; elms [c] .style.backgroundPosition = x + "" + y;}});
Šis straipsnis iš pradžių buvo paskelbtas kūrybinio interneto dizaino žurnale Interneto dizaineris. Pirkite 290 numerį dabar.
