Como criar uma superposição de imagem com designs de animação de obturador de texto dividido em Divi
Publicados: 2021-03-05As superposições de imagens continuam a ser um recurso de design popular ao exibir imagens em seu site. Eles não apenas oferecem uma maneira criativa de exibir imagens, mas também podem tornar a visualização das imagens mais divertida e envolvente para os visitantes, especialmente quando você adiciona animações personalizadas ao passar o mouse ou clicar na imagem.
Neste tutorial, mostraremos como criar uma superposição de imagem com animação de obturador de texto dividido em Divi. Primeiro, mostraremos como construir a superposição de imagem personalizada com persianas de texto dividido. Em seguida, mostraremos como você pode usar as opções de transformação integradas do Divi para criar os três designs de animação de obturador de sobreposição de imagem completamente exclusivos. Mostraremos mais alguns exemplos de designs para fazer fluir a criatividade.
Vamos pular e começar!
Espiada
Aqui está uma rápida olhada nos designs de sobreposição de imagem deste tutorial.
E aqui está um código que demonstra o mesmo design usado neste tutorial.
Baixe o Layout GRATUITAMENTE
Para colocar suas mãos nos designs de animação de obturador de texto dividido de sobreposição de imagem deste tutorial, primeiro você precisará baixá-los 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.
Parte 1: Construindo a superposição de imagem com persianas de texto dividido
Para esta primeira parte do tutorial, vamos construir a configuração inicial da sobreposição de imagem com as persianas de texto dividido. Feito isso, podemos adicionar animação às venezianas mais tarde.
A fila
Para começar, adicione uma linha de duas colunas à seção regular.
Antes de adicionar módulos, abra as configurações de linha e atualize a largura da medianiz:
- Largura da calha: 2
Atualizando a coluna
A coluna será o contêiner principal que conterá nossa imagem e os elementos de sobreposição do obturador. Também será o alvo principal que iniciará a animação do obturador ao pairar. Em outras palavras, quando o cursor se move dentro da coluna, a animação dos elementos filhos (as venezianas) será ativada e quando o cursor se mover para fora da coluna, a animação será desativada.
Para designar nossa coluna como a "coluna do obturador" e para animá-la mais tarde "ao passar o mouse", adicione as seguintes classes CSS à coluna:
- Classe CSS: shutter-column on-hover
Em seguida, atualize os estouros para ocultos para que não vejamos os elementos transformados uma vez que eles ultrapassem o contêiner de coluna durante a animação.
- Excesso horizontal: oculto
- Estouro vertical: oculto
Adicionando a imagem principal
Dentro da coluna 1, adicione um módulo de imagem. Isso servirá como a imagem principal que colocaremos atrás da sobreposição do obturador.
Faça upload de uma imagem para o módulo de imagem.
Em seguida, defina o alinhamento da imagem no centro.
Criação do obturador superior com texto dividido
Agora que nossa imagem está no lugar, vamos adicionar o obturador superior usando um módulo de texto. Adicione um novo módulo de texto sob a imagem.
Atualize o conteúdo do módulo de texto adicionando o texto “divi” à área do corpo.
Na guia de design, atualize o estilo do texto da seguinte maneira:
- Fonte do texto: Poppins
- Peso da fonte do texto: pesado
- Estilo da fonte do texto: TT
- Cor do texto do texto: #ffffff
- Tamanho do texto do texto: 200 px (desktop), 30vw (tablet e telefone)
- Espaçamento entre letras do texto: -0,03em
- Altura da linha de texto: 0em
- Alinhamento de Texto: Centro
Em seguida, atualize as opções de dimensionamento e espaçamento:
- Largura: 100%
- Altura: 50%
- Margem: 0px inferior
Na guia Avançado, atualize o seguinte:
- Classe CSS: obturador superior
Usaremos a classe CSS para ativar e desativar a animação de transformação com nosso código mais tarde.
Em seguida, adicione este CSS personalizado ao elemento principal:
display:flex; align-items:flex-end; justify-content:center;
Este código usa flex para garantir que o texto seja alinhado verticalmente na parte inferior do módulo. Uma vez que o texto tem uma altura de linha de 0, o texto será mostrado dividido, mostrando apenas a metade superior.
Para posicionar nosso obturador superior, primeiro precisamos ocultar o excesso do texto e, em seguida, dar a ele uma posição absoluta da seguinte maneira:
- Excesso horizontal: oculto
- Estouro vertical: oculto
- Posição: Absoluta
Isso moverá o obturador sobre a metade superior da imagem.
Criação do obturador inferior com texto dividido correspondente
Agora que concluímos nosso obturador superior, podemos iniciar a criação do obturador inferior duplicando o módulo de texto do obturador superior.
Em seguida, abra o módulo de texto duplicado e atualize o seguinte:
- Classe CSS: obturador superior
Atualize o CSS do elemento principal substituindo “flex-end” por “flex-start” para a propriedade align-items. Aqui está o CSS final:
display:flex; align-items:flex-start; justify-content:center;
Com “flex-start”, o texto é alinhado verticalmente na parte superior do módulo. E como o texto tem uma altura de linha de 0, o texto será mostrado dividido, mostrando apenas a metade inferior.
Em seguida, atualize a posição absoluta com um deslocamento vertical da seguinte forma:
- Deslocamento vertical: 50%
Isso faz com que o módulo de texto do obturador fique acima da metade inferior da imagem.
O texto dividido em ambas as persianas agora deve estar alinhado como uma combinação perfeita.
Neste ponto, criamos com sucesso a configuração para a sobreposição de imagem do obturador de texto dividido. Isso consiste na coluna do obturador como o contêiner, a imagem principal, o obturador superior que fica na metade superior da imagem e o obturador inferior que fica na metade inferior da imagem.
Usaremos isso como uma espécie de modelo inicial para os próximos exemplos que incluirão as animações do efeito do obturador usando propriedades de transformação.
Parte 2: O Código
Para adicionar a funcionalidade da animação do obturador, precisamos de alguns trechos de CSS e JS usando um módulo de código.
Adicione um novo módulo de código à página. Podemos adicioná-lo à coluna direita da primeira seção superior que usamos para nossa construção de sobreposição inicial.
O CSS
Cole o seguinte CSS na caixa de código, certificando-se de envolvê-lo com as tags de estilo necessárias:
/* transition duration of shutter animation */
.top-shutter,
.bottom-shutter {
transition: transform 1s;
}
/* disables all transform options created in
Divi Builder for both shutters */
.divi-transform-none .top-shutter,
.divi-transform-none .bottom-shutter {
transform: none;
}
.on-click {
cursor:pointer;
}
Este CSS é muito simples. Tudo o que ela faz é aplicar transform: none às venezianas dentro da coluna com a classe “divi-transform-none”. Esta classe será ativada e desativada com JS para criar a animação. A transição: a transformação 1s simplesmente define a duração da transição (ou animação) para durar 1 segundo.
O JS
Após o CSS, adicione o seguinte JQuery à caixa de código, certificando-se de envolvê-lo com as tags de script necessárias:
(function ($) {
$(document).ready(function () {
/*
Toggle shutter transform animation on hover.
To work, Divi Column with shutters must include
these CSS Classes: "shutter-column on-hover divi-transform-none".
*/
$ShutterColumnToHover = $(".shutter-column.on-hover");
$ShutterColumnToHover.hover(function () {
$(this).toggleClass("divi-transform-none");
});
/*
Toggle shutter transform animation on click.
To work, Divi Column with shutters must include
these CSS Classes: "shutter-column on-click divi-transform-none".
*/
$ShutterColumnToClick = $(".shutter-column.on-click");
$ShutterColumnToClick.on("click", function (e) {
$(this).toggleClass("divi-transform-none");
e.stopPropagation();
});
$(document).on("click", function (e) {
if ($(e.target).is(".shutter-column.on-click") === false) {
$ShutterColumnToClick.addClass("divi-transform-none");
}
});
});
})(jQuery);
A primeira parte do código adiciona a funcionalidade que alterna as animações de transformação do obturador ao pairar sempre que uma coluna tem as classes “shutter-column on-hover divi-transform-none”.
$ShutterColumnToHover = $(".shutter-column.on-hover");
$ShutterColumnToHover.hover(function () {
$(this).toggleClass("divi-transform-none");
});
A segunda parte do código adiciona a funcionalidade que alterna as animações de transformação do obturador no clique sempre que uma coluna tem as classes “obturador-coluna ao clicar divi-transforma-nenhum”.
$ShutterColumnToClick = $(".shutter-column.on-click");
$ShutterColumnToClick.on("click", function (e) {
$(this).toggleClass("divi-transform-none");
e.stopPropagation();
});
$(document).on("click", function (e) {
if ($(e.target).is(".shutter-column.on-click") === false) {
$ShutterColumnToClick.addClass("divi-transform-none");
}
});
Parte 3: Projetos de animação de obturador de texto dividido
Design # 1
Para criar nosso primeiro design de animação de obturador, vamos iniciar o processo de design duplicando a primeira seção. Isso nos dará uma nova seção com uma sobreposição de imagem pré-construída com as persianas de texto divididas prontas para usar.
Adicionar propriedades de transformação ao obturador superior
Normalmente, quando você usa CSS para animar algo com propriedades de transformação, o elemento não teria estilo de transformação inicialmente e, em seguida, o estilo de transformação seria aplicado sempre que o usuário passasse o mouse ou clicasse no item. No Divi, vamos inverter o processo e começar adicionando o estilo de transformação ao elemento usando o Divi Builder primeiro. Isso nos permite usar as opções de transformação integradas ao editar o design visualmente. Então, quando terminarmos de adicionar todos os elementos de design de transformação, podemos desabilitá-los inicialmente (usando uma classe CSS) e, em seguida, ativá-los e desativá-los quando o usuário interagir com a sobreposição.
Para adicionar o design de transformação ao obturador superior, abra as configurações do módulo de texto do obturador superior e atualize o seguinte:
- Escala de transformação (X e Y): 150%
- Transformar o eixo Y da tradução: -101%
- Origem da transformação: centro superior
Se você fez certo, o obturador superior não ficará mais visível, o que é o que queremos, porque queremos que toda a imagem principal seja exposta após a transição da animação.
Adicionar propriedades de transformação ao obturador inferior
Para o obturador inferior, atualize as seguintes opções de design de transformação:
- Escala de transformação (X e Y): 150%
- Transformar o eixo Y da tradução: 101%
- Origem da transformação: centro inferior
Adicione uma classe para desativar os designs de transformação inicialmente
Como mencionei antes, quando terminarmos de adicionar os designs de transformação necessários para a animação do obturador, podemos desabilitar esses designs de transformação inicialmente adicionando uma classe CSS.
Por causa do código CSS personalizado que adicionamos anteriormente, o design aparecerá sem nenhum design de transformação.
Adicionar funcionalidade ao clicar com uma única classe
Para obter a mesma animação acionada no clique em vez de ao passar o mouse, tudo o que precisamos fazer é substituir uma única classe na coluna.
Primeiro, duplique a coluna 1 com nosso primeiro exemplo de trabalho em foco. Em seguida, exclua a coluna vazia. Agora você deve ter duas colunas idênticas com as mesmas classes e conteúdo.
Abra as configurações da coluna 2 e substitua a classe “ao passar o mouse” pela classe “ao clicar”. Aqui está o que as três classes finais devem ser:
- Classe CSS: shutter-column on-click divi-transform-none
Resultado
Invertendo a animação do obturador ao pairar
Se você deseja que a imagem principal seja exibida descoberta inicialmente e, em seguida, adicione a sobreposição ao passar o mouse sobre a imagem (o inverso de como funciona agora), você pode remover a classe "divi-transform-none" na coluna usada para o obturador . Isso lhe dará o seguinte efeito.
Design # 2
Para criar a segunda animação do obturador, podemos duplicar a seção anterior com a nossa primeira animação do obturador.
Atualizar persianas
Em seguida, use a seleção múltipla para selecionar o obturador superior e os módulos de texto do obturador inferior. Em seguida, abra as configurações do elemento para ambos e atualize o seguinte:
- Plano de fundo: #ffffff
- Cor do texto do texto: # 000000
- Modo de mistura: tela
Resultado
Design # 3
Para criar o terceiro design de sobreposição de imagem de animação do obturador, duplique a seção anterior.
Adicionar nova imagem
Em seguida, atualize o módulo de imagem com uma nova imagem.
Atualizar persianas
Use multiselect para selecionar os módulos de texto do obturador superior e inferior e abra as configurações do elemento para atualizar o seguinte:
- Conteúdo do corpo: d
- Plano de fundo: rgba (0,0,0,0.9)
- Cor do texto do texto: #ffffff
- Tamanho do texto do texto: 450 px (desktop), 70vw (tablet e telefone)
- Modo de mistura: Multiplicar
Abra as configurações do módulo de texto do obturador superior e atualize as seguintes opções de transformação:
- Escala de transformação (X e Y): 100% (padrão)
- Transformar o eixo Y da tradução: -101%
- Transformar, girar eixo Z: -45deg
- Origem da transformação: canto superior esquerdo
Em seguida, atualize as configurações do módulo de texto do obturador inferior e atualize as seguintes opções de transformação:
- Escala de transformação (X e Y): 100% (padrão)
- Transformar o eixo Y da tradução: 101%
- Transformar, girar eixo Z: -45deg
- Origem da transformação: canto inferior direito
Resultado
Mais exemplos e possibilidades
Aqui estão mais alguns exemplos de projetos usando as mesmas técnicas.
Aqui está um que é semelhante ao design nº 2, mas sem a escala de transformação nas persianas. Também mostra como o efeito lightbox ainda funciona na imagem.
E aqui está outro exemplo que usa transform translate para deslizar as venezianas horizontalmente.
Resultados finais
Pensamentos finais
Criar superposições de imagem com animações de obturador de texto dividido em Divi pode ser uma abordagem eficaz para destacar suas imagens e envolver os visitantes de uma maneira nova.
Esperançosamente, isso despertará sua criatividade para adicionar seus próprios designs e transformar efeitos de animação usando diferentes cores, fontes, modos de mesclagem, etc. As possibilidades parecem infinitas.
Estou ansioso para ouvir de você nos comentários.
Saúde!