10 snippets CSS e JavaScript para criar o efeito de rolagem de paralaxe

Há muita confusão sobre o design de paralaxe e como ele funciona na web. De um modo geral, o design de paralaxe usa movimento para criar a ilusão de profundidade em uma página.

Isso pode estar relacionado a alterações em segundo plano ou itens de posição semifixa que se movem ao longo da rolagem do usuário. Cobrimos muitos exemplos de sites, mas não entramos em detalhes sobre as técnicas envolvidas.

Para esta coleção, escolhi meus snippets CSS e JavaScript favoritos para criar layouts de paralaxe. Todos os exemplos oferecem código-fonte gratuito, para que você possa brincar com trechos e até usá-los em seus próprios projetos.

1. A Grande Queda de CJ Gammon

Este exemplo de paralaxe é uma das interfaces mais exclusivas que já encontrei. Ele usa um script personalizado para criar um sprite em cascata que parece fluir infinitamente pela página. Ele foi construído em elementos de tela controlados por JavaScript, então é uma configuração bastante técnica.

Na maioria das vezes, isso é uma prova do que é possível no desenvolvimento web moderno. Aprender o elemento canvas lhe dá muito controle sobre seu design.

Veja a Caneta A Grande Queda de CJ Gammon

2. Paralaxe de rolagem CSS por Sebastian Schepis

Aqui está um efeito de paralaxe mais prático com fundo fixo e páginas maiores na parte superior. Quando você rola, cada seção da página aparece acima do plano de fundo. Isso cria a ilusão de profundidade e é um dos elementos-chave para um excelente design de paralaxe.

O desenvolvedor Sebastian Schepis usou apenas CSS para esta página, e é um conceito bem simples. Acho que qualquer um poderia clonar isso com facilidade, sem mencionar que o design do plano de fundo poderia ser bastante aprimorado.

Veja o efeito Pen CSS Scrolling Parallax de Sebastian Schepis

3. Paralaxe de Tag de Imagem Simples de Renan Breno

Muitas vezes, você encontrará designs de paralaxe combinados com grandes imagens de fundo em tela cheia. Estes são muito comuns em sites de empresas e startups, onde geralmente apresentam uma certa “velocidade de rolagem” de paralaxe para o plano de fundo.

A diferença aqui não é tanto em quão rápido você está rolando a página ou quão grande é o posicionamento da imagem. Em vez disso, você vê a rapidez com que a imagem se move pelo plano de fundo da página enquanto você rola. É um efeito de paralaxe sutil, mas esse layout é um excelente modelo para ver as diferentes velocidades de animação em ação.

Veja a caneta Simple Image Tag Parallax de Renan Breno

4. Fundos de imagem fixa e paralaxe

Os fundos de imagem fixos funcionam bem para dividir páginas e dividir as seções de conteúdo uniformemente. À medida que você rola, pode parecer que as seções individuais da página são mais altas que as imagens de fundo. Tudo isso é projetado para dar vida ao efeito de paralaxe durante a rolagem.

Eu não usaria esse layout exato porque as áreas de conteúdo parecem um pouco finas. Mas se você gosta desse estilo, recomendo pontuar cada seção da página com uma imagem diferente relevante para o seu site.

Veja a caneta #Maincode Hackdays por chaobu

5. CSS Parallax de Paulo Cunha

Este exemplo de paralaxe é um exemplo único de como os efeitos de paralaxe funcionam. Todo o conteúdo da página fica abaixo de uma grande imagem de herói que desaparece abaixo do conteúdo na rolagem. Isso também usa a posição fixa da imagem para fazer parecer que a página está se movendo sobre a imagem, em vez de a imagem permanecer fixa no lugar.

Você pode usar esse mesmo efeito com um layout de rolagem longa e terá um estilo de design semelhante. Isso funcionaria melhor para postagens de blog únicas com grandes imagens em destaque ou páginas de destino que usam grandes heróis para chamar a atenção.

Veja a caneta CSS Parallax de Paulo Cunha

6. Design Paralaxe por Katie Rogers

Aqui está um design de paralaxe interessante para uma página de casamento de amostra. Ele tem um design de página dividida onde as imagens separam as muitas áreas de conteúdo diferentes com rolagem fixa de paralaxe. Tudo é executado em CSS, o que é um toque agradável, e todas as imagens de fundo permanecem fixas enquanto se move para baixo na página.

Esse efeito funciona porque as áreas de conteúdo têm grandes sombras de caixa caindo sobre os fundos. Naturalmente, isso cria a ilusão de profundidade, dando à página uma fonte de luz teórica e hierarquia - uma ideia muito boa para um layout de página única.

Veja o Pen Parallax Design de Katie Rogers

7. Paralaxe de rolagem da imagem de fundo por Rich Howell

Anteriormente, mencionei como a velocidade de rolagem pode variar com base na taxa de alteração da posição de fundo. Este exemplo é a comparação perfeita para ver como isso funciona em ação.

Observe que você precisará usar a barra de rolagem para ver os efeitos deste exemplo. Eu tentei com a roda do mouse e não consegui ver nenhuma diferença, mas você notará mudanças de velocidade nas colunas quando mover a barra de rolagem.

Nenhuma dessas velocidades são representações erradas ou imprecisas do design de paralaxe. Eles são apenas métodos diferentes para criar movimento na página, e este pequeno exemplo é uma ótima maneira de visualizar muitas opções.

Veja o Paralax de imagem de fundo de rolagem da caneta de Rich Howell

8. Fundo de Paralaxe Estrelado por Saransh Sinha

Embora esse efeito não esteja relacionado à rolagem, ele está diretamente relacionado ao design de paralaxe. Ele usa CSS puro para criar uma animação de estrela paralaxe no plano de fundo da página. Você pode adicionar texto e até mesmo uma área de conteúdo sobre a página, mas as estrelas imediatamente criam profundidade à primeira vista.

A animação é executada em CSS, mas esse trecho usa Sass e Compass, portanto, seria útil entender antes de fazer edições.

Veja o fundo Pen Parallax Star em CSS por Saransh Sinha

9. Skyline de paralaxe em tela por Jack Rugile

Às vezes, os designs de paralaxe também visam o movimento do mouse junto com os recursos de rolagem. Este design de tela cria um efeito de horizonte infinito que reage ao movimento do mouse na página. Conforme você reposiciona o mouse, o ângulo de visão se altera. Mas a animação permanece a mesma e você pode ver esse horizonte se movendo com uma hierarquia visual clara.

Naturalmente, isso requer JavaScript para a animação porque é uma ideia bastante complexa. Mas também não é algo que você encontrará em muitos sites, então também não é algo que você copiará para o seu site. Mas como um conceito de paralaxe, este é realmente interessante.

Veja o Pen Canvas Parallax Skyline de Jack Rugile

10. Filtro de vidro quebrado por Bajjy Xilo

Já vi esse efeito em sites antes, criando um design bem peculiar. O filtro de vidro quebrado dá a ilusão de uma imagem de fundo sendo dividida em muitas partes diferentes. Quase parece que a imagem estava em um painel de vidro e quebrou, fraturando a imagem e distorcendo a imagem.

Você pode replicar esse efeito com CSS puro, e é um daqueles efeitos legais que são legais de fazer, mas podem não ter nenhum uso prático no mundo real além de designs sofisticados. Ainda assim, este é um exemplo impressionante de profundidade de paralaxe e movimento durante a rolagem.

Veja o filtro css Pen BrokenGlass de Bajjy Xilo