14 sites de rolagem paralaxe impressionantes

A rolagem paralaxe já existe há algum tempo, mas é uma daquelas tendências de design da web que continua crescendo. A rolagem paralaxe ocorre quando o layout do site vê o fundo da página da web movendo-se mais lentamente para o primeiro plano, criando um efeito 3D conforme você rola. Usado com moderação, pode fornecer um elemento agradável e sutil de profundidade que resulta em um site distinto e memorável.

Para mostrar como deve ser feito, aqui estão alguns sites que empregam a técnica com resultados brilhantes. Em alguns casos, a rolagem paralaxe é a estrela do show; em outros, simplesmente adiciona um toque de profundidade que faz com que o primeiro plano pareça sobressair um pouco.

Se você gosta de empurrar o barco para fora, esses exemplos impressionantes de animação CSS mostram outra ótima maneira de destacar seu site fora da multidão. E você também pode verificar nossas melhores ferramentas de web design que o ajudarão em seus empreendimentos de design. Por enquanto, vamos dar uma olhada em alguns sites que usam a rolagem paralaxe da maneira certa.

História da arte do Web design

A história da arte e do web design não são assuntos que você necessariamente montaria, mas são lindos unidos neste site de história da arte do web design, que traça o futuro do web design olhando a arte através do tempo.

Há uma variedade de técnicas de rolagem paralaxe em jogo aqui, o que significa que os usuários ficam constantemente surpresos e encantados conforme eles rolam para baixo na página. Vale a pena gastar um pouco de tempo explorando este aqui.

O catálogo interativo Qode

O Catálogo Interativo Qode tem um sistema de navegação de texto estilizado para revelar uma imagem para cada item. Clique no catálogo para ver a rolagem paralaxe horizontal usada para mostrar uma variedade de temas WordPress. Não é o uso mais inovador de rolagem de paralaxe nesta lista, mas atende bem ao seu propósito. Um respingo de animação também é usado com bons resultados.

Canals

Desenhado por Marcus Brown e desenvolvido por Aristide Benoist, Canals leva você em uma jornada de 400 anos pela história dos canais do século XVII de Amsterdã. O site” foi projetado para fornecer uma experiência de estilo editorial , como folhear um volume exuberante de uma mesa de centro, e faz grande uso da paralaxe para chamar sua atenção para novas seções de sua história e para dar ao site um efeito de profundidade sutil.

A história de The Goonies

Qualquer pessoa de uma certa idade tem o amor garantido “anos 80 te pt filme de aventura, The Goonies, e se for você, este site com certeza deixará suas glândulas de nostalgia latejando. Criado por Joseph Berry usando WebFlow, The Story of The Goonies é uma homenagem a um clássico retro que usa a rolagem paralaxe para atrair você para a história, apresentá-lo aos personagens e revelar o modo sobre o filme.

Dogstudio

A atração focal imediata do site do Dogstudio é um lindo cachorro animado em 3D – ou é um lobo? – no centro da página, que se dimensiona e gira conforme você rola seu caminho para baixo na página de paralaxe. A iluminação muda de cor conforme você passa o mouse sobre os títulos dos projetos recentes do Dogstudio, e talvez nossa parte favorita seja quando ele gira na frente de uma parte da cópia da página, obscurecendo parte do texto.

ToyFight

ToyFight é uma agência de criação premiada e seu site é muito divertido. Os fundadores Jonny Lander e Leigh Whipday se transformaram em figuras 3D, que aparecem em uma série de cenas em todo o site (incluindo esta atrevida Sagmeister & referência de Walsh). O uso inteligente da paralaxe amplifica o efeito 3D e emparelhado com fundos simples, ousados e brilhantes, nunca se torna opressor ou irritante.

Diesel: Guia RUIM

84.Paris criou este impressionante site de paralaxe (e campanha de mídia social associada) para acompanhar o lançamento da fragrância BAD da Diesel. O site de uma página apresenta a série de regras que compõem o “Guia BAD”.

O usuário pode explorar arrastando o mouse pela página paralaxe, que é disposta como um quadro de avisos de imagens para clicar. Há conselhos sobre tudo, desde o Tinder (“Deslize para a direita, direita, direita, você” irá classificá-los mais tarde “) para o Instagram (” Não se esqueça de entrar em contato com um ex às quintas-feiras #TBT “), acompanhado de ilustrações monocromáticas.

Firewatch

Um dos O exemplo mais bonito de rolagem paralaxe que vimos é este site do jogo Firewatch, que usa seis camadas móveis para criar uma sensação de profundidade. É ótimo porque não há sequestro de rolagem (algo que muitas vezes acompanha o efeito de paralaxe) e só é usado na parte superior da página – o resto do site é imóvel para que você possa ler as informações sem enjoar. Se você quiser ver como isso é feito, aqui está uma boa demonstração no CodePen.

GitHub 404

A página 404 do GitHub não é estritamente a rolagem de paralaxe, pois o efeito ocorre quando o mouse balança ao invés de rolar, mas é uma página muito divertida que usa camadas para adicionar profundidade. Ao contrário da paralaxe “adequada”, o plano de fundo se move mais rápido que o primeiro, criando uma sensação desorientadora e sobrenatural.

Jess & Russ

Não é nenhuma surpresa que o site de casamento do casal de poder do design Russ Maschmeyer e Jessica Hische seja lindo de se ver. O site traça sua história romântica, com rolagem paralaxe usada para adicionar profundidade às ilustrações. Eles se casaram em 2012, mas ainda vale a pena dar uma olhada no site.

Faça seu dinheiro valer

Finanças e dinheiro dificilmente são os assuntos mais interessantes. Mas a agência digital de Nova York Firstborn está quids in com este dinâmico site de rolagem paralaxe Make Your Money Matter para o serviço público Credit Union.

Com o objetivo de ensinar ao público os benefícios de se associar a uma cooperativa de crédito, em vez de usar um banco, este site brilhante inclui tudo, desde como funciona uma cooperativa de crédito, onde encontrar uma e como se inscrever, bem como uma calculadora que mostra quanto os bancos lucram com os depósitos dos clientes.

Madwell

A agência de design e desenvolvimento Madwell, com sede em Nova York, mostra seu portfólio com uma variedade de efeitos de rolagem de paralaxe para criar um estilo 3D perceptível que adiciona um enorme quantidade de profundidade.

New York Times: Tomato Can Blues

Na era atual de pouca atenção e mídia de tamanho reduzido, como você atrai as pessoas para o jornalismo tradicional? Tomato Can Blues é uma ótima resposta a esse problema do New York Times, combinando algumas técnicas inteligentes de web design com narrativas e ilustrações inspiradas em quadrinhos criadas por Atilla Futaki.

Um dos melhores exemplos de rolagem paralaxe que nós “Já vi, o artigo leva você através da história de um lutador de jaula escrita por Mary Pilon. Conforme você rola pelo conteúdo, as ilustrações ganham vida com animações e alterações inteligentes, permitindo que você mergulhe totalmente no conteúdo.

As ilustrações de Futaki foram baseadas em registros policiais, relatos de testemunhas, fotografias e notas do repórter, e a atenção aos detalhes transparece. Em suma, é uma ótima experiência de leitura – este é o futuro do jornalismo online ?

Queda de neve

Um dos primeiros sites a realmente ultrapassar os limites sobre o que você pode fazer com conteúdo editorial longo online, o artigo do New York Times “Snow Fall combina uma gama de elementos diferentes, incluindo rolagem paralaxe e vídeo na web.

O artigo, sobre o horror de uma avalanche em Tunnel Creek, foi publicado online em dezembro de 2012, mas ainda é um exemplo do que você pode fazer com a rolagem paralaxe. O jornal apresentou o artigo vencedor do Pulitzer de uma forma inovadora que chamou a atenção da comunidade de design em todo o mundo.

• 19 responsivo realmente útil tutoriais de web design
• melhores discos rígidos externos
• Páginas de erro 404 brilhantemente projetadas