Como combinar efeitos de flutuação com planos de fundo de paralaxe CSS no Divi
Publicados: 2019-08-30Usar CSS Parallax com imagens de fundo no Divi nos permite criar efeitos de foco que são surpreendentemente únicos. Paralaxe é uma das muitas maneiras pelas quais podemos adicionar vida aos nossos sites. E ao combinar paralaxe com a vasta gama de opções de pairar do Divi, damos vida ainda mais ao conteúdo.
Neste tutorial, mostraremos que você pode criar efeitos de foco de fundo de paralaxe CSS exclusivos de forma rápida e fácil no Divi. Nenhum plugin ou codificação customizada necessária!
Vamos começar.
Espiada
Aqui está uma rápida olhada nos efeitos de foco de fundo de paralaxe de CSS que projetaremos neste tutorial.
Baixe o Layout GRATUITAMENTE
Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!
Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará ter o seguinte:
- O Divi Theme instalado e ativo
- Uma nova página criada para construir do zero no front end (construtor visual)
- Imagens a serem usadas para conteúdo simulado
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Parte 1: Criando um efeito Breakout Parallax Hover em Divi
Primeiro, crie uma seção regular com uma linha de uma coluna. 
Antes de adicionar um módulo, abra as configurações da seção e adicione uma imagem de fundo usando paralaxe CSS.
Certifique-se de que a imagem tenha pelo menos 1920 px de largura. O design funciona bem com uma imagem de fundo mais escura com muita textura. Estou usando um de nosso pacote de layout de cafeteria, que está disponível no Divi Builder.
Em seguida, adicione um pouco de preenchimento à seção da seguinte maneira:
Preenchimento: 10vw superior, 10vw inferior
Adicionar um Módulo Blurb
Depois que o plano de fundo e o preenchimento da seção estiverem no lugar, adicione um módulo de sinopse à linha.
Em seguida, atualize o conteúdo da sinopse com algumas frases do corpo do texto. Você pode manter o título padrão lá.
Em seguida, clique para usar um ícone e selecione o ícone do café para a sinopse.
Depois que o conteúdo estiver pronto, atualize as configurações de design da seguinte maneira:
Cor do ícone: #ffffff
Tamanho da fonte do ícone: 50px
Alinhamento de texto: centro
Fonte do título: Oswald
Estilo da fonte do título TT
Cor do texto do título: #ffffff
Espaçamento entre letras de título: 2px
Fonte do corpo: Nunito
Cor do corpo do texto: #ffffff
Espaçamento entre letras do corpo: 1px
Preenchimento: 30px superior, 30px inferior, 30px à esquerda, 30px à direita
Ajustar largura da linha
Depois que a sinopse for projetada, vá para as configurações de linha e ajuste a largura máxima.
Largura máxima: 80%
Configurações de coluna
Para este exemplo, vamos ativar o efeito de foco no nível da coluna. Isso permite que você use vários módulos para construir o conteúdo, embora estejamos apenas usando um único módulo blurb por enquanto.
Para que esse efeito de pairar de paralaxe funcione, precisamos adicionar a mesma imagem de fundo à coluna que usamos em nossa seção. Também precisaremos usar o mesmo método de paralaxe CSS na imagem de fundo da coluna.
Abra as configurações da coluna e adicione a mesma imagem de fundo usando paralaxe CSS.
Você não será capaz de ver qualquer diferença entre a imagem de fundo da coluna e a imagem de fundo da seção porque ambas estão usando paralaxe CSS, que essencialmente fixa a imagem exatamente no mesmo lugar na página da web. No entanto, você verá a diferença quando o efeito de foco estiver no lugar.
Continue a atualizar as configurações de design da coluna da seguinte maneira:
Preenchimento: 4vw superior, 4vw inferior
Cantos arredondados: 10 px
Em seguida, dê à coluna uma sombra de caixa que só aparece ao passar o mouse da seguinte maneira:
Sombra da caixa: veja a imagem
Posição vertical da sombra da caixa: 0 px
Força do desfoque de sombra da caixa: 36 px
Cor da sombra (padrão): rgba (0,0,0,0)
Cor da sombra (pairar): rgba (0,0,0,0,72)
Agora, vamos para as opções de transformação e atualizamos os seguintes estilos de transformação ao passar o mouse:
Escala de transformação (pairar): 105%
Isso aumentará ligeiramente a coluna (e seu conteúdo) para criar o efeito de uma pequena projeção na imagem de fundo.
Transformar Traduzir Eixo Y (pairar): -2,5%
Isso move a coluna ligeiramente para cima ao pairar para criar um leve deslocamento assimétrico.
Origem da transformação: 100% 50% (centro inferior)
Isso inicia o efeito de escala a partir da origem central inferior que, quando combinada com o valor de translação, se assemelha a um efeito de dobradiça sutil.
Aqui está o efeito de foco de paralaxe do CSS até agora.
Agora abra as configurações de linha e duplique a coluna duas vezes para criar um total de três colunas, cada uma com a mesma sinopse e efeitos de foco no lugar.
Resultado final
Aqui está o design final. Observe como as imagens de fundo de paralaxe são ocultadas por padrão ao rolar a página para baixo. Em seguida, eles aparecem ao pairar sobre cada uma das colunas à medida que saem. Você também pode ver as funções de paralaxe na coluna ao rolar a página para baixo enquanto passa o mouse sobre a coluna. É um efeito de pairar sutil, mas extremamente único.
Adicionando rotação ao efeito pairar
Também podemos adicionar uma rotação ao efeito de foco de paralaxe css que adiciona um toque agradável ao design. Basta abrir cada uma das configurações de coluna e atualizar o seguinte:
Transformar, girar o eixo Z (ao pairar): 5 graus
Se você quiser misturar tudo, pode dar à coluna do meio uma rotação de -5 graus.
Aqui está o resultado final.
E aqui está o mesmo design com uma imagem de fundo mais clara e um texto mais escuro.
Parte 2: Criando um efeito de flutuação de paralaxe de lupa em Divi
Duplique a seção do primeiro desenho e, a seguir, abra as configurações da seção e substitua a imagem de fundo por uma nova. Estou usando o do nosso pacote de layout de videogame porque realmente destaca o efeito de flutuação de paralaxe de ampliação.
Atualizar configurações de linha
Vamos precisar de algum espaço extra para este design, então abra as configurações de linha e atualize o seguinte:
Largura da calha: 1
Largura: 100%
Largura máxima: 98%
Depois disso, pule para a guia de conteúdo e exclua duas das colunas para que apenas uma permaneça.
Configurações de coluna
Para este design, precisamos aplicar o efeito de foco no nível do módulo em vez do nível da coluna, portanto, precisamos redefinir os estilos padrão para a coluna. Para fazer isso, clique com o botão direito no item da coluna e selecione “redefinir estilos de item”.
Atualizar módulo do Blurb
Depois que as configurações de coluna forem restauradas para os estilos padrão, abra as configurações do módulo blurb e adicione a mesma imagem de fundo de paralaxe css que foi adicionada à seção.
Dimensionamento
Para criar um módulo circular, primeiro precisamos dar a ele uma largura e altura correspondentes da seguinte maneira:
Largura: 300px
Alinhamento do Módulo: centro
Altura: 300px
Fronteira
Para completar o efeito circular, precisamos atualizar os cantos arredondados e dar uma leve borda.
Cantos arredondados: 50%
Largura da borda: 1px
Cor da borda: rgba (255,255,255,0,12)
Efeito de flutuação da sombra da caixa
Em seguida, dê à sinopse uma caixa de sombra ao passar o mouse da seguinte maneira:
Sombra da caixa: veja a imagem
Força do desfoque de sombra da caixa: 36 px
Cor da sombra (padrão): rgba (0,0,0,0)
Cor da sombra (pairar): rgba (0,0,0,0.7)
Transformar efeitos de flutuação
Assim que a sombra da caixa estiver no lugar, atualize as opções de transformação da seguinte maneira:
Origem da transformação (padrão): 50% 0% (centro à esquerda)
Isso garantirá que a sinopse não se estenda para fora da página, uma vez que é colocada na extremidade esquerda da linha de três colunas.
Escala de transformação (pairar): 130%
Isso aumentará a sinopse e realmente ampliará a imagem de fundo de paralaxe para um efeito de foco legal.
Duplique a coluna
Assim que a sinopse estiver pronta, podemos duplicar a coluna para criar três colunas, cada uma com o mesmo módulo de sinopse.
Abra as configurações de linha e duplique a coluna duas vezes para um total de três colunas.
Atualizar origem de transformação
Como todos os nossos módulos de sinopses têm a origem de transformação definida como “centro esquerdo”, precisamos ajustar isso para as sinopses nas colunas central e direita para que sejam escalonados a partir da posição apropriada.
Abra as configurações do módulo blurb na coluna 2 e atualize o seguinte:
Origem da transformação: 50% 50% (centro centro)
Em seguida, abra as configurações do módulo blurb na coluna 3 e atualize o seguinte:
Origem da transformação: 50% 100% (centro à direita)
Resultado final
Agora confira o resultado final. Observe como o efeito realmente amplia a imagem de fundo de paralaxe css por trás da sinopse. E quando você rola para baixo enquanto passa o mouse sobre a sinopse, parece o efeito de uma lupa.
Na verdade, isso é tão legal que podemos querer deixá-lo como o estilo padrão em vez de apenas no estado de foco.
Pensamentos finais
Espero que os exemplos neste post tenham dado um pouco de energia criativa para que você possa explorar designs ainda mais legais e efeitos de foco para combinar com paralaxe de CSS. O processo de configuração é muito simples, mas as possibilidades parecem infinitas.
Estou ansioso para ouvir de você nos comentários.
Saúde!