Usamos cookies próprios e de terceiros para melhorar a sua experiência. Ao continuar a navegar considera-se que aceita a nossa política de privacidade.
Se quiser continuar a navegar no site sem cookies, por favor instale uma extensão no seu browser.
OK
Clientes
Continente
Ano
2019
Serviços
Web Development
Desafio
Os pássaros mais famosos do mundo da animação decidiram voar até ao interior da agência. Não traziam água no bico, mas sim um desafio muito aliciante: fazermos o desenvolvimento web da landing page desta campanha de fidelização do Continente, que oferece dois cromos e um selo colecionáveis a cada 20€ em compras.
Solução
Apesar de não sermos especialistas em aves, gostamos de pensar que somos especialistas em desenvolver páginas destinadas a altos voos. Tendo isso em mente, decidimos meter mãos à obra. Depois de termos recebido todos os elementos gráficos já desenhados, fomos responsáveis pela programação da landing page e pela criação das animações que lhe dão vida. Rapidamente percebemos que este projeto de Angry apenas tinha o nome e o resultado final, honestamente, deixou-nos bastante happy.
A palavra de ordem no desenvolvimento web nos dias de hoje. Segundo o Statcounter, mais de 40% das páginas são visualizadas em dispositivos móveis. Neste sentido, foi importantíssimo desenvolver a landing page para ser vista primeiro no smartphone.
Website
O layout desta página chegou até nós desenhado em Sketch. A partir daí, fizemos todo o desenvolvimento em HTML, CSS e Javascript.
Animações
Quisemos que lado a lado com a página, as animações também voassem alto neste projeto. Para isso tirámos recurso do feTurbulence, um filtro em SVG que nos ajudou a criar o efeito na água. Usámos css3 transitions e código em javascript para animar o texto, além de termos contado com css3 animations para dar vida aos efeitos dos helicópetros e das setas.
Tecnologia
Para construir as secções desta landing page, recorremos a HTML, CSS e Javascript. Depois, sendo que tínhamos em mãos um projeto com muitas imagens, tivemos de ter em conta a performance da página. Isto levou-nos a usar uma livraria, para que as imagens sejam apenas carregadas à medida que vão aparecendo no ecrã. Por último, mas não menos importante, usámos srcset. Isto permite que seja sempre carregada a imagem mais adequada para o dispositivo.
