Mēs šeit lecam uz priekšu tikai tīņu vecumā. Šī ir diezgan visaptveroša ekrāna apraides sērija, taču tā ir tikai aptuveni 40 stundas, un, protams, šis faktiskais projekts vairāk līdzinās dažiem simtiem. Šajā gadījumā lēciens uz priekšu bija mazliet stilizēt divu lappušu izplatību. Sākumā mēs ejam cauri šīm izmaiņām.
Kreisajā un labajā lapā ir viens koplietojams un viens atšķirīgs klases nosaukums. Tas ir ļoti bieži sastopams daudzos dažādos tīmekļa dizaina scenārijos. Šajā gadījumā lapām ir viens un tas pats gradients un izmērs. Bet tie atšķiras, ja mēs izmantojam CSS3 skew()transformāciju. Tas mums dod diezgan veiklu “atvērtās grāmatas” efektu. Tā kā visi šie efekti tiek veidoti, izmantojot CSS, tie tiek skaisti mērogoti (tādā veidā, kā attēls gandrīz noteikti nebūtu).
Mums bija gudrs vienāda augstuma risinājums, taču diemžēl mūsu gudro atvērto grāmatu šķībo lietu dēļ tas saplīst. Tā vietā mēs vienkārši izmantojam JavaScript pieskārienu.
Pirmkārt, apskatot JavaScript, mēs uzrakstām rindu, kurā tiks paslēpti visi “burti”, kuriem nav bērnu. Piemēram, nav atlasītāju, kas sāktos ar “Z”, taču mums ir publicēta lapa, kuras nosaukums ir tikai visaptveroša. Mēs tos atklājam (un pēc tam slēpjam) ar īpaši noderīgo jQuery :has()selektoru.
Vienādiem augstumiem mēs izmērām abas kolonnas, izlemjam, kura ir augstākā, un pēc tam abas iestatām uz augstāko. Lai pareizi darbotos, mums ir jāizmanto nedaudz uzlauzts setTimeout, jo @ font-face ielāde prasa nedaudz laika un ietekmē augstumu. Mēs galu galā varētu izmantot sava veida fontu ielādētāja atzvanīšanu. (Vai arī tas varētu būt pārspīlēts).
Tad mēs pārietam uz atsevišķām almanaha lapām. Ātrs pārvadāšana tagad! Šādu lietu mēs esam darījuši tik daudz reižu, ka tagad nav pārsteigums, ka mēs virzāmies ātrāk. Mēs būtībā saputojam šo veidni tādā pašā veidā, kā mēs veidojām vienu emuāra ziņojumu vai vispārīgu lapu vai kaut ko tamlīdzīgu.
Mēs izmantojam "melno joslu" rīvmaizei, nostiprinot šo dizaina modeli kā kaut ko, ko mēs atkal un atkal izmantosim vietnes sadaļas navigācijai.