Building the StartupGiraffe Website

Við hleypt af stokkunum nýju okkar StartupGiraffe vefsíðu fyrir nokkrum mánuðum, og við höfum verið að ætla að skrifa færslu um hvernig við gerðum hluti af framhliðinni fyrir þá sem hafa áhuga.

Markmið okkar var að skapa skemmtilega og móttækilega síðu sem sýndi vörumerki okkar. Einu sinni vinir okkar á Barrel NY samþykkt að gera grafíska hönnun fyrir síðuna, vissum við að við myndum líka geta dregið af nokkrum snyrtilegu bragðarefur. Við viljum segja þeim að við vildum mjög háan gíraffa en við sáum ekki alla möguleika fyrr en við fengum hönnunina aftur: það voru marghyrningar af mismunandi litum, sjónarhornum og formum í bakgrunni; Í forgrunni voru alls konar þættir sem gætu gengið vel á parallax website ... og það var þessi gríðarlega gíraffi.

Áskorunin fyrir okkur var að ganga úr skugga um að við fórum ekki of langt um borð með Javascript til að meta árangur vefsvæðisins og afvegaleiða notendavandann. Að lokum ákváðum við að skera hugmyndina um parallax í þágu "vaxandi gíraffa" áhrif.

Þú getur séð dæmi um áhrif hér , og ef þú vilt fylgja með kóðanum geturðu það sækja skrárnar hér .

Staður uppbygging

Á undirstöðu stigi inniheldur þessi síða 3 systkini sem eru staflað ofan á hvor aðra. Afritið og aðal innihald vefsvæðisins situr á efsta laginu, gíraffinn er á öðru lagi og marghyrndur bakgrunnur á bakhliðinni:

Fyrir þessa kynningu sleppum við bakgrunni umbúða því það er ekki mikið til þess.

Vaxandi gíraffi áhrif

Í grundvallaratriðum var markmið okkar að laga "Startup Giraffe" merkið í stað meðan gíraffinn rís og slepptu því lógóinu í venjulegt flæði síðunnar á ákveðnum tímapunkti. Vegna þess að gíraffinn ætti að byrja að hækka um leið og notandinn byrjar að fletta, ætti nefið að vera rétt fyrir neðan brúin, sama hvað skjáhæðin er.

Það eru margar leiðir til að gera þetta (og við erum örugglega opin fyrir uppástungur), en sá sem við völdum notar jQuery.waypoints sem leið til að greina og bregðast við flassum atburðum.

Til að ganga úr skugga um að gíraffinn renna á bak við lógóið leggjum við lógóið í fasta umbúðir innan "innihaldsefnisins". Gíraffinn er systkini í innihaldsefninu. Báðir köflurnar eru algerlega staðsettir.

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 skref var að setja upp gíraffírið og merkið. Við notuðum JavaScript til að setja gíraffann rétt fyrir neðan brjóta. Settu síðan hæð fyrsta hluta til að vera gluggahæð og fjöldi punkta sem við viljum sýna fyrir gíraffinn áður en þú leyfir lógóið að fletta upp.

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

Með gíraffanum falið rétt fyrir neðan brjóta, gætum við séð það fletta upp undir föstum merkinu. Næstum þurftum við bara að láta merkið fletta í burtu svo það var ekki föst á síðunni.

Vegalengdin leyfir okkur að hringja í aðgerð þegar notandinn flettir yfir tiltekið DOM-atriði. Það leyfir okkur einnig að greina hvaða átt notandi til að fletta. Við notuðum þessar "upp" og "niður" viðburði til að bæta við eða fjarlægja flokk sem skiptir um staðsetningu eignarmerkisins milli fasta og algera.

Við notuðum einnig mótipunktsstöðvarinnar til að breyta staðsetningar punktarins með heiltala pixel gildi. Vegna þess að alger (skrunmerki) kennslan muni samræma lógóið við botninn á foreldri sínum viljum við að móti verði hæð lónsins og fjarlægð lógósins frá toppi svæðisins að frádregnum heildarhæð fyrstu innihaldsefnisins (sem við settum á síðu álag).

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

Að auki nokkrar aðrar bjöllur og flaut, það er ansi mikið það. Merkið er nú fastur þar til gíraffinn hefur fengið um 380 punkta upp á síðunni.

Fáðu spurningar? Fékk betri leið til að gera það? Láttu okkur vita í athugasemdunum.