Guia definitivo para usar paralaxe com Divi
Publicados: 2017-07-25Tentar encontrar o tamanho de imagem correto para a paralaxe pode ser um pouco frustrante. A imagem pode parecer ótima como uma imagem de fundo padrão, mas assim que você selecionar “Usar efeito de paralaxe”, a imagem aumenta e nada parece certo. Para evitar esse agravamento no futuro, você precisa entender o que é paralaxe e o que está acontecendo com a imagem quando ela é colocada no modo paralaxe.
Hoje, vou mergulhar fundo nas maneiras como a paralaxe funciona com Divi. Explicarei exatamente o que acontece quando você usa os dois métodos de paralaxe diferentes, qual é o melhor tamanho de imagem, e até adicionarei alguns hacks de CSS personalizados para posicionar suas imagens exatamente como você deseja.
Vamos indo.
O que é paralaxe?
Em relação ao web design, paralaxe é um termo usado para descrever um efeito que dá a percepção de distância e movimento realistas usando uma espécie de animação bidimensional. Isso é feito alterando as velocidades de rolagem de diferentes elementos em uma página da web para criar a ilusão de distância enquanto visualiza um ponto fixo. A técnica já existe há algum tempo em outros lugares além da web. Lembre-se de Super Mario Brothers? Se você já jogou videogame nos anos 80 (Nintendo NES), a maioria dos jogos usava essa técnica para dar a impressão de movimento usando apenas imagens 2D. Os itens na frente se moveram mais rápido do que as árvores / montanhas / nuvens no fundo. Criando assim um movimento mais real.
Este efeito é muito parecido com o método True Parallax em Divi. Exceto que o movimento é vertical em vez de horizontal.
Compreendendo como a paralaxe funciona com Divi
Com Divi, Parallax é realmente fácil de implantar em qualquer imagem de fundo em qualquer seção, linha, coluna ou módulo. Tudo que você precisa fazer é definir a opção Efeito de paralaxe para “SIM” e, em seguida, selecionar seu método de paralaxe (CSS ou True Parallax).
O Método CSS
O método CSS é um dos dois métodos que você pode escolher para o efeito de paralaxe. Você provavelmente pode adivinhar o que está acontecendo apenas testando esse método em seu site. É conhecido como Método CSS porque só usa CSS para criar o efeito. Este método usa CSS para fixar a imagem de fundo no lugar enquanto os outros elementos na página rolam normalmente. Isso dá a impressão de que o conteúdo está se movendo na frente da imagem de fundo.
O verdadeiro método paralaxe
O segundo método é chamado True Parallax. É chamado de “Verdadeiro” provavelmente porque exemplifica a ideia convencional do efeito de paralaxe. Este método usa CSS e JavaScript para criar um movimento de rolagem um pouco mais lento do que os outros elementos da página. Esta é uma representação de movimento mais realista devido à percepção de distância que cria entre a imagem em movimento lento no fundo e os elementos em movimento mais rápido na frente.
O que acontece quando a paralaxe é habilitada no Divi?
Isso pode ser frustrante se você não entender o que está acontecendo nos bastidores. Portanto, é útil saber exatamente o que está acontecendo com a imagem quando a paralaxe é ativada.
O que acontece quando o método CSS é selecionado?
Quando CSS Parallax é selecionado, a imagem é envolvida em um novo div com uma posição absoluta que abrange o tamanho total da janela do navegador. Aqui estão as classes CSS e trechos de código que fazem isso no Divi:
.et_parallax_bg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
/*** This sets the image to fixed when using the CSS method ***/
.et_pb_section_parallax .et_pb_parallax_css, .et_pb_slides .et_parallax_bg.et_pb_parallax_css {
background-attachment: fixed;
}
Como o tamanho do plano de fundo está definido para “cobrir” com uma altura e largura de 100%, a imagem sempre “cobrirá” todas as partes de seu contêiner. Nesse caso, o contêiner é a janela do navegador. Isso significa que partes da imagem ficarão escondidas atrás de outras seções de conteúdo, pois a imagem de fundo sempre continuará se expandindo e contraindo junto com o tamanho da janela do navegador.
Imagine que esta é uma imagem de plano de fundo normal adicionada a um módulo de cabeçalho na parte superior de uma página.
A proporção da imagem está correta (1920 × 1080) e o tamanho da imagem cobre e se encaixa perfeitamente na seção sem qualquer sobreposição quando vista em uma tela de 1366 × 766. A área em branco abaixo da imagem é o restante do conteúdo da página.
Agora, isso é o que acontece quando você seleciona paralaxe para sua imagem.
Como você pode ver, a imagem se expande verticalmente (para chegar à parte inferior da janela do navegador) e horizontalmente (para manter a proporção da imagem). O quadrado preto representa seu monitor, então tudo dentro do quadrado preto é o que o visualizador vê. Tornei a seção de conteúdo branco na parte inferior semitransparente para que você possa ver onde a imagem de fundo fica escondida atrás dela. Lá, a imagem permanece fixa enquanto você rola e outros elementos se movem para cima e para baixo na frente da imagem.
O que acontece quando o método True Parallax é selecionado?
Se você tiver True Parallax definido, a imagem será envolvida em um novo div com a mesma classe CSS:
.et_parallax_bg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
No entanto, através do uso de um pouco de JavaScript, a altura e a posição da imagem são definidas dinamicamente com base no tamanho da janela do navegador e ao rolar a página para baixo. Os dois valores que são adicionados dinamicamente à imagem de fundo são o valor px para a propriedade height e o valor translate para a propriedade transform. O valor da propriedade height determina a altura da imagem, enquanto o valor de translação da propriedade transform determina o posicionamento exato da imagem na página de acordo com os eixos xey.
Aqui está o código que é inserido na tag de imagem da minha imagem de fundo de paralaxe com a janela do meu navegador sendo 1366 × 766:
height: 960.8px;
transform: translate(0px, 220.5px);
Observe os dois números na propriedade transform. Esses dois números controlam o posicionamento da imagem de fundo. O primeiro número (0px) posiciona a imagem ao longo do eixo x (horizontalmente). Como está definido como 0 px, a imagem não será movida. O segundo número posiciona a imagem ao longo do eixo y (verticalmente). Como atualmente tem 220,5 px, isso significa que a imagem está sendo empurrada para baixo na página 220,5 px.
Observe também que o valor da altura (960,8 px) é maior do que a altura da janela do meu navegador (766 px) em cerca de 200 px. Isso é para acomodar a imagem que está sendo empurrada 220,5 px além da parte inferior da janela do navegador.
Quando o método True Parallax é selecionado, você deve ter notado que sua imagem fica ainda mais ampliada do que o método CSS. Isso ocorre porque a posição da imagem é esticada em 30% a mais da altura do navegador.
Lembra-se de nossa ilustração regular de fundo?
Aqui está o que acontece com a imagem depois que True Parallax é selecionado (antes de você começar a rolar, é claro):
Como você pode ver, a imagem é puxada um pouco mais além da parte inferior da janela do navegador. Esta janela do navegador tem cerca de 1080 × 700, por isso é bastante pequena, mas eu queria mostrar o que está acontecendo em uma janela menor da área de trabalho.
Por que o True Parallax amplia a imagem até agora?
Bem, meu melhor palpite é acomodar telas de tamanhos maiores. Uma vez que a janela do navegador atinge o tamanho de tela 1920 × 1080, a imagem de fundo não se estende mais além da parte inferior da janela e se ajusta perfeitamente.
Por que o True Parallax usa JavaScript?
A principal razão pela qual True Parallax requer JavaScript é porque a imagem de fundo precisa se mover em uma velocidade diferente dos outros elementos durante a rolagem. Lembre-se de Mario Brothers?
Com True Parallax, se eu aumentar o tamanho do meu navegador, o valor da altura também aumenta dinamicamente por meio do JavaScript, garantindo que minha imagem seja sempre grande o suficiente para o navegador.
Se eu rolar a página para baixo, o valor da posição de tradução (220,5 px no exemplo acima) aumenta, movendo a posição vertical (eixo y) da imagem para baixo na página.
Se eu rolar para cima, o valor da posição de tradução diminui, puxando a imagem de volta para cima na página. Mas, como a imagem está sendo empurrada para baixo e puxada para cima em uma velocidade diferente dos outros elementos durante a rolagem, você obtém o efeito de paralaxe verdadeiro.
Que tipo de imagem devo usar?
Se você deseja usar o efeito de paralaxe em seu site, escolher a imagem de fundo certa é crucial. Você não quer que o fundo fique muito confuso ou distraia. Mas, por outro lado, você também não quer que seja uma nota lateral chata.
Aqui estão 5 dicas gerais para escolher o tipo certo de imagem para paralaxe
- Evite fotos que distraem. Imagens com muita coisa acontecendo criam confusão e distraem do conteúdo.
- Certifique-se de que sua foto corresponda ao tema do seu site. Seu site deve contar uma história. Esta imagem paralaxe (como o resto de suas imagens) deve se enquadrar no tema.
- Mantenha-o grande e simples. Lembre-se de que sua imagem paralaxe também será exibida em telas menores. Certifique-se de que os detalhes da foto não são tão pequenos que não possam ser reconhecidos em dispositivos menores.
- Adicione uma cor de sobreposição quando necessário. Às vezes, uma boa imagem paralaxe terá aspectos escuros e claros que podem acabar escondendo seu texto ao rolar. Adicionar uma sobreposição escura ou clara garantirá que seu texto possa ser lido em qualquer lugar da imagem
- Torne-o interessante. Existem maneiras de muitas fotos por aí se contentarem com algo chato. Reserve um tempo para encontrar um que envolva seu público e prenda sua atenção.
Qual é o tamanho da imagem de fundo de paralaxe que você deve usar?
Este é um pouco complicado de responder. Não há um tamanho único para todas as imagens de paralaxe. Na verdade, não existe um tamanho único para tudo em web design, pelo menos desde que surgiu o design responsivo. Mas, embora eu possa não ser capaz de dar a você uma regra firme, posso oferecer algumas orientações gerais para escolher o tamanho certo de imagens de fundo de paralaxe com Divi.
Como o tamanho de tela mais popular é de cerca de 1366 × 766, eu definitivamente me certificaria de que todas as imagens de paralaxe de fundo tivessem pelo menos este tamanho. Mas por causa da popularidade de monitores maiores, eu escolheria um tamanho maior, como 1920 × 1080. Isso garantirá que os usuários vejam uma imagem de alta qualidade em desktops maiores.
O problema de ter uma imagem com as dimensões 1920 × 1080 é que raramente você terá uma seção visível com 1080px de altura. Assim, você pode depositar na parte inferior dessas imagens que ficam ocultas.
Dicas úteis para fazer com que sua imagem de fundo paralaxe pareça correta
Para cabeçalhos e seções superiores
A maneira mais fácil de garantir que sua imagem esteja totalmente visível e com uma boa aparência é usar o Módulo de cabeçalho Fullwidth. Dessa forma, sua imagem de plano de fundo sempre terá uma boa aparência, não importa o tamanho da tela. Mas, se você estiver usando uma imagem de fundo de paralaxe usando o Módulo de cabeçalho Fullwidth, pode ser necessário adicionar algum preenchimento na parte superior e inferior do módulo para mostrar mais da imagem. Você pode fazer isso usando o Visual Builder. Vá para as Configurações do Módulo do Cabeçalho. Na guia Avançado, digite o seguinte na caixa de texto Elemento principal:
Padding: 250px 0 250px;
Isso deve levá-lo na direção certa.
Se você ainda não tiver imagens suficientes, sugiro cortar a parte superior da imagem e carregá-la novamente. Isso pode ajudar.
Além disso, tente selecionar fotos com conteúdo insignificante na parte inferior da imagem e o conteúdo mais importante na parte superior. Para cabeçalhos, você deve esperar ver apenas os 700 pixels principais da imagem paralaxe.
Para seções regulares / intermediárias
Certifique-se de deixar espaço suficiente ao redor do conteúdo para expor o fundo o suficiente para que você possa obter uma imagem completa quando a seção atingir o ponto de vista central do usuário. Use o enchimento a seu favor. Se você for usar paralaxe, não deixe seus usuários se confundirem e precisarem rolar para cima e para baixo apenas para ver o que é a imagem. Melhor mostrar a eles da primeira vez.
Para seções inferiores / rodapés
Se você estiver usando o método CSS, pode esperar ver mais da parte inferior de sua imagem de fundo (dependendo de quanto espaço você tem). Eu tentaria cortar a parte inferior da foto para mostrar mais da parte superior nessas seções.
Se você estiver usando o método True Parallax, verá principalmente o topo de suas imagens, então eu as trataria como seus cabeçalhos.
Aqui está um exemplo de imagens de fundo True Parallax nas partes superior, intermediária e inferior da página.
Este tipo de imagem de ponte funciona bem porque tem um bom ponto focal lateral e a parte inferior da imagem não é tão significativa quanto a parte superior, então a mensagem nunca é perdida pelo usuário.
Aqui está a mesma página usando o método CSS. Você pode realmente ver o fato de que a imagem de fundo é fixa e se expande para a janela do navegador. Até parece que é a mesma imagem fixada em segundo plano o tempo todo.
Se você ainda não estiver satisfeito após ter procurado a imagem perfeita, adicionado o preenchimento necessário e cortado, você sempre pode recorrer a alguns hackers.
Parallax Image Hacks: alterando a posição da imagem com CSS personalizado
Se você quiser mudar a posição do fundo de paralaxe, você pode usar o seletor css “.et_parallax_bg”. Aqui está o css padrão que posiciona a imagem para o efeito de paralaxe.
.et_parallax_bg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
Se você notar, por padrão, a propriedade da posição do fundo para o método css parallax é a seguinte definida como “top center”. Mas se eu quiser alterar a posição original da imagem de fundo, você pode ajustar os valores da propriedade de posição do fundo.
Se você deseja manter seu CSS personalizado condensado em uma determinada imagem e não ter efeito em todo o seu plano de fundo de paralaxe, você precisará adicionar uma classe à sua seção para que possamos identificar no css qual plano de fundo precisamos personalizar.
Vá para as configurações da seção, na guia Avançar, e insira uma classe CSS chamada “parahacks”.
Agora vá para Configurações de página e selecione a guia Avançado.
Em seguida, use a caixa CSS personalizado para inserir qualquer um dos seguintes exemplos de CSS personalizado:
Se estiver usando o método CSS, você pode tornar a imagem de plano de fundo centralizada verticalmente adicionando o seguinte css personalizado:
.parahacks .et_parallax_bg {
Background-position: center center !important;
}
Para alinhar a parte inferior da imagem de plano de fundo, adicione o seguinte css personalizado:
.parahacks .et_parallax_bg {
background-position: bottom center !important;
}
Para fazer a imagem de plano de fundo subir um certo número de pixels, adicione o seguinte css personalizado:
.parahacks .et_parallax_bg {
background-position: center -150px !important;
}
Se estiver usando o método True Parallax, você deve levar em consideração os 220px extras (mais ou menos dependendo da altura do seu navegador) da imagem que está oculta na parte inferior. Para tornar a imagem de plano de fundo mais centralizada verticalmente, você precisa ajustar a propriedade de posição do plano de fundo usando um valor de pixel negativo como:
.parahacks .et_parallax_bg {
background-position: center -100px !important;
}
Para tornar a imagem de plano de fundo mais alinhada na parte inferior, adicione o seguinte css personalizado:
.parahacks .et_parallax_bg {
background-position: center -220px !important;
}
TL; DR? Aqui está um resumo em vídeo dos pontos principais
Inscreva-se no nosso canal no Youtube
No Fechamento
Espero sinceramente que este guia tenha sido útil para obter uma compreensão profunda de como a paralaxe funciona com Divi. Felizmente, Divi faz quase todo o trabalho pesado para nos fornecer a funcionalidade de paralaxe. O método CSS e o método True Parallax criam grandes efeitos reais fora da caixa. No entanto, cabe a nós encontrar as imagens certas e ajustá-las da maneira certa para que funcionem em nosso site. Vá em frente! Aposto que você criará algo incrível.
Ansioso por ouvir de você nos comentários.
Saúde!