Bygg opp StartupGiraffe Nettstedet

Vi lanserte vår nye StartupGiraffe nettside for noen måneder siden, og vi har ment å skrive et innlegg om hvordan vi gjorde et stykke frontend for alle interesserte.

Målet vårt var å skape et morsomt og responsivt nettsted som viste merke til vårt merke. En gang våre venner på Barrel NY ble enige om å gjøre grafisk design for nettstedet, visste vi at vi også kunne trekke av noen ryddige triks. Vi hadde fortalt dem at vi ønsket en veldig høy giraffe, men vi så ikke alle mulighetene til vi fikk designene tilbake: det var polygoner av forskjellige farger, vinkler og former i bakgrunnen; i forgrunnen var det alle slags elementer som kunne fungere godt på et parallax nettsted ... og det var den enorme giraffen.

Utfordringen for oss var å sørge for at vi ikke gikk for langt overbord med Javascript for å beskatte ytelsen til nettstedet og avlede brukeropplevelsen. Til slutt bestemte vi oss for å skrape ideen om en parallax til fordel for en "voksende giraff" -effekt.

Du kan se et eksempel på effekten her , og hvis du vil følge med koden, kan du last ned kildefilene her .

Nettstedstruktur

På grunnleggende nivå inneholder nettstedet 3 søskenpartier stablet ovenpå hverandre. Kopiets og hovedinnholdet på nettstedet sitter på topplaget, giraffen ligger på det andre laget, og den polygonale bakgrunnen på baklaget:

For denne demoen slipper vi bakgrunnsbakgrunnen fordi det ikke er mye for det.

Voksende giraff effekt

I utgangspunktet var målet vårt å fikse "Startup Giraffe" -logoen på plass mens giraffen stiger, og slipp deretter logoet til den normale strømmen av siden på et bestemt tidspunkt. Fordi giraffen skal begynne å stige så snart brukeren begynner å rulle, bør nesen hennes ligge under folden uansett hva skjermhøyden er.

Det er mange forskjellige måter å gjøre dette på (og vi er definitivt åpne for forslag), men den vi valgte bruker jQuery.waypoints som et middel for å oppdage og svare på rullehendelser.

For å sikre at giraffen glir bak logoen, legger vi logoen i et fast innpakning i "innhold" -delen. Giraffen er en søsken av innholdsdelen. Begge seksjonene er helt posisjonert.

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

Det neste trinnet var å sette opp giraffen og logoen. Vi brukte JavaScript for å sette giraffen like under brettet. Sett deretter høyden på den første delen for å være vinduets høyde pluss antall piksler vi vil gjerne vise for giraffen før du lar logoen rulle opp.

$(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 skjult like under brettet, kunne vi se det bla opp under den faste logoen. Deretter måtte vi bare la logoen rulle bort, slik at den ikke ble stående på siden.

Veipunktsplugin gir oss mulighet til å ringe en funksjon når brukeren ruller forbi et bestemt DOM-element. Det lar oss også oppdage hvilken retning brukeren skal bla. Vi brukte disse "opp" og "ned" hendelsene for å legge til eller fjerne en klasse som skifter logoets plasseringsegenskaper mellom faste og absolutte.

Vi brukte også veipunktsfunksjonens offset-egenskap for å endre veipunktets posisjon med et heltall pikselverdi. Fordi den absolutte (rullende logoen) klassen vil justere logoen til bunnen av sin overordnede, ønsket vi at motsetningen skulle være høyden på logoen pluss logoen sin avstand fra toppen av siden minus den totale høyden til den første innholdsdivisjonen (som vi satt på sidelast).

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

Foruten noen andre klokker og fløyter, er det ganske mye det. Logoen er fortsatt løst til giraffen har fått omtrent 380 piksler opp på siden.

Har du spørsmål? Fikk en bedre måte å gjøre det på? Gi oss beskjed i kommentarene.