Bygga StartupGiraffe-webbplatsen

Vi lanserade vårt nya StartupGiraffe hemsida för några månader sedan, och vi har menat att skriva ett inlägg om hur vi gjorde en del av fronten för alla intresserade.

Vårt mål var att skapa en rolig och mottaglig webbplats som visade upp vårt varumärke. En gång våra vänner på Fat NY kom överens om att göra grafisk design för webbplatsen, visste vi att vi också skulle kunna dra några snygga knep. Vi hade sagt dem att vi ville ha en riktigt lång giraff, men vi såg inte riktigt alla möjligheter förrän vi fick tillbaka mönstren: det fanns polygoner av olika färger, vinklar och former i bakgrunden; i förgrunden fanns det alla slags element som kunde fungera bra på en parallaxwebbplats ... och det var den enorma giraffen.

Utmaningen för oss var att se till att vi inte gick för långt överbord med Javascript för att beskatta webbplatsens prestanda och avleda användarupplevelsen. I slutändan bestämde vi oss för att skrapa idén om ett parallax till förmån för en "växande giraff" -effekt.

Du kan se ett exempel på effekten här , och om du vill följa med koden kan du ladda ner källfilerna här .

Webbplatsstruktur

På grundnivå innehåller platsen 3 syskonskivor staplade ovanpå varandra. Sidans kopia och huvudinnehåll sitter på toppskiktet, giraffen ligger på det andra lagret och den polygonala bakgrunden på baksidan:

För den här demo kommer vi att släppa bort bakgrundsförpackningen eftersom det inte är så mycket för det.

Växande giraff effekt

I grund och botten var vårt mål att fixa logotypen "Startgiraff" på plats medan giraffen stiger och släpp sedan logotypen i det normala flödet av sidan vid en viss punkt. Eftersom giraffen bör börja stiga så snart användaren börjar rulla, bör näsan ligga strax under veckan, oavsett vilken skärmens höjd det är.

Det finns verkligen olika sätt att göra detta (och vi är definitivt öppna för förslag), men den vi valde använder jQuery.waypoints som ett medel för att upptäcka och svara på bläddra händelser.

För att se till att giraffen glider bakom logotypen lägger vi logotypen i ett fast inslag i avsnittet "innehåll". Giraffen är en syskon i innehållsdelen. Båda sektionerna är helt placerade.

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

Nästa steg var att ställa in giraffen och logotypen. Vi använde JavaScript för att ställa in giraffen strax under veckan. Ange sedan höjden på den första sektionen för att vara fönsterdjupet plus antalet pixlar som vi skulle vilja visa för giraffen innan du tillåter logotypen att rulla upp.

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

Med giraffen gömd strax under veckan kunde vi se den rulla upp under den fasta logotypen. Därefter var vi tvungna att låta logotypen bläddra bort så att den inte fanns kvar på sidan.

Waypoints plugin låter oss ringa en funktion när användaren rullar förbi ett visst DOM-element. Det låter oss också detektera vilken riktning användaren ska rulla. Vi använde dessa "upp" och "ner" händelser för att lägga till eller ta bort en klass som växlar logotypens positionsegenskap mellan fast och absolut.

Vi använde också waypointfunktionens förskjutna egenskap för att ändra waypointens position med ett heltal pixelvärde. Eftersom den absoluta klassen (rullningslogotypen) kommer att anpassa logotypen till sin förälders botten vill vi att offseten är logotypens höjd plus logotypens avstånd från toppen av sidan minus den totala höjden på den första innehållsdelen (som vi sätter på sidbelastning).

 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});

Förutom några andra klockor och visselpipor är det ganska mycket det. Logotypen är fortfarande fast tills giraffen har fått cirka 380 pixlar upp på sidan.

Har du frågor? Har du ett bättre sätt att göra det? Låt oss veta i kommentarerna.