As opções de transformação integradas de Divi provaram ser uma ferramenta de design extremamente útil, permitindo redimensionar, girar, inclinar ou posicionar qualquer elemento em uma página com facilidade. E você pode até optar por transformar itens em estado de foco para efeitos de foco impressionantes. Então, hoje vamos mostrar como implantar essas animações em um clique.
Este método requer o uso de jQuery. O melhor dessa técnica é que você pode usar os parâmetros de design integrados de Divi para definir o estilo das propriedades de transformação e, em seguida, ative (ou desative) essas propriedades de transformação com um clique do mouse. Isso abrirá inúmeras possibilidades únicas para revelar conteúdo oculto ao mover itens ao clicar em vez de passar o mouse. E também ajuda a reduzir a necessidade de saber muito CSS.
Vamos começar.
O que você precisa para começar
Para este tutorial, tudo que você precisa é Divi. Para começar, acesse o painel do WordPress. Crie uma nova página, dê um título à sua página e continue projetando no Divi builder em primeiro plano. Selecione a opção “Construir do zero”. Agora você está pronto para ir!
A ideia básica explicada
Antes de entrar em muitos detalhes neste tutorial, explicarei como essa técnica funciona em poucas palavras.
Cada vez que você personaliza um elemento (seção, linha ou módulo) no Divi, você adiciona CSS personalizado a esse elemento em segundo plano. Por exemplo, usando as configurações integradas do Divi, você pode adicionar uma propriedade de rotação de transformação a um módulo blurb para que ele gire o módulo ao longo do eixo Z em 20 graus.
Mas nos bastidores, você cria um CSS personalizado que é adicionado a este módulo de texto e tem a seguinte aparência:
.et_pb_text_0 {transform: rotateZ (20deg); }
Simples o suficiente. E digamos que você queira adicionar a mesma opção de transformação instantânea. Você só precisa aplicar a propriedade transform para o estado de foco nas configurações do Divi Builder.
E o código será algo assim nos bastidores:
.et_pb_text_0: hover {transform: rotateZ (20deg); }
No entanto, se você deseja implantar a propriedade transform no clique, as coisas terão que funcionar de maneira um pouco diferente. Você precisará inserir um código javascript para acionar um evento de clique no elemento (ou módulo de texto).
Com nosso exemplo atual, nosso objetivo principal é basicamente ativar e desativar a propriedade transform "transform: rotateZ (20deg)" no clique. Uma maneira fácil de fazer isso é criar uma classe CSS personalizada com a propriedade "transformer: none!" Importante ”nas configurações da página (ou folha de estilo externa). Seria algo assim.
.toggle-transform-animation {transformar: nenhum! importante; }
Com esse CSS no lugar. Podemos adicionar a classe CSS "toggle-transform-animation" ao elemento do módulo blurb que tem nossa propriedade transform.
Isso desativará (substituirá) a propriedade transform e impedirá que ela seja ativada inicialmente, mesmo que o estilo da propriedade transform já tenha sido adicionado a ela.
Agora tudo o que você precisa fazer é ativar (adicionar e remover) esta classe CSS personalizada ao clicar no elemento. Portanto, toda vez que clicarmos no elemento, a classe será excluída e as propriedades de transformação (aquelas que você adicionou com Divi) serão implantadas.
Aqui está um exemplo simples de como fazer isso. Primeiro, adicione outra classe CSS ao módulo blurb chamado "transform_target".
Em seguida, vá para Divi > Opções de tema > Integração e adicione o seguinte script jQuery ao cabeçalho de seu blog:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
Isso é tudo ! Agora, toda vez que você clicar no módulo de apresentação, a propriedade de transformação que você adicionou à apresentação no Divi será habilitada ou desabilitada.
Vamos agora criar um exemplo para que você possa ver como isso pode ser útil para seus próprios projetos.
Como ativar as propriedades de transformação Clique em para exibir o conteúdo em Divi
Para este exemplo, ficaremos com um exemplo simples de sinopse usado acima. A seguir, adicionaremos uma sinopse adicional por trás disso, para que sempre que você clicar na sinopse superior, ela se mova para fora do caminho para revelar o conteúdo sinopse adicional atrás do documento.
Criando módulos Blurb na frente e atrás
Em seguida, adicione um módulo de apresentação à coluna 1.
Atualize o conteúdo sinopse para incluir apenas um título (remova o conteúdo do corpo padrão) e adicione um ícone de sinopse.
Atualize os parâmetros de design da seguinte maneira:
Cor de fundo: #4c5866
Cor do ícone: #ffffff
Orientação do texto: centro
Cor do texto
: Margem personalizada leve: 0px na parte inferior
Preenchimento personalizado: 15% na parte superior, 15% na parte inferior, 10% na esquerda, 10% na direita
Voltaremos a este módulo mais tarde, mas, por enquanto, precisamos criar nosso segundo módulo Blurb, que servirá como um módulo de "retorno" com conteúdo adicional.
Para fazer isso, duplique o módulo de apresentação que você acabou de criar.
Em seguida, no segundo módulo, remova o ícone de apresentação (e a imagem padrão) e adicione o conteúdo do corpo de volta ao módulo. Em seguida, atualize os parâmetros de design da seguinte forma:
Cor de fundo: rgba (76,88,102,0.3)
Cor do texto: preto
Preenchimento personalizado: 20% top
Posicione o módulo antes de Resumo
Agora que nossas duas sinopses estão estilizadas, precisamos voltar à nossa sinopse frontal (superior) e posicioná-la acima da sinopse posterior (inferior). Para fazer isso, iremos atribuir-lhe uma posição absoluta com uma altura de 100% e uma largura de 100%.
Primeiro, abra as configurações do módulo de apresentação superior / frontal e atualize o seguinte:
altura: 100%;
largura: 100%;
Em seguida, adicione o seguinte código CSS personalizado ao elemento principal:
posição: absoluta! importante; transição: todos os .5s;
Em seguida, atualize o índice z da seguinte maneira:
Índice Z: 2000
A posição absoluta, combinada com 100% de altura e largura e o índice z, garante que o módulo de sincronia permaneça no topo do módulo de sincronia atrás dele. A propriedade de transição é, na verdade, a duração da transição das opções de transformação que implantaremos no próximo clique. E o "cursor: ponteiro" serve para mudar o cursor para que o elemento pareça clicável para o usuário.
Incluindo opções de transformação e classes customizadas na sinopse frontal
Agora é a hora de adicionar nossas propriedades de transformação à sinopse. Em seguida, adicionaremos as classes CSS personalizadas necessárias para que nosso jQuery alterne essas propriedades no clique.
Sob os parâmetros de design do Blurb frontal, adicione as seguintes propriedades de transformação:
Escala de transformação X e Y: 20%
Origem da transformação: centro superior
Lembre-se de que o design de transformação que você vê neste ponto será o acionado no clique. Nós simplesmente aproveitamos o construtor Divi para obter o projeto desejado. Nesse caso, a sinopse frontal se contrai e fica centralizada na parte superior dela como um ícone clicável.
Quando terminar, adicione as duas classes CSS necessárias para atingir o anúncio frontal com o jQuery da seguinte maneira:
Classe CSS: toggle-transform-animation transform_target
(não se esqueça de separar o nome de cada classe com um espaço)
Em seguida, adicione o seguinte snippet de código CSS personalizado que será usado para ativar e desativar as propriedades de transformação com o jQuery.
.toggle-transform-animation {transform: none! important; }
Você notará que as propriedades de transformação de blurb adicionadas anteriormente foram desabilitadas porque esta classe foi aplicada a ela.
Agora vá para Divi> Opções de tema> Integração e adicione o seguinte script jQuery ao cabeçalho do blog:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
Vamos ver o resultado final.
Você pode usar este exemplo para criar designs ainda mais impressionantes. Não hesite em compartilhar sua opinião na seção de comentários.
