De website StartupGiraffe bouwen

We lanceerden onze nieuwe StartupGiraffe website een paar maanden geleden en we hebben geprobeerd een bericht te schrijven over hoe we een deel van de frontend hebben gedaan voor iedereen die geïnteresseerd is.

Ons doel was om een ​​leuke en responsieve site te maken die ons merk liet zien. Eens onze vrienden bij Vat NY afgesproken om het grafische ontwerp voor de site te doen, wisten we dat we ook een paar leuke trucjes konden maken. We hadden hen verteld dat we een hele lange giraffe wilden, maar we zagen niet echt alle mogelijkheden totdat we de ontwerpen terug kregen: er waren veelhoeken van verschillende kleuren, hoeken en vormen op de achtergrond; op de voorgrond waren er allerlei elementen die goed konden werken in een parallax-website ... en daar was die enorme giraffe.

De uitdaging voor ons was om ervoor te zorgen dat we niet te ver overboord gingen met Javascript om de prestaties van de site te belasten en de gebruikerservaring af te leiden. Uiteindelijk hebben we besloten om het idee van een parallax te schrappen ten gunste van een "groeiend giraffe" -effect.

U kunt een voorbeeld van het effect zien hier en als u de code wilt volgen, kunt u dit doen download hier de bronbestanden .

Sitestructuur

Op een basisniveau bevat de site drie siblingsecties die op elkaar zijn gestapeld. De kopie- en hoofdinhoud van de site bevindt zich op de bovenste laag, de giraffe op de tweede laag en de veelhoekige achtergrond op de achtergrondlaag:

Voor deze demo laten we de achtergrondverpakking achterwege omdat er niet veel aan is.

Groeiend giraffect

Kortom, ons doel was om het "Startup Giraffe" -logo op zijn plaats te houden terwijl de giraffe omhoog gaat, en dan het logo op een bepaald moment in de normale flow van de pagina te laten verschijnen. Omdat de giraffe zou moeten stijgen zodra de gebruiker begint te scrollen, zou haar neus net onder de vouw moeten zijn, ongeacht de hoogte van het scherm.

Er zijn echt verschillende manieren om dit te doen (en we staan ​​zeker open voor suggesties), maar degene die we kiezen, gebruikt jQuery.waypoints als middel voor het detecteren van en reageren op scrolgebeurtenissen.

Om ervoor te zorgen dat de giraffe achter het logo schuift, plaatsen we het logo in een vast omhulsel in de sectie 'inhoud'. De giraf is een broer of zus van de inhoudssectie. Beide secties zijn absoluut gepositioneerd.

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

De volgende stap was het opzetten van de giraffe en het logo. We gebruikten JavaScript om de giraf net onder de vouw in te stellen. Stel vervolgens de hoogte van het eerste gedeelte in op de vensterhoogte plus het aantal pixels dat we voor de giraffe willen weergeven voordat u het logo naar boven laat schuiven.

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

Met de giraffe verborgen net onder de vouw, konden we hem omhoog zien scrollen onder het vaste logo. Vervolgens moesten we het logo gewoon laten weg scrollen zodat het niet op de pagina bleef staan.

Met de waypoints-plug-in kunnen we een functie oproepen wanneer de gebruiker langs een bepaald DOM-element scrolt. Het laat ons ook zien in welke richting de gebruiker moet scrollen. We gebruikten deze "omhoog" en "omlaag" -gebeurtenissen om een ​​klasse toe te voegen of te verwijderen die de positieteigenschap van het logo wisselt tussen vast en absoluut.

We hebben ook de offset-eigenschap van de waypoint-functie gebruikt om de positie van het waypoint te wijzigen met een pixelwaarde van een geheel getal. Omdat de absolute klasse (scrollogo) het logo op de onderkant van het bovenliggende element uitlijnt, wilden we dat de offset de hoogte van het logo plus de afstand van het logo vanaf de bovenkant van de site is, verminderd met de totale hoogte van de eerste div inhoud (die we instellen bij het laden van de pagina).

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

Naast een paar andere toeters en bellen, is dat eigenlijk zo. Het logo blijft nu staan ​​totdat de giraffe ongeveer 380 pixels op de pagina heeft gekregen.

Heb je vragen? Heb je een betere manier om het te doen? Laat het ons weten in de comments.