O efeito criado é o seguinte: à medida que nos deslocamos, o fundo das páginas Web move-se a velocidades diferentes das do primeiro plano, criando um aspeto de movimento e de movimento que chama a atenção e é interessante para o espetador.Relativamente normal para os jogos de vídeo, é uma tendência crescente no design de sítios Web.

Visão geral do vídeo:

Preparámos 10 dos exemplos de sítios Web no artigo como um vídeo para ver os efeitos CSS de paralaxe em ação. Veja:

Aqui vamos ver alguns exemplos fabulosos deste efeito Parallax em sítios Web CSS.

1. Davide Perozzi

Os títulos de tipografia preta pesada sobre um fundo sépia movem-se horizontalmente durante a deslocação, criando um movimento fabuloso com um grande contraste no texto estático. A deslocação suave e as imagens do projeto que se deformam com o cursor animado contribuem para mostrar as capacidades do designer.

2. estúdio para cães

Vamos centrar-nos no cão animado em 3D no centro deste design, como não o fazer? Como elemento que capta a atenção, ele acerta em cheio. Roda, redimensiona, pisca, as orelhas movem-se e mudam de cor em pontos-chave de interesse, títulos. É colocado atrás do texto e move-se para a frente, alterna com os fundos e tem uma presença pura que o torna verdadeiramente uma imagem memorável, mostrando como eles dominam aefeitos.

3. jogo Firewatch

Um exemplo tremendo de scrolling de paralaxe para o jogo Firewatch, criando uma profundidade real no topo da página. Cores brilhantes para trabalhar em conjunto com as camadas, criando uma paisagem incrivelmente convidativa.

4. estúdio de jardinagem

O Garden Studio limita o seu site ao utilizar a técnica de paralaxe apenas no topo do site. Isto significa que a imagem tem de ser uma verdadeira beleza que mostre as suas capacidades de design e, felizmente, é exatamente isso que acontece. Uma representação quase gráfica de um jardim que delimita a página à esquerda e à direita com silhuetas de árvores e que termina com os ramos com folhas outonais. O olhar é atraído para o centroE conduzido de volta através de camadas cuidadosamente elaboradas em direção ao sol poente. Adorável. Desça até à página estática e é como se o sol se estivesse a pôr completamente. Muito inteligente e muito eficaz.

5) Madies

Este site de snacks de comida estaladiça usa grandes blocos quadrados de cor preenchidos com imagens e texto sobreposto. É talvez a forma como Mondrian teria usado o Parallax. Como os blocos se sobrepõem e animam ligeiramente, poderia ser demasiado exigente, mas a tipografia forte e limpa mantém-no unido em todo o site.

6) EyeSprint

Texto estático por detrás de imagens sobrepostas, texto em movimento oscilante, título que aparece ao passar o rato, sólido e criativo. Um site altamente estilizado e distinto com uma variedade de efeitos.

7) Lúdico

Imagens de fundo fantásticas e arrebatadoras na secção horizontal ocupam todo o ecrã, como se fossem slides de um filme numa bobina. Um belo tema da Playful, especialistas em direção artística no domínio da beleza, moda e design de produtos. Paralaxe clássico, deslocação a diferentes velocidades, jogando com as imagens exuberantes e os títulos de projectos recentes.concentre-se enquanto a brincadeira acontece atrás.

8. calexo

Calexo é uma bebida à base de canábis - quase não conseguimos entrar no site por termos menos de 21 anos!!! Um cursor animado leva-nos numa montanha-russa através de todo o site. Cheio de elementos gráficos e linhas, é um site movimentado com muita coisa a acontecer para onde quer que olhemos. De alguma forma, funciona, combinando uma qualidade retro com cores pastel mais suaves para conseguir uma sensação divertida, pacífica e hippie que não podia ser mais adequada.

9. Majestyk Apps

A principal caraterística da paralaxe no sítio Majestyk é a primeira coisa que se vê, no topo do sítio. Começando com uma imagem cativante, uma cabeça e ombros desfocados numa espécie de fundo infundido de galáxias. Depois de a processar, começa-se a percorrer o sítio, como indicado. À medida que a imagem permanece, a escuridão toma conta, abraçando o espaço com espaço. O resto do sítio é limpo, nítido e de qualidade.Ao chegar ao fundo, outra paisagem vulcânica, desta vez sobre um céu estrelado e escuro, proporciona um ótimo pano de fundo para o final.

10. coelho cor-de-rosa

Pink Rabbit é uma empresa de produção sediada em Amesterdão que representa um grupo selecionado de realizadores de cinema/TV. Por isso, é justo que o efeito aqui reproduzido seja a ideia de um papel de filme. Deslocação horizontal em imagens de exemplo de produções, é como pegar num rolo de filme de uma máquina fotográfica antiga e segurá-lo contra a luz para ver o que está nele.Se delinearmos informações sobre a produção de cada filme, que mudam ao passar o rato, temos uma página de destino bastante interessante que convida à interação.

Também pode estar interessado neste artigo relacionado Top 80+ Sources To Find Design Resources and Assets (Mais de 80 fontes para encontrar recursos e activos de design)

11. rebobinar 2019 YouTube

Inteligente, inteligente, original e inteligente. A análise do YouTube dos maiores e mais inesquecíveis momentos de 2019 é, por si só, inesquecível. Em primeiro lugar, a deslocação horizontal sobre uma série de ícones criativos e representativos de cada clip e, em seguida, na extrema esquerda, a deslocação vertical de uma análise precisa de cada clip. Ambos trabalham em conjunto, não só no tempo, mas também complementando o texto e as imagens. É igualmente bomEncantador, com uma utilização perfeita do paralaxe, absolutamente adequado, para dar algo necessário e não apenas para impressionar com uma técnica.

12) Laracon

A Laracon US é um encontro anual de pessoas que são apaixonadas pela construção de aplicações fantásticas com a framework web Laravel. Até agora, e depois? A chave é o local onde está a decorrer, o aquário de Atlanta. O site define o cenário na perfeição. Um cenário de deserto com o scroll descendente a levar-nos para dentro e para baixo da água. Através de camadas e camadas até ao fundo do mar.Uma óptima maneira de definir o cenário de uma forma interessante e eficaz.

13. escova de dentes de bambu

O site da Bite é tão limpo e fresco como seria de esperar no que diz respeito à higiene dentária. O efeito de paralaxe é utilizado para manter a escova de bambu no centro do palco durante todo o processo de deslocação para baixo, e é bem sucedido. À medida que as imagens e a informação textual flutuam de ambos os lados, a estrela principal é colocada à frente e ao centro, acabando por ser colocada na sua caixa de design especial.Aqui, Parallax prende a atenção e concentra-se na mensagem.

14. meios de comunicação social

Matt Thorne é um profissional de marketing digital premiado, pelo que esperamos que ele seja capaz de se promover a si próprio e às suas competências aqui mesmo, no seu próprio sítio Web. Não ficará desiludido, pois este é um sítio com classe, elegante e informativo, que oferece apenas o suficiente para que ele mostre as suas competências sem se tornar vistoso.uma forma eficaz e subtil de dividir o seu sítio em secções claras.

15. derrotar a Boco

Depois de aterrar, vai precisar de algum tempo para apreciar os Monstros antes de iniciar a sua viagem. E vai precisar de algum tempo nesta viagem espantosa através do processo de investigação/design/teste em quatro fases. Cada secção é uma homenagem genial ao efeito de paralaxe, deslocando-se horizontal e verticalmente através de gloriosas paisagens abstractas de terra e mar, e o tempo todo a ser levado na viagemde um processo de trabalho. Uma palavra -Génio.

16. PPP

Uma agência de marketing de uma loja e, por conseguinte, um site de uma loja. Podia ser aborrecido, mas não é. Um passeio pelo corredor de um supermercado, arrastando-o mais para dentro do site e colocando literalmente perguntas no fundo da página. E, de repente, no fim do corredor, é empurrado para dentro do ananás, acredite que funciona. Mais perguntas a girar à volta da sua cabeça enquanto o ananás gira.funciona - curioso? É exatamente isso que eles querem.

17. St Regis, Veneza

Uma boa mistura de imagens de hotéis, comida e Veneza. Uma sensação total do que é oferecido e um site de hotel bastante normal, embora de alta qualidade. O que o distingue é a utilização subtil e suave de paralaxe. Quase impercetível, mas acrescentando um movimento e um toque de qualidade.

18. Cerveja Reservoir Dogs

Um fabricante de cerveja artesanal com uma atitude óbvia. Tudo neste site cria e mantém uma imagem. Parte pastiche do filme, parte informativa e, em grande parte, consciente da imagem. Sombrio, sombrio, assustadoramente fixe. As características de paralaxe ajudam a guiá-lo para baixo, as letras flutuantes de Dogs numa sobreposição de fontes altamente estilizadas e acrescentam interesse às imagens.

19. Emlyon Junior Conseil

A utilização limitada de parallax no topo, com um slide show quase automático de imagens, dá um tom moderno e sério, mas deixa uma sensação de organização e calma.

20. Boe Gin

O site é muito divertido e luminoso e dá o tom da festa. A história do Gin utiliza o paralaxe para passar de um slide para outro ao longo de uma linha de tempo horizontal, mas permite continuar a navegar pelo site em qualquer ponto.

Quer ver alguns Desenhos Retro em Tempos Modernos: Uma Coleção Ultra Inspiradora?

21. festival InDnegev

Este site de um festival de música israelita é uma imagem que se preocupa com a imagem. Uma paisagem muito fixe para começar com apenas um ligeiro movimento. O tema chave destes esquemas de cores e estilo é continuado em todo o site como fundo com nuvens flutuantes e paisagens estelares. Uma óptima maneira de usar o paralaxe para manter um tema.

22. papagaio Anafi

O Parrot da Anafi é um drone de alta qualidade. Se há produto que implorava pelo efeito paralaxe, é este. E não nos desiludem. Desde a abertura, uma paisagem em camadas ao amanhecer com um drone sobreposto, varremos o drone com a visão de um drone, em muitos aspectos uma introdução perfeita. Mais tarde, as imagens coloridas e os textos informativos são colocados em fundos de paisagem aérea que nunca nos deixam esquecer oAs técnicas vão até ao fim e não se tornam monótonas.

23. Aaron McGuire

Aaron McGuire é um designer interativo freelancer da Califórnia que mostra o seu trabalho com grande efeito no seu próprio site. Um tipo invulgar de efeito de página de flipbook que abrange 4 páginas; mexer, explorar, desenvolver e animar. cada uma tem o seu próprio esquema de cores e transição, bem como imagens fixes.

24. bebidas Defy Performance

Linhas fortes, movimento dinâmico, imagens fixes e vídeo de fundo. Muitas técnicas que giram (por vezes literalmente) em torno da ideia central de saúde, energia e boa forma física.

25. Oboosho

A empresa de limpezas nova-iorquina Oboosho tem um site fresco, simpático e limpo, com a sua própria personagem de banda desenhada. Uma excelente imagem de marca e uma excelente utilização de paralaxe na abertura da página.

26. história do hóquei no gelo checo

Para um desporto tão rápido, o paralaxe é perfeito para demonstrar e representar um fluxo de movimento na rápida viagem através dos 110 anos de história do hóquei no gelo checo. Vídeo, texto, fotografias, fundos com marca de água, tudo sobreposto ao ano específico à medida que a história se desloca no tempo.

27. Lasczuk

Um site da sociedade de advogados polaca Lasczuk que demonstra claramente que não é necessário limitar-se aos sites de portefólio de web designers para ser tecnologicamente inovador. Não é inovador, mas acrescenta uma profundidade e uma dimensão que demonstra cuidado e atenção aos pormenores.

28. cadeia de blocos Omnium

O ponto de atração principal é a abertura de blocos concêntricos desenhados num globo em rolo, representando o ecossistema de cadeias de blocos a trabalhar em conjunto para criar um todo coeso. O sítio apresenta uma suavidade que é estranhamente sedutora e hipnótica.

29) La Phase5

O estúdio francês de design interativo aposta tudo neste design moderno e geometricamente minimalista. Ao mesmo tempo que deixa bastante espaço negativo, consegue transmitir uma sensação de clareza e visão de design com pequenos truques, reviravoltas e características de movimento. Simples mas eficaz.

30. la Mordue

A La Mordue é um fabricante francês de sidra. Quando se fez um esforço tão grande para conceber o produto, é absolutamente correto que este tenha de estar no centro das atenções. As garrafas de sidra de dois sabores nunca estão longe do centro de qualquer ecrã. Prendem a atenção, focam o sítio e permitem que a informação passe à volta delas, como se soubessem que são o número um.

31. lookbook Wedze

Uma cena de montanha para desportos de inverno. Mas não é a cena habitual. Aqui temos uma cadeia de montanhas como planos geométricos com um excelente sombreado em escala de cinzentos, criando uma profundidade inconfundível. Seria suficiente apenas isto, mas tem mais, clique nas opções de desporto para ser levado numa viagem a cores pelas encostas angulares de cada secção separada.

Temos a certeza de que concordará, 33 exemplos de paralaxe perfeitos que acrescentam e complementam grandes sites.

Há mais, muitos mais. Veja a seleção abaixo para obter ainda mais efeitos alucinantes.

32. Adriaansen

33. Rajapack

34. Whoamama

35. GTG

36. PEAK Educação

37. cangaceiros

Conclusão

Um bom exemplo da tecnologia mais recente que facilita a criação de algo verdadeiramente memorável e deixa a impressão duradoura que deseja para o seu site. Como se pode ver claramente nestes exemplos, o paralaxe pode e leva o design do site para o futuro, ultrapassa os limites criativos e deixa aNão é apenas esteticamente agradável, mas mostra uma atenção ao estilo e aos detalhes que se reflecte no seu produto ou serviço e que certamente o distingue - pelo menos até que os outros o apanhem!

Não se esqueça de consultar estes artigos relacionados:

• Inspiração para web design: 40 designs para se viciar
• As melhores fontes gratuitas para descarregar em 2021
• 20 sites incríveis com ilustrações que vão roubar seu coração