Costruire il sito Web StartupGiraffe

Abbiamo lanciato il nostro nuovo StartupGiraffe sito web pochi mesi fa, e abbiamo intenzione di scrivere un post su come abbiamo fatto un pezzo del frontend per chiunque fosse interessato.

Il nostro obiettivo era creare un sito divertente e reattivo che mettesse in mostra il nostro marchio. Una volta che i nostri amici a Barile NY accettato di fare il progetto grafico per il sito, sapevamo che saremmo anche stati in grado di tirare fuori alcuni trucchetti. Avevamo detto loro che volevamo una giraffa molto alta, ma non abbiamo visto tutte le possibilità fino a quando non abbiamo ottenuto i disegni: c'erano poligoni di diversi colori, angoli e forme sullo sfondo; in primo piano, c'erano tutti i tipi di elementi che potevano funzionare bene in un sito Web di parallasse ... e c'era quell'enorme giraffa.

La sfida per noi è stata quella di essere sicuri di non esagerare con il Javascript in modo da tassare le prestazioni del sito e distrarre l'esperienza dell'utente. Alla fine abbiamo deciso di scartare l'idea di una parallasse in favore di un effetto "giraffa in crescita".

Puoi vedere un esempio dell'effetto Qui e se vuoi seguire il codice, puoi farlo scarica qui i file sorgente .

Struttura del sito

A livello di base, il sito contiene 3 sezioni di pari livello impilate l'una sull'altra. La copia e il contenuto principale del sito si trova sullo strato superiore, la giraffa si trova sul secondo livello e lo sfondo poligonale sullo strato posteriore:

Per questa demo, ometteremo lo sfondo wrapper perché non c'è molto da fare.

Effetto giraffa in crescita

Fondamentalmente, il nostro obiettivo era di fissare il logo "Startup Giraffe" sul posto mentre la giraffa si alza, quindi rilasciare il logo nel flusso normale della pagina in un determinato punto. Poiché la giraffa dovrebbe iniziare a salire non appena l'utente inizia a scorrere, il suo naso dovrebbe essere appena sotto la piega, indipendentemente dall'altezza dello schermo.

Ci sono davvero diversi modi per farlo (e siamo decisamente aperti ai suggerimenti), ma quello che abbiamo scelto usa jQuery.waypoints come mezzo per rilevare e rispondere agli eventi di scorrimento.

Per assicurarsi che la giraffa scivoli dietro il logo, inseriamo il logo in un involucro fisso all'interno della sezione "contenuto". La giraffa è un fratello della sezione dei contenuti. Entrambe le sezioni sono posizionate in modo assoluto.

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

Il passo successivo è stato quello di impostare la giraffa e il logo. Abbiamo usato JavaScript per impostare la giraffa appena sotto la piega. Quindi imposta l'altezza della prima sezione come altezza della finestra più il numero di pixel che vorremmo mostrare per la giraffa prima di consentire al logo di scorrere verso l'alto.

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

Con la giraffa nascosta appena sotto la piega, potremmo vederla scorrere sotto il logo fisso. Successivamente, abbiamo dovuto lasciare scorrere il logo in modo che non rimanesse fisso sulla pagina.

Il plugin waypoint ci consente di chiamare una funzione quando l'utente scorre oltre un determinato elemento DOM. Ci consente inoltre di individuare la direzione in cui l'utente deve scorrere. Abbiamo usato questi eventi "up" e "down" per aggiungere o rimuovere una classe che alterna la proprietà della posizione del logo tra fixed e absolute.

Abbiamo anche utilizzato la proprietà offset della funzione waypoint per modificare la posizione del waypoint in base a un valore di pixel intero. Poiché la classe assoluta (logo a scorrimento) allineerà il logo alla base del suo genitore, volevamo che l'offset fosse l'altezza del logo più la distanza del logo dalla parte superiore del sito meno l'altezza totale del primo contenuto div (che abbiamo impostato sul caricamento della 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});

Oltre a poche altre campane e fischietti, è praticamente tutto. Il logo ora rimane fisso fino a quando la giraffa ha ottenuto circa 380 pixel nella pagina.

Hai domande? Hai un modo migliore per farlo? Fateci sapere nei commenti.