Como adicionar efeitos de inclinação flutuante a qualquer elemento do Divi
Publicados: 2021-08-12Adicionar efeitos de inclinação flutuante ao seu web design é uma daquelas maneiras divertidas e envolventes de dar vida ao seu site Divi. Normalmente, este tipo de design requer um plugin ou código mais avançado (como neste tutorial). Mas, esse processo é muito mais fácil usando Tilt.js (um efeito leve de inclinação do mouse para jQuery). Com Tilt.js, você pode facilmente aplicar efeitos de inclinação de pairar a qualquer coisa em minutos.
Neste tutorial, vamos mostrar como adicionar efeitos de inclinação do mouse a qualquer elemento no Divi. Usando uma combinação de fragmentos jQuery tilt.js e o construtor Divi, mostraremos como adicionar efeitos de inclinação de foco impressionantes a uma imagem, uma coluna de módulos, uma linha e muito mais. Também mostraremos como adicionar surpreendentes efeitos de paralaxe 3D.
Vamos começar!
Espiada
Para obter uma demonstração ao vivo da funcionalidade por trás deste tutorial, verifique este código.
E aqui está uma rápida olhada no design que construiremos 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 da seção para sua biblioteca Divi, navegue até a biblioteca Divi.
Clique no botão Importar.
No pop-up de portabilidade, selecione a aba de importação e escolha o arquivo de download do seu computador.
Em seguida, clique no botão importar.
Feito isso, o layout da seção estará disponível no Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará fazer o seguinte:
- Se ainda não o fez, instale e ative o Divi Theme.
- Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
- Escolha a opção “Build From Scratch”.
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
O básico para usar Tilt.js
Tilt.js é um efeito leve de inclinação de foco de paralaxe para jQuery. Com apenas algumas linhas de jQuery, você pode adicionar efeitos de inclinação do mouse a qualquer elemento da página. Ele vem com até 10 opções (consulte a documentação) que podem ser facilmente adicionadas para controlar o design e a funcionalidade do efeito de inclinação, incluindo escala e um belo efeito de reflexo .
No nível mais básico, depois de acessar a biblioteca tilt.js, você pode adicionar uma classe CSS ao elemento que deseja inclinar ao passar o mouse e, em seguida, usar um snippet jQuery simples para aplicar a função de inclinação em um objeto jQuery com a mesma classe .
Por exemplo, digamos que você adicione uma classe CSS personalizada a um módulo de imagem denominado “et-js-tilt”.
Tudo o que você precisa fazer depois disso é adicionar o seguinte trecho do jQuery para adicionar o efeito de inclinação do mouse à imagem.
$(".et-js-tilt").tilt();
Em seguida, você pode definir opções adicionais para o efeito de inclinação. Por exemplo, você pode adicionar um efeito de escala e brilho com o seguinte trecho de código.
$(".et-js-tilt").tilt({
glare: true,
maxGlare: 0.7,
scale: 1.1
});
O resultado seria este ...
Para um efeito mais avançado, você pode adicionar transform: translateZ () a qualquer elemento filho para obter um efeito de paralaxe 3D. Mais sobre isso mais tarde.
Agora que temos uma compreensão básica de como usar o tilt.js, vamos explorar como usá-lo no Divi.
Como adicionar efeitos de inclinação flutuante a qualquer elemento do Divi
Adicionando um efeito de oscilação de inclinação aos módulos Divi
Adicione uma linha de três colunas à seção regular padrão.
Adicionar Módulo de Imagem
Na primeira coluna, adicione um Módulo de Imagem.
Nota: Você pode usar qualquer módulo que desejar. Não precisa ser um módulo de imagem.
Faça upload de uma imagem de sua escolha. Estou usando um do Pacote de Layout de Cookies Caseiros.
Adicionar classe de módulo de imagem
Na guia avançada, adicione a seguinte classe CSS:
- Classe CSS: et-js-tilt
Esta classe será usada como um seletor para nossa função de inclinação posteriormente.
Copiar e colar módulos de imagem
Em seguida, copie o módulo de imagem e cole um em cada uma das duas colunas restantes.
Você pode substituir as imagens duplicadas por novas, se desejar. Apenas certifique-se de que cada módulo de imagem tenha a classe CSS “et-js-tilt”.
Adicione o JQuery tilt.js
Para adicionar a biblioteca tilt.js e o snippet de código necessário para inclinar nossas imagens, usaremos um módulo de código.
Primeiro, adicione uma nova linha de uma coluna sob a linha existente.
Em seguida, adicione um módulo de código à nova linha.
Em seguida, precisamos acessar a biblioteca tilt.js adicionando um script que importa tilt.js de seu CDN (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). Cole o seguinte script na caixa de código.
Use o seguinte src em uma tag de script para importar a biblioteca:
src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"
Deve ser assim:
É importante importar tilt.js antes de adicionar o código que o usará. Portanto, após o script apontar para tilt.js, adicione as tags de script necessárias para envolver o JQuery que precisamos adicionar. Em seguida, cole o seguinte JQuery entre as tags de script .
jQuery(document).ready(function ($) {
if ($(window).width() > 980) {
$(".et-js-tilt").tilt({
glare: true,
maxGlare: 0.7,
scale: 1.1,
perspective: 300,
});
}
});
Observe que a função tilt () está dentro de uma instrução if que será executada quando a largura do navegador for maior que 980 px. Isso garantirá que o efeito só aconteça na área de trabalho.
Aqui está o resultado.
Adicionando um efeito de oscilação de inclinação à linha
Como mencionamos anteriormente, você pode adicionar esse efeito de inclinação flutuante a qualquer elemento no Divi. Isso inclui uma linha inteira. Além disso, você pode adicionar um efeito de inclinação a uma linha enquanto mantém os efeitos de inclinação para cada um dos módulos dentro da linha.
Veja como fazer.
Duplicar linha e adicionar classe CSS exclusiva à linha
Duplique a linha de imagens existente e, a seguir, abra as configurações da linha duplicada. Na guia avançada, dê à linha uma classe CSS exclusiva da seguinte maneira:
- Classe CSS: et-row-js-tilt
Adicionar jQuery
Em seguida, adicione o seguinte jQuery na função de inclinação anterior para aplicar uma função de inclinação separada à linha.
$(".et-row-js-tilt").tilt({
scale: 1,
perspective: 1200,
});
Observe que, para este efeito de inclinação, trouxemos a escala de volta para 1 e aumentamos o valor da perspectiva para que a inclinação seja mais sutil.
Aqui está o resultado.
Observe como a linha tem uma função de inclinação que é ativada ao passar o mouse sobre a linha e cada um dos módulos de imagem também tem o mesmo efeito de inclinação que adicionamos anteriormente. É assim que você pode aplicar instâncias de efeito de inclinação aninhadas.
Adicionando um efeito de oscilação de inclinação a uma coluna com vários módulos Divi
Em alguns casos, é útil adicionar um efeito de inclinação a uma coluna de módulos. Isso permitirá que você projete vários módulos em uma coluna com Divi e, em seguida, tenha todos esses elementos inclinados como uma unidade. Para lhe dar um exemplo de como fazer isso, vamos adicionar um efeito de foco de inclinação a uma coluna com um módulo de imagem, um módulo de texto e um módulo de botão.
Adicionar nova linha
Para começar, crie uma nova linha de um sexto, dois terços, um sexto da coluna sob a linha de imagens anterior.
Adicionar Módulo de Imagem
Dentro da coluna 2 (a coluna do meio), adicione um novo módulo de imagem.
Carregue uma imagem para o módulo e defina o alinhamento da imagem para o centro.
Adicionar Módulo de Texto
No módulo de imagem, adicione um módulo de texto com o seguinte título H2:
<h2>Local Organic</h2>
Em seguida, atualize os estilos de título 2 da seguinte maneira:
- Fonte do título 2: Berkshire Swash
- Alinhamento de Texto do Título 2: Centro
- Cor do texto do título 2: # 000000
- Tamanho do texto do título 2: 60 px (desktop), 32 px (tablet), 20 px (telefone)
- Altura da linha do título 2: 1,2em
Adicionar Módulo de Botão
No Módulo de texto, adicione um módulo de botão.
Atualize o texto do botão para ler "Sobre nós" e atualize as configurações de design da seguinte forma:
- Alinhamento do botão: centerr
- Tamanho do texto do botão: 18 px
- Cor do texto do botão: #fff
- Cor de fundo do botão: # 000
- Largura da borda do botão: 0 px
- Raio da borda do botão: 100 px
- Fonte do botão: areia movediça
- Peso da fonte do botão: negrito
- Preenchimento: 16px superior, 16px inferior, 30px à esquerda, 30px à direita
- Sombra da caixa: veja a imagem
Configurações de coluna
Assim que os três módulos forem concluídos, abra as configurações para a coluna pai desses módulos (coluna 2) e atualize o seguinte:
- Cor de fundo: # f5cee6
- Preenchimento: 50 px (superior e inferior), 20 px (esquerdo e direito)
Adicionando a classe CSS à coluna
Na guia avançada, adicione a seguinte classe CSS:
- Classe CSS: et-column-js-tilt
Adicionando o jQuery para aplicar um efeito de inclinação à coluna
Para adicionar o efeito de inclinação à coluna, podemos adicionar outro trecho semelhante de jQuery que tem como alvo a classe CSS da coluna. Cole o seguinte snippet abaixo do snippet anterior direcionado à linha.
$(".et-column-js-tilt").tilt({
scale: 1.1,
perspective: 1000,
});
Aqui está o resultado final.
Adicionando efeito de paralaxe 3D aos elementos internos
Para um efeito de inclinação de foco mais avançado, podemos adicionar um efeito de paralaxe 3D aos módulos internos da coluna. Usando uma combinação de perspectiva e transformação: translateZ () , podemos fazer com que cada um dos módulos dentro da coluna seja exibido no espaço 3D quando o efeito de inclinação do mouse estiver ativo.
Veja como fazer.
Duplicar linha anterior
Primeiro, duplique a linha anterior com o efeito de inclinação adicionado à coluna do meio.
Adicionar classe de coluna única
Em seguida, atualize a coluna do meio (coluna 2) com uma classe CSS exclusiva da seguinte maneira:
- Classe CSS: et-column-js-tilt-3d
CSS customizado
Para garantir que os módulos internos preservem o efeito 3D, adicione o seguinte CSS personalizado ao elemento principal da coluna:
transform-style: preserve-3d;
Adicionar jQuery e CSS
Em seguida, adicione mais alguns trechos de jQuery sob o trecho de função de inclinação anterior direcionando a coluna da seguinte maneira:
const columnTilt3d = $(".et-column-js-tilt-3d").tilt({
scale: 1.1,
perspective: 1000,
});
columnTilt3d.on("tilt.mouseEnter", function (e) {
$(e.target).addClass("tilt-active");
});
columnTilt3d.on("tilt.mouseLeave", function (e) {
$(e.target).removeClass("tilt-active");
});
Este jQuery adiciona outra função básica de inclinação à coluna, assim como no exemplo anterior. No entanto, o código também alterna uma nova classe (“tilt-active”) para a coluna sempre que o efeito de inclinação está ativo. Podemos usar essa nova classe para aplicar um valor transform: translateZ () a cada um dos módulos ao passar o mouse sobre a coluna. Isso criará o efeito de paralaxe 3D pop-out.
Para fazer isso, adicione o seguinte CSS personalizado ao topo da caixa / conteúdo do código, certificando-se de envolver o CSS nas tags de estilo necessárias.
.et-column-js-tilt-3d.tilt-active .et_pb_image {
transform: translateZ(100px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_text {
transform: translateZ(40px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_button {
transform: translateZ(50px);
}
Agora confira o resultado final. Observe como os três módulos saltam no espaço 3D à medida que giram durante o efeito de inclinação.
Resultados finais
Aqui está outra olhada nos resultados finais de nossos exemplos.
Pensamentos finais
Os efeitos de inclinação do mouse oferecidos pelo Tilt.js são realmente divertidos de experimentar. Embora eu tenha usado alguns exemplos básicos neste tutorial, você poderia facilmente passar o dia aplicando esses efeitos de inclinação do mouse em qualquer um de nossos layouts predefinidos ou em seu próprio site. Aproveitar!
Estou ansioso para ouvir de você nos comentários.
Saúde!