Opbygning af StartupGiraffe Website

Vi lancerede vores nye StartupGiraffe hjemmeside for et par måneder siden, og vi har haft mening om at skrive et indlæg om, hvordan vi gjorde et stykke af frontenden for alle interesserede.

Vores mål var at skabe et sjovt og lydhørt websted, der viste vores mærke. Engang vores venner på Barrel NY blev enige om at gøre det grafiske design for webstedet, vidste vi, at vi også kunne trække nogle pæne tricks. Vi havde fortalt dem, vi ønskede en rigtig høj giraffe, men vi kunne ikke rigtig se alle mulighederne, før vi fik mønsteret tilbage: der var polygoner af forskellige farver, vinkler og figurer i baggrunden; i forgrunden var der alle mulige elementer, der kunne fungere godt på et parallaxwebsted ... og der var den enorme giraf.

Udfordringen for os var at sikre, at vi ikke gik for langt overbord med Javascript for at beskatte webstedets ydeevne og distrahere brugeroplevelsen. I sidste ende besluttede vi at skrabe ideen om en parallax til fordel for en "voksende giraff" -effekt.

Du kan se et eksempel på effekten her , og hvis du gerne vil følge med koden, kan du download kildefilerne her .

Site struktur

På et grundlæggende niveau indeholder hjemmesiden 3 søskende afsnit stablet oven på hinanden. Kopiets og indholdets hovedindhold sidder på det øverste lag, giraffen er på det andet lag og den polygonale baggrund på bagsiden:

For denne demo vil vi udelade baggrundsindpakningen, fordi der ikke er meget til det.

Voksende giraffeffekt

Dybest set var vores mål at fastsætte "Startup Giraffe" -logoet på plads, mens giraffen stiger, og slip derefter logoet i den normale strøm af siden på et bestemt tidspunkt. Fordi giraffen skal begynde at stige, så snart brugeren begynder at rulle, skal næsen være lige under folden, uanset hvad skærmens højde er.

Der er virkelig en række forskellige måder at gøre dette på (og vi er absolut åbne for forslag), men den ene vi valgte bruger jQuery.waypoints som et middel til at detektere og reagere på rullehændelser.

For at sikre, at giraffen glider bag logoet, sætter vi logoet i en fast indpakning inde i "indhold" sektionen. Giraffen er en søskende af indholdsafsnittet. Begge sektioner er helt placeret.

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 næste skridt var at oprette giraffen og logoet. Vi brugte JavaScript til at indstille giraffen lige under folden. Sæt derefter højden på den første sektion for at være vinduets højde plus antallet af pixels, vi gerne vil vise til giraffen, før du giver logoet mulighed for at rulle op.

$(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 gemt lige under folden kunne vi se den rulle op under det faste logo. Derefter måtte vi bare lade logoet rulle væk, så det ikke blev fastgjort på siden.

Waypoints plugin giver os mulighed for at kalde en funktion, når brugeren ruller forbi et bestemt DOM element. Det lader os også finde ud af hvilken retning brugeren skal rulle. Vi brugte disse "up" og "down" -hændelser til at tilføje eller fjerne en klasse, der skifter logoets positionegenskab mellem faste og absolutte.

Vi har også brugt waypointfunktionens offsetegenskab til at ændre waypointets position med et heltal pixelværdi. Fordi den absolutte (scrolling logo) klasse vil justere logoet til bunden af ​​sin overordnede, ønskede vi, at forskydningen skulle være højden af ​​logoet plus logoets afstand fra toppen af ​​siden minus den samlede højde af første indholdsdivisionen (vi satte på sidebelastning).

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

Udover et par andre klokker og fløjter er det stort set det. Logoet forbliver nu fast, indtil giraffen har fået ca. 380 pixels op på siden.

Har du spørgsmål? Fik en bedre måde at gøre det på? Lad os vide i kommentarerne.