Saturs
- 01. Iniciēt HTML
- 02. Satura elementi
- 03. Paralakses konteinera stils
- 04. Paralakses bērni
- 05. Uzsākt JavaScript
- 06. Mezglu meklēšana
- 07. Paralakses klausītāji
Paralakses ritināšana vairs nav garantēta uzmanības piesaistītāja, kāda tā bija agrāk, taču ir citi veidi, kā izmantot paralakses paņēmienus, lai piesaistītu apmeklētājus un uzlabotu lietotāja pieredzi.
Paskaties uz Fiska kunga vietne, projektējis BMO, un jūs pamanīsit, ka notiek cita veida paralakse: tās spilgtas krāsas galvenais attēls pārvietojas 3D formātā, reaģējot uz jūsu peles kustībām.
- 5 padomi īpaši ātrai CSS
Tas ir iespaidīgs efekts, kuru nav pārāk grūti īstenot; vienkārši veiciet šīs darbības, lai jūsu vietnei pievērstu uzmanību saistoša dziļuma sajūta.
Izveidojiet savu uzmanību piesaistošo vietni, izmantojot perfektu tīmekļa mitināšanas pakalpojumu un vietņu veidošanas rīku. Saglabājiet dizaina failus vislabākajā mākoņu krātuvē.
01. Iniciēt HTML
Pirmais solis ir definēt HTML dokumentu, kas sastāv no HTML konteinera galvas un ķermeņa sadaļu glabāšanai. Kaut arī virsraksts galvenokārt ir atbildīgs par ārējo CSS un JavaScript resursu ielādi, pamatteksta sadaļā tiks glabāti 02. darbībā izveidojamie satura elementi.
! DOCTYPE html> html> head> title> Peles ritināšana / nosaukums> link rel = "stylesheet" type = "text / css" href = "styles.css" /> skripts src = "code.js"> / skripts> / galva> ķermenis> * * * 2. SOLIS ŠEIT / body> / html>
02. Satura elementi
Šī tehnika ļaus efektam parādīt jebkuru satura konteineru, kas izmanto atribūtu data-parallax. Katrs pirmā līmeņa bērnu elements tiks parādīts ar paralakses prezentāciju. Šajā piemērā paralaksei ir iestatīti trīs bērnu slāņi, taču, ja vēlaties, varat pievienot vairāk. Šiem slāņiem varat pievienot arī saturu, piemēram, tekstu vai attēlus; Vislabāk darbosies PNG vai SVG ar caurspīdīgumu.
raksta datu paralakse> div> / div> div> / div> div> / div> / raksts>
03. Paralakses konteinera stils
Izveidojiet jaunu failu ar nosaukumu ’styles.css’. Pirmais šī faila noteikumu kopums nosaka paralakses konteinera noklusējuma lielumu un tā pozīcijas režīmu. Ir svarīgi izmantot relatīvo pozicionēšanu, lai bērnu elementus varētu novietot attiecībā pret konteinera atrašanās vietu. Platums un augstums ir iestatīti tā, lai aptvertu visu ekrānu, lai nodrošinātu maksimālu interaktivitāti.
[datu paralakse] {pozīcija: relatīvais; platums: 100vw; augstums: 100vh; }
04. Paralakses bērni
Katrs no datu līmeņa paralakses konteinera pirmā līmeņa elementiem ir izmēra un novietots tā, lai parādītos centrāli. Kopā ar vecāku relatīvo pozicionēšanu kā mērvienību tiek izmantots procents, kas ļauj izmēru un izvietojumu novietot attiecībā pret paralakses trauku. Šajā piemērā efekta demonstrēšanai tiek izmantots caurspīdīgs sarkans fons - to varat aizstāt ar izvēlētu PNG vai SVG attēlu, izmantojot @background: url ("jūsu attēls šeit").
[datu paralakse]> * {pozīcija: absolūta; platums: 50%; augstums: 50%; pa kreisi: 25%; augšdaļa: 25%; apmale: 1px cieta # 000; fons: rgba (255,0,0, .25)}
05. Uzsākt JavaScript
Izveidojiet jaunu failu ar nosaukumu “code.js”. JavaScript tiks izmantots, lai kontrolētu atbildes uz lietotāja mijiedarbību ar peli. Mēs nevēlamies, lai JavaScript palaistu kādu no JavaScript kodiem, kamēr lapa nav pilnībā ielādēta, tāpēc 06. un 07. darbības kods ievieto funkciju, ko aktivizē ielādes notikums, kas tiek aktivizēta, kad logs ir pilnībā ielādēts.
window.addEventListener ("ielādēt", funkcija () { * * * 6. SOLIS ŠEIT});
06. Mezglu meklēšana
Pirmā JavaScript darbība, kas jāveic tūlīt pēc lapas sagatavošanas, ir visu paralakses slāņu atrašana. Pirmkārt, tiek atrasti paralakses konteineri, kam seko viņu bērni. Katram bērnam pēc atribūta ’data-index’ tiek lietots indeksa numurs.
ar mezgli = document.querySelectorAll ("[datu-paralakss]"); par (var i = 0; inodes.length; i ++) {var children = mezgli [i] .bērni; par (var n = 0; nbērniem.garums; n ++) {bērniem [n] .setAttribute ("datu indekss", n + 2); } * * * 7. SOLIS ŠEIT}
07. Paralakses klausītāji
Pēdējais solis ir piemērot notikumu klausītāju visām peles kustībām, kas notiek virs paralakses konteinera. Jebkuras šādas darbības aktivizē funkciju, lai aprēķinātu paralakses slāņu jaunās pozīcijas, pamatojoties uz peles pozīciju un 06. solī noteikto datu indeksa atribūtu - kā rezultātā katrs slānis tiek atjaunināts dažādos tempos. Katra aprēķina rezultāts tiek lietots slāņiem, izmantojot stila atribūtu.
mezgli [i] .addEventListener ("peles pārvietošana", funkcija (e) {var elms = tas.bērni; for (var c = 0; celms.length; c ++) {var divisor = parseInt (elms [c] .getAttribute (" datu indekss ")); var startX = this.offsetWidth / 4; var startY = this.offsetHeight / 8; elms [c] .style.left = startX - (((e.screenX / dalītājs) -e.clientX) / 3) + "px"; elms [c] .stils.top = startY - (((e.ekrānsY / dalītājs) -e.klientsY) / 3) + "px";}});
Šis raksts sākotnēji tika publicēts radošā tīmekļa dizaina žurnāla 272. numurā Mājas lapu dizaineris. Pērciet 272. numuru šeit vai abonējiet Web Designer šeit.
