Desenvolver páginas web não é um trabalho simples, certo? Por isso é importante sempre buscar novas alternativas para tornar a experiência de visitantes agradável e envolvente.

O uso do parallax é uma das formas de atingir esse objetivo. Profissionais de tecnologia que trabalham com essa alternativa para o design das suas páginas web conseguem construir sites muito mais atraentes. Afinal, os conteúdos multimídia terão uma interação mais dinâmica e inovadora com outros elementos.

Neste post você aprenderá:

  • o que é e como funciona o efeito parallax;
  • como utilizar o efeito parallax na prática.
  • quais são as boas práticas para utilizar o parallax.

Quer saber mais sobre o parallax e como levá-lo para o seu dia a dia? Então, confira o post a seguir!

O que é e como funciona o efeito parallax?

O efeito parallax ocorre quando os elementos em primeiro plano de um conteúdo se movimentam em velocidade diferente dos elementos em segundo plano. O uso dessa abordagem se tornou uma tendência em desenvolvimento de páginas web nos últimos anos. Com o parallax, é possível deixar as páginas mais agradáveis de navegar, além de criar um design muito mais inovador para as pessoas usuárias.

Essa técnica foi utilizada inicialmente em desenhos e video games 2D. O parallax, nesses cenários, cria um efeito de profundidade: utilizando poucos recursos, foi possível criar uma sensação realista mesmo em baixa resolução.

Como usar o efeito parallax na prática?

A adoção do efeito parallax em páginas web é possível com o uso do HTML5 e o CSS3. Esse tipo de design pode ser exibido em navegadores modernos e em páginas mobile. Tudo isso sem gastar muitos recursos!

O primeiro passo é a inserção desse código no HTML da página:

<main class="wrapper">
  <section class="section parallax bg1">
    <h1>Exemplo</h1>
  </section>
  <section class="section static">
    <h1>exemplo</h1>
  </section>
  <section class="section parallax bg2">
    <h1>EXEMPLO</h1>
  </section>
</main>

Esse código está dividido da seguinte maneira:

  • o wrapper faz a definição da perspectiva e as propriedades de scroll da página;
  • o .section trabalha com as propriedades de tamanho, modo de exibição de conteúdo e a manipulação do texto, algo fundamental para o parallax dar certo;
  • já o .static adiciona um plano de fundo para uma parte da página;
  • o .parallax adiciona um pseudo-elemento ::after com a imagem de plano d efundo e faz os ajustes para o efeito parallax;
  • o .bg1, .bg2 insere as imagens de plano de fundo para cada parte do site (pode ser substituído por uma tag img)

Já o .CSS ficará da seguinte forma:

.wrapper {
  /* A altura deve ser configurada com um valor fixo para o efeito funcionar.
   * 100vh é o tamanho máximo do viewport. */
  height: 100vh;
  /* Desabilitar o efeito x overflow evita que uma barra de rolagem vertical seja adicionada. */
  overflow-x: hidden;
  /* Habilita a rolagem da página. */
  overflow-y: auto;
  /* Configura a perspectiva para 2px. Essa é a distância simulada do viewport para os objetos da página.*/
  perspective: 2px;
}

.section {
  /* Realiza os ajustes de posicionamento necessários para o elemento. */
  position: relative;
  /* Altura do container. Qualquer valor é válido, desde que algum valor seja configurado. */
  height: 100vh;

  /* Formatação do texto. */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 0 0 5px #000;
}

.parallax::after {
  /* Exibe e posiciona o pseudo-elemento */
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* Move o pseudo-elemento para longe da camera,
   * faz os ajustes para que ele preencha o viewport e criar o efeito de movimento.
  transform: translateZ(-1px) scale(1.5);
  /* Obriga a imagem de plano de fundo a preencher todo o espaço do elemnto. */
  background-size: 100%;
  /* Impede a imagem de entrar no espaço de outros elemntos. */
  z-index: -1;
}

/* Formata a div estática. */
.static {
  background: red;
}

/*Ajusta a imagem de plano de fundo. */
.bg1::after {
  background-image: url('https://placekitten.com/g/900/700');
}

.bg2::after {
  background-image: url('https://placekitten.com/g/800/600');
}

Quais são as boas práticas para utilizar o parallax?

Como toda rotina de desenvolvimento, o uso do parallax também conta com boas práticas. Elas devem ser adotadas por qualquer profissional. Afinal de contas, garantem sucesso na entrega de um site mais funcional e dentro das expectativas de cada cliente que você atende.

Confira a seguir algumas dicas para utilizar o parallax no seu dia a dia!

Faça páginas mobile friendly

O uso de internet mobile é algo que faz parte da realidade da maior parte da população brasileira. Dados do relatório Estado de Serviços Móveis apontam que essas pessoas são uma das que mais utilizam a internet no mundo. Portanto, sempre faça adaptações para garantir que o conteúdo desktop seja exibido nos aparelhos mobile sem grandes mudanças.

Saiba quando utilizar

O parallax é excelente, mas deve ser utilizado com cuidado. Nem sempre ele será a melhor escolha de design para uma boa usabilidade. Por isso, mantenha a atenção e faça uma integração que seja alinhada com a experiência de uso que você quer entregar para cada visitante.

Seja ousado

O parallax é perfeito para a construção de páginas web. Quanto mais inovação você usar, maiores são as chances de encantar o seu público-alvo. Por isso não deixe de explorar novas possibilidades ao integrar esse efeito em uma página web.

Apoie-se no parallax para contar histórias envolventes

Muitas vezes as páginas de empresas são utilizadas para contar histórias (o chamado storytelling). Apoiar-se no parallax torna os capítulos dessa conversa mais encantadores e dinâmicos: envolverá a pessoa leitora na sua mensagem com muito mais facilidade se os recursos gráficos são trabalhados com esse efeito.

Procure o engajamento

O parallax deve ser trabalhado para aumentar o engajamento com os conteúdos da página web. Por isso sempre converse com a pessoa profissional de design mais próximo para entender como incentivar visitantes a interagir mais com os conteúdos. Isso pode ser feito tanto com efeitos simples quanto com estratégias ousadas, que otimizam o modo como elementos são formatados no CSS. Assim você consegue motivar a pessoa a ficar mais tempo no seu site.

Foque em bons usos de camadas e profundidade

Como foi apontado no começo do texto, o parallax ajuda na criação de conteúdos com profundidade. Nesse sentido, a experimentação deve ser parte do seu dia a dia. Assim, destacar a página na web será muito mais fácil.

Seja minimalista

Como todo efeito visual, o parallax deve ser utilizado com moderação. Isso vale até para quando ele é necessário: o uso em excesso reduz a qualidade da navegação e aumenta as chances da página ficar com design poluído.

Foque no feedback da página

O código-fonte de páginas web deve ser otimizado para sempre apresentar o melhor desempenho possível. Portanto, o seu parallax deve ser testado ao máximo. Isso dará uma garantia maior de que todos os movimentos serão executados sempre que visitantes executarem uma ação.

Tome cuidado com a ordem de carregamento de elementos

O parallax conta com muitas imagens para ser bem aproveitado. Mas não há como garantir que as pessoas usuárias terão a melhor conexão sempre. Por isso faça ajustes para que a página web carregue elementos mais leves primeiro, otimizando a visualização em conexões lentas.

O desenvolvimento de páginas web já é considerado estratégico por muitas empresas. Justamente por isso a pessoa que trabalha nessa área é considerada uma profissional de TI de alto valor. Afinal, ela garante que a empresa estará disponível para o seu público-alvo sempre.

Se você trabalhar nessa área, não deixe de considerar o parallax no seu dia a dia. Assim, as suas páginas web atrairão um número de visitantes muito maior!

Quer saber mais sobre o HTML e como ele ajuda as nossas páginas web a serem funcionais? Então leia o nosso guia sobre o tema!

0 Shares:
Você também pode gostar