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.
Mobile first
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.
Continente | Angry Birds - Campanha de Fidelização code

75232

Sessões

47312

Visitas orgânicas

7841

Interações na página
Não fiques por aqui. Temos mais: