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!
