Mes šokame į priekį tik paauglystėje. Tai gana išsami ekrano serija, tačiau tai tik maždaug 40 valandų, ir, žinoma, šis tikrasis projektas iš tikrųjų yra panašesnis į kelis šimtus. Šiuo atveju pirmyn reikėjo šiek tiek patobulinti dviejų puslapių sklaidą. Pradžioje mes einame per tuos pokyčius.
Kairiajame ir dešiniajame puslapiuose yra vienas bendras ir vienas skirtingas klasės pavadinimas. Tai labai įprasta, aš randu daugybę skirtingų interneto dizaino scenarijų. Šiuo atveju puslapiai turi tą patį gradientą ir tą patį dydį. Bet jie skiriasi, kai pritaikome CSS3 skew()transformaciją. Tai suteikia mums gana tvarkingą „atviros knygos“ efektą. Kadangi visi šie efektai yra sukurti naudojant CSS, jie gerai keičiasi (taip, kad vaizdas beveik neabejotinai nebūtų).
Mes turėjome sumanų vienodo aukščio sprendimą, bet, deja, dėl mūsų sumanių atvirų knygų iškreiptų dalykų tai sulūžta. Vietoj to mes tiesiog naudojame „JavaScript“ palietimą.
Pirmiausia, žiūrėdami į „JavaScript“, mes parašome eilutę, kuri paslėps bet kurią „raidę“, neturinčią vaikų. Pvz., Nėra atrankos ženklų, prasidedančių raide „Z“, tačiau mes turime paskelbtą puslapį, pavadintą tik tam, kad būtų išsamus. Mes juos atrandame (o tada paslepiame) naudodami itin naudingą „jQuery“ :has()selektorių.
Norėdami gauti vienodą aukštį, mes išmatuojame abu stulpelius, nusprendžiame, kuris yra aukščiausias, ir tada nustatome juos abu į aukščiausią. Turime naudoti šiek tiek nulaužtą „setTimeout“, kad jis veiktų teisingai, nes „@ font-face“ įkėlimas užima šiek tiek laiko ir turi įtakos aukščiams. Galų gale galėtume naudoti tam tikrą šrifto krautuvo atgalinį skambutį. (Arba tai gali būti per daug).
Tada mes pereiname į atskirus almanacho puslapius. Dabar greitai važiuojate! Mes taip daug kartų darėme dabar, nenuostabu, kad judame greičiau. Iš esmės mes išplėtojame šį šabloną į formą taip, kaip sukūrėme vieną tinklaraščio įrašą, bendrą puslapį ar panašiai.
Džiūvėsėliams naudojame „juodą juostą“, įtvirtindami šį dizaino modelį kaip tai, ką vėl ir vėl naudosime naršydami svetainės skyriuose.