Construindo o StartupGiraffe Website

Nós lançamos nosso novo StartupGiraffe website há alguns meses, e nós estamos querendo escrever um post sobre como fizemos uma parte do frontend para qualquer pessoa interessada.

Nosso objetivo era criar um site divertido e responsivo que exibisse nossa marca. Uma vez nossos amigos Barril NY concordou em fazer o design gráfico para o site, sabíamos que também seria capaz de puxar de alguns truques. Nós dissemos a eles que queríamos uma girafa realmente alta, mas nós realmente não víamos todas as possibilidades até termos os desenhos de volta: havia polígonos de diferentes cores, ângulos e formas no fundo; em primeiro plano, havia todo tipo de elementos que poderiam funcionar bem em um site de paralaxe ... e havia aquela enorme girafa.

O desafio para nós era ter certeza de que não iríamos longe demais com o Javascript para taxar o desempenho do site e distrair a experiência do usuário. Por fim, decidimos descartar a idéia de paralaxe em favor de um efeito de “crescente girafa”.

Você pode ver um exemplo do efeito Aqui , e se você quiser acompanhar o código, você pode baixe os arquivos fonte aqui .

Estrutura do site

Em um nível básico, o site contém três seções de irmãos empilhadas umas sobre as outras. A cópia e o conteúdo principal do site estão na camada superior, a girafa na segunda camada e o fundo poligonal na camada posterior:

Para esta demonstração, omitiremos o wrapper em segundo plano porque não há muito a fazer.

Efeito crescente da girafa

Basicamente, nosso objetivo era fixar o logo “Startup Giraffe” enquanto a girafa se elevava, e então soltar o logo no fluxo normal da página em um certo ponto. Como a girafa deve começar a subir assim que o usuário iniciar a rolagem, o nariz dela deve ficar logo abaixo da dobra, independentemente da altura da tela.

Existem muitas maneiras de fazer isso (e estamos definitivamente abertos a sugestões), mas o que escolhemos usa jQuery.waypoints como um meio para detectar e responder a eventos de rolagem.

Para garantir que a girafa deslize atrás do logotipo, colocamos o logotipo em um invólucro fixo dentro da seção "conteúdo". A girafa é um irmão da seção de conteúdo. Ambas as seções estão absolutamente posicionadas.

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

O próximo passo foi montar a girafa e o logo. Usamos o JavaScript para definir a girafa logo abaixo da dobra. Em seguida, defina a altura da primeira seção como a altura da janela, mais o número de pixels que gostaríamos de mostrar para a girafa antes de permitir que o logotipo fosse rolado para cima.

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

Com a girafa escondida logo abaixo da dobra, nós poderíamos vê-la rolar para baixo sob o logotipo fixo. Em seguida, apenas tivemos que deixar o logotipo se afastar para que ele não ficasse fixo na página.

O plugin waypoints nos permite chamar uma função quando o usuário rola através de um determinado elemento DOM. Também nos permite detectar qual direção o usuário deve rolar. Usamos esses eventos "up" e "down" para adicionar ou remover uma classe que alterna a propriedade de posição do logotipo entre fixo e absoluto.

Nós também usamos a propriedade offset da função waypoint para mudar a posição do waypoint por um valor de pixel inteiro. Como a classe absoluta (logotipo de rolagem) alinhará o logotipo com a parte inferior de seu pai, queríamos que o deslocamento fosse a altura do logotipo, além da distância do logotipo do topo do site, menos a altura total do primeiro conteúdo div (que definimos no carregamento da página).

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

Além de alguns outros sinos e assobios, é basicamente isso. O logotipo agora permanece fixo até que a girafa tenha chegado a 380 pixels na página.

Tem perguntas? Tem uma maneira melhor de fazer isso? Deixe-nos saber nos comentários.