Pure CSS Parallax

Sivustojen näkyviä osia koodaa tavallisesti ns. front end developer ja niitä näkymättömämpiä toiminnallisuuksia back end developer. Nämä web developereiden 'alalajit' saattavat tehdä hyvinkin erilaisia juttuja yhdessä koodaamilleen sivustoille ja helposti päästään siihen pisteeseen, että eri lajiin kuuluvan kolleegan koodin tarkistaminen on melkoisen haastavaa. Sehän ei taas ole ollenkaan suotava asiaintila työn laadun kannalta.

Hyvinkään tehty sivusto ei välttämättä näytä hyvältä, jos ei siihen tuoda joitain tuoreita elementtejä. Eräs tällainen suosittu ominaisuus - vaikkakaan ei niin uudenkarhea - on parallax-efekti*, jossa sivua skrollatessa tausta liikkuu hitaammin kuin sivun muut osat. Tämä on selvästi frontin hommia ja tehdään useimmiten jQuery-skriptillä eli tavallaan päälleliimattuna. Drontin bloginpitäjä on back end & php -koodari eikä osaa kumpaakaan edellä mainituista kovin hyvin, mutta sehän on vain hidaste. Lisäksi kolleega tarjosi sopivan haasteen: parallaxin voi tehdä myös puhtaasti css-koodina, mikä on sivuston toiminnan kannalta nopeampaa ja tehokkaampaa. Kaiken huipuksi "pure css parallax" on varsin tyylikäs ratkaisu, joka kyllä vetoaa koodarin sieluun.

Tämä linkki ohjannee suunnilleen idean alkulähteille, jossa pure css parallaxin perusidea on kuvattu hyvin. Myös sivun demot toimivat ainakin enimmälti, joten skippaankin kätevästi kaiken selittelyosuuden. Loppujen lopuksi 90% ajasta meni siihen, että sain sovitettua idean Drupalin Bootstrap-teemaan ja tästä ajasta puolet oli ylimääräisten valkoisten alueiden korjailua. Kaiken kaikkiaan oikein hyvä koitos ja osaanpa taas arvostaa kolleegojen työtä. Toisaalta tämän jälkeen hipsin ihan mielelläni perehtymään tiedostomigraatioiden ihmeelliseen maailmaan (ja näin migraatiotarinointi siirtyy jälleen ensi kertaan).

 

* Nyt oli linkattava hauska Firewatch-sivuston parallax, jossa näkyy hienosti monien tasojen käyttö. Toteutusta voi ihailla CodePen-ympäristössä.

Tagit