Tu skočimo le za malo. To je precej obsežna serija screencast, vendar je le približno 40 ur in seveda je dejanski projekt bolj podoben nekaj sto. V tem primeru je bil skok naprej malo oblikovan dvostranski razmik. Na začetku se sprehodimo skozi te spremembe.
Leva in desna stran imata eno skupno in eno različno ime predavanja. To je zelo pogosto, kar najdem v številnih različnih scenarijih spletnega oblikovanja. V tem primeru imajo strani enak preliv in enako velikost. Vendar se razlikujejo, ko uporabimo skew()preoblikovanje CSS3 . To nam daje nekako lep učinek "odprte knjige". Ker so vsi ti učinki ustvarjeni s CSS, se lepo prilagodijo (tako, da slika skoraj zagotovo ne bi).
Imeli smo pametno rešitev z enakimi višinami, a na žalost zaradi naših pametnih stvari, ki so odprte za knjige, se to pokvari. Namesto tega uporabimo le pridih JavaScripta.
Najprej ob pogledu na JavaScript napišemo vrstico, ki bo skrila katero koli "črko", ki nima otrok. Na primer, ni izbirnikov, ki se začnejo z "Z", vendar imamo objavljeno stran, ki se imenuje le zato, da je izčrpna. Te odkrijemo (in nato skrijemo) z izjemno uporabnim :has()izbirnikom jQuery .
Za enake višine izmerimo oba stolpca, se odločimo, kateri je najvišji, nato pa oba nastavimo na najvišjega. Za pravilno delovanje moramo uporabiti rahlo krasen setTimeout, ker nalaganje @ font-face, ki si vzame malo časa in vpliva na višino. Na koncu bi lahko uporabili kakšen povratni klic nalagalca pisav. (Ali pa je to morda preveč).
Nato se premaknemo na posamezne strani almanaha. Hitro prevozi! Tovrstne stvari smo storili že tolikokrat, zato ni presenetljivo, da se premikamo hitreje. To predlogo v bistvu oblikujemo na enak način, kot smo oblikovali eno objavo v spletnem dnevniku ali splošno stran ali kaj podobnega.
Za drobtine uporabljamo "črno vrstico", ki ta oblikovalski vzorec utrjuje kot nekaj, kar bomo vedno znova uporabljali za navigacijo po odsekih spletnega mesta.