StartupGiraffe-sivuston rakentaminen

Aloitimme uuden StartupGiraffe verkkosivuilla muutama kuukausi sitten, ja meillä on ollut tarkoitus kirjoittaa viesti siitä, miten teimme osan etusivusta kaikille kiinnostuneille.

Tavoitteenamme oli luoda hauska ja reagoiva sivusto, joka esitteli brändimme. Kun ystäväni ovat Barrel NY suostui tekemään sivuston graafisen suunnittelun, tiesimme, että voisimme myös vetää muutamia hienoja temppuja. Olimme kertoneet heille, että halusimme todella korkean kirahvi, mutta emme todellakaan nähneet kaikkia mahdollisuuksia, ennen kuin saimme mallin takaisin: taustalla oli erilaisia ​​värejä, kulmia ja muotoja; etualalla oli kaikenlaisia ​​elementtejä, jotka voisivat toimia hyvin parallaksisivustossa ... ja siellä oli valtava kirahvi.

Haasteena meille oli varmistaa, ettemme menisi liian pitkälle pois yli Javascriptin verran suorituskyvyn sivuston ja häiritä käyttökokemusta. Lopulta päätimme romuttaa ajatuksen parallaksista "kasvavan kirahvi" -vaikutuksen puolesta.

Näet esimerkin vaikutuksesta tässä , ja jos haluat seurata koodia yhdessä, voit lataa lähdetiedostot täältä .

Sivuston rakenne

Perusasustuksessa sivusto sisältää 3 sisarukset, jotka on pinottu päällekkäin. Sivun kopio ja pääsisältö sijoittuu yläkerrokseen, kirahvi on toisella kerroksella ja monikerroksinen taustalla takatasolla:

Tämä demo jättää taustan kääreen, koska siihen ei ole paljon.

Kasvava kirahvi vaikutus

Periaatteessa tavoitteemme oli korjata "Startup Giraffe" -logo paikallaan, kun kirahvi nousee ja vapauttaa logo tavallisen sivuvirran tietyssä vaiheessa. Koska kirahvi alkaa nousta heti, kun käyttäjä alkaa rullata, hänen nenän pitäisi olla juuri kannen alapuolella riippumatta siitä, mikä näytön korkeus on.

Täällä on todella erilaisia ​​tapoja (ja olemme ehdottomasti avoimia ehdotuksille), mutta se, jota valitsimme käyttää jQuery.waypoints keinona vierittää tapahtumia ja reagoida niihin.

Varmistaaksemme, että kirahvi liukuu logon taakse, laita logo kiinteään kääreeseen "sisältö" -osiossa. Kirahvi on sisältöosion sisar. Molemmat osat ovat ehdottomasti paikallaan.

HTML

CSS

body {background-color: #000;}#content-wrapper, #giraffe-wrapper {position: absolute;top: 0px;left: 0px;width: 100%;}#first-content {position: relative;}#big-logo-wrapper {position:fixed;top: 250px;width: 100%;max-width: 1920px;}#big-logo {width:465px; height:231px;display:block; margin:0 auto;}#giraffe {position: relative;left: 100px;height: 3200px;}

JavaScript

Seuraava askel oli luoda kirahvi ja logo. Käytimme JavaScript-asetusta asettamaan kirahvi juuri sen alapuolella. Säädä sitten ensimmäisen osan korkeus ikkunan korkeudeksi ja pikselien lukumäärälle, jonka haluamme näyttää kirahviin ennen kuin logon voi selata.

$(function() {var windowHeight = $(window).height(),giraffe = $("#giraffe"),firstHeight = windowHeight + 380,firstContent = $("#first-content");giraffe.css("top", windowHeight + "px");firstContent.css("height", firstHeight + "px")});

Kun kirahvi piilotettiin juuri taitteen alapuolella, voimme nähdä sen vierittämässä kiinteän logon alla. Seuraavaksi jouduimme vain antamaan logon vierittämään, jotta se ei pysy kiinteänä sivuna.

Reittipisteiden plugin avulla voimme soittaa toimintoon, kun käyttäjä rullaa tietyn DOM-elementin ohi. Sen avulla voimme myös havaita, mihin suuntaan käyttäjä selaa. Käytimme näitä "ylös" ja "alas" tapahtumia lisäämällä tai poistamalla luokka, joka vaihtaa logon sijainnin kiinteistön välillä kiinteäksi ja absoluuttiseksi.

Käytimme myös reittipisteen funktion offset-ominaisuutta muuttamalla reittipisteen sijaintia kokonaislukupikseliarvolla. Koska absoluuttinen (rullaava logo) -luokka kohdistaa logon vanhemmansa pohjaan, halusimme, että offset on logon korkeus ja logon etäisyys sivuston yläosasta, miinus ensimmäisen sisällön div (asetamme sivun lataukseen).

 var logo = $('#big-logo-wrapper');firstContent.waypoint(function( direction) {if ( direction === 'down' ) {logo.addClass("first-scroll");} else {logo.removeClass('first-scroll');}},{offset: logo.height() + (parseInt(logo.css("top"))) - firstHeight});

Muutamien muiden kelloja ja pilliä lukuun ottamatta se on melko paljon. Logo pysyy nyt kiinteänä, kunnes kirahvi on saanut noin 380 pikseliä sivulta.

Onko sinulla kysymyksiä? Onko sinulla parempi tapa tehdä se? Kerro meille kommentit.