Como adicionar efeitos de foco Ken Burns a imagens, módulos e linhas no Divi
Publicados: 2019-03-20O Efeito Ken Burns já existe há algum tempo. O efeito ficou famoso pelo documentarista americano Ken Burns, que usou uma combinação de técnicas de panorâmica e zoom para dar vida às imagens em seus filmes. Em web design, o Efeito Ken Burns provou ser uma técnica de design popular para dar vida a imagens de fundo.
O efeito Ken Burns também pode ser usado como um efeito de foco para imagens. Certamente você já viu isso usado antes. Em um esforço para dar vida às imagens, os web designers adicionam efeitos de foco às imagens que fazem com que ampliem, movam e girem.
Com o lançamento de efeitos Transform para o Divi Builder, nunca foi tão fácil trazer efeitos de foco ken burns para suas imagens. Essas opções de transformação permitem dimensionar (zoom), mover (ou panoramizar) e girar uma imagem como quiser. E como você pode aplicar essas transformações ao estado de pairar da imagem, as possibilidades de design são praticamente infinitas.
Neste tutorial, mostrarei como é fácil criar efeitos de foco completamente exclusivos de ken burns para imagens e linhas usando o Divi Builder.
Vamos começar.
Espiada
Aqui está uma prévia do efeito de foco do ken burns que pode ser facilmente obtido com as opções de transformação do Divi.
O conceito básico explicado
O conceito básico para criar o efeito de foco Ken Burns envolve o uso das novas opções de transformação do Divi para dimensionar, posicionar e girar a imagem ao passar o mouse sobre essa imagem. Você pode aumentar a propriedade de transformação de escala em uma certa porcentagem para fazer a imagem crescer ao passar o mouse. Você pode usar a propriedade translate transform para mover a imagem ao longo dos eixos xey. E você pode girar a imagem usando a propriedade de transformação girar definindo um valor de grau específico (neste caso, o valor de grau para rotação no eixo x). Por último, você pode controlar a duração da transição (velocidade) e a curva de velocidade para controlar a velocidade de um fluxo do efeito de foco do ken burns. As três propriedades de transformação e propriedades de transição trabalham juntas para criar um efeito de foco ken burns que dá vida às suas fotos.
Você pode ajustar facilmente as propriedades de transformação e as propriedades de transição usando as configurações integradas que o Divi fornece. No entanto, a chave para fazer esse efeito funcionar envolve uma linha simples de css (overflow: hidden) que precisa ser aplicada à coluna que contém sua imagem. Uma vez que você irá dimensionar, mover e girar a imagem, você deseja que o estouro da imagem fique oculto fora da coluna que a contém.
Depois de ter a ideia básica e a funcionalidade no lugar, é notável como é fácil posicionar a imagem exatamente como você deseja usando as opções de transformação do Divi.
Baixe os exemplos de efeito de pairar de Ken Burns GRATUITAMENTE
Para colocar as mãos nos exemplos de efeitos de foco gratuitos de Ken Burns, 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.
Depois de fazer o download do arquivo zip, descompacte a pasta. Em seguida, importe o layout .json usando o recurso Divi Builder Portability. Ou você pode simplesmente arrastar o arquivo para o Divi Builder usando a funcionalidade Arrastar e Soltar do Divi. É isso!
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!
Começar com uma nova página
A primeira coisa que você precisa fazer é criar uma nova página. Em seguida, dê a você um título para a página e implante o Divi Builder no front end. Em seguida, escolha a opção “Construir do zero”.
Adicionando o efeito Ken Burns a uma imagem em uma linha de coluna
Para este primeiro exemplo básico, vou mostrar como adicionar o efeito de foco ken burns a uma única imagem em uma linha de uma coluna. Usarei as opções de transformação escalar, traduzir e girar para obter esse efeito.
Primeiro, crie uma nova seção com uma linha de uma coluna. Em seguida, adicione um módulo de imagem à linha.
Escondendo o estouro da coluna
Antes de começar a atualizar as configurações de imagem, abra as configurações de linha e clique na guia Avançado. Em seguida, adicione o seguinte CSS personalizado ao elemento principal da coluna:
overflow: hidden;
Isso evitará que a imagem se estenda (ou transborde) além do contêiner de coluna sempre que a imagem for dimensionada para um tamanho maior ao passar o mouse. Se você não adicionar isso, a imagem sairá do contêiner e ocultará outros elementos da página. Tecnicamente, você poderia adicionar este css ao elemento principal da linha em vez da coluna, mas também precisaria se livrar de qualquer preenchimento de linha personalizado.
Salve as configurações de linha.
Adicionando sua imagem
Agora podemos adicionar imagem ao módulo de imagem. Abra as configurações do módulo de imagem e adicione uma imagem.
Certifique-se de que a imagem seja consideravelmente maior do que a coluna. Isso é importante para evitar que a imagem pareça embaçada quando você redimensioná-la para um tamanho maior ao passar o mouse. Se você estiver usando as configurações padrão de uma linha de uma coluna, a largura máxima da coluna será 1080px. Então, estou usando uma imagem que tem cerca de 1500 px de largura e 900 px de altura.
Importante: Como regra geral, quanto maior a imagem, mais espaço você terá para dimensionar, mover e girar a imagem sem perder a qualidade da imagem.
Adicionando Efeitos Transform Hover
Agora que temos nossa imagem no lugar, é hora de usar essas opções de transformação para criar o efeito de foco Ken Burns. Vá até a guia de design e abra as opções de transformação. Ative os efeitos de foco e selecione a guia de foco. Agora, qualquer personalização de efeito de transformação se aplicará apenas ao estado de foco do módulo de imagem. Em seguida, na guia Transform Scale, atualize o seguinte:
Eixo x da escala de transformação (pairar): 136%
Eixo y da escala de transformação (pairar): 136%
Em seguida, clique na guia Transform Translate e atualize o seguinte:
Transform Translate x-axis (hover): 3%
Transformar traduzir eixo y (pairar): 9%
Isso move a imagem para a esquerda em 3% e para baixo em 9%. Para esta imagem específica, eu estava procurando um efeito que aumentaria o zoom e traria o casal para o centro da janela de exibição da coluna.
Por padrão, os valores de comprimento de conversão serão em pixels (não porcentagem). Você pode usar pixels para mover a imagem, mas acho que usar porcentagens torna o posicionamento mais responsivo.
Em seguida, clique na guia Transform Rotate e atualize o seguinte:
Transformar, girar o eixo x (pairar): 6 graus
Atualizar opções de transição
Por fim, precisamos atualizar a duração da transição (quanto tempo leva para o efeito de flutuação da transformação ser concluído) e a curva de velocidade (a função de tempo que permite que a transição mude de velocidade ao longo de sua duração). Para este exemplo, quero que a transição demore mais para um efeito Ken Burns mais dramático (e clássico) ao pairar. Para fazer isso, vá para a guia avançada e atualize as opções de transição da seguinte forma:
Duração da transição: 2.000 ms (ou 2 segundos)
Curva de velocidade de transição: Linear (garante que a velocidade da transição não muda na duração)
Resultado final
Agora vamos conferir o resultado final. Não se deixe enganar pela instabilidade do gif abaixo. A transição é realmente tranquila em um site ao vivo.
Adicionando o efeito Ken Burns Hover a várias imagens em uma fileira de três colunas
Se você deseja adicionar o efeito de foco ken burns a imagens em várias colunas, o mesmo processo se aplica. A principal coisa que você precisa fazer é adicionar o snippet css “overflow: hidden” a cada uma das colunas que contém sua imagem.
Usando nosso exemplo anterior acima, altere a estrutura da coluna da linha para um layout de três colunas.
Em seguida, atualize as configurações de linha com os snippets CSS personalizados que ocultarão o estouro de cada coluna.
CSS do elemento principal da coluna 1:
overflow:hidden;
Coluna 2 CSS do elemento principal:
overflow:hidden;
Coluna 3 CSS do elemento principal:
overflow:hidden;
Em seguida, copie o módulo de imagem e cole-o nas colunas 2 e 3.
É isso. Aqui está o resultado final.
Uma vez que este design é mais típico de um layout de grade de galeria, você provavelmente desejará acelerar um pouco a duração da transição para aprimorar a animação flutuante. Você pode fazer isso facilmente usando o recurso multisseleção do Divi. Segure ctrl ou cmd e selecione todos os módulos de imagem. Em seguida, clique no ícone de engrenagem de configurações em uma das imagens para abrir o modal de Configurações do elemento.
Agora, todas as atualizações feitas nas configurações do elemento serão aplicadas a todas as imagens de uma vez. Atualize as opções de transição nas configurações do elemento da seguinte maneira:
Duração da transição: 500ms
Aqui está a nova duração de transição em vigor.
Adicionando o efeito Ken Burns Hover a qualquer módulo com uma imagem de fundo
O efeito de foco Ken Burns também pode ser usado para módulos diferentes do Módulo de imagem. Isso funciona bem se você deseja transformar texto ou ícones junto com a imagem de fundo de um módulo.
Veja como adicionar o efeito Ken Burns a um Módulo de texto.
Primeiro crie uma nova seção regular com uma linha de uma coluna. Em seguida, adicione um módulo de texto à linha.
Atualize o módulo de texto com o seguinte conteúdo:
<h1>We're Engaged!</h1>
Em seguida, adicione uma imagem de plano de fundo ao módulo. Lembre-se de adicionar uma imagem grande o suficiente para deixar espaço para dimensionar e mover a imagem ao pairar.
Em seguida, atualize as opções de design do título da seguinte maneira:
Fonte do cabeçalho: Prata
Tamanho do texto do título: 6vw
Preenchimento personalizado: 10vw superior, 10vw inferior, 3vw esquerdo
Duração da transição: 5000ms
Agora adicione as seguintes configurações de transformação ao módulo de texto.
Eixo x da escala de transformação (pairar): 118%
Eixo y da escala de transformação (pairar): 118%
Transform Translate x-axis (hover): 6%
Transform Translate eixo y (pairar): 6%
Agora, atualize as configurações de linha com o seguinte CSS personalizado para a coluna.
CSS do elemento principal da coluna:
overflow:hidden;
Agora verifique o resultado.
Observe como o texto e a imagem de fundo serão transformados juntos ao passar o mouse.
Combinando o efeito de pairar Ken Burns com efeitos de pairar adicionais
Você também pode combinar o efeito Ken Burns Hover que é aplicado a um módulo com efeitos adicionais para ainda mais criatividade.
Combinando Ken Burns Hover Effect com Filter Effects
Caso você tenha se esquecido deles, os efeitos de filtro são uma ótima maneira de adicionar um estilo criativo aos seus módulos, especialmente ao passar o mouse. E você pode combinar esses efeitos de filtro com o efeito de transformação para algumas transições de foco bastante exclusivas.
Para mostrar a você, vamos usar o exemplo acima que adicionou o efeito ken burns a um módulo de texto. Como o módulo de texto já tem o efeito de foco de transformação no lugar, vamos adicionar um efeito de filtro adicional para mudar a imagem de preto e branco para colorida.
Abra as configurações do módulo de texto e atualize a seguinte opção de filtro:
Saturação (padrão): 0%
Saturação (pairar): 100%
Esta transição definirá o módulo de texto para saturação de 0% por padrão, o que removerá a cor tornando-a preto e branco. Definir de volta para 100% ao passar o mouse adicionará a cor original da imagem de volta.
Aqui está o efeito final do efeito de filtro combinado com o efeito de foco ken burns.
Combinando Ken Burns Hover Effect com Row Transform Effects
Para este exemplo, vou mostrar como combinar o efeito de foco ken burns com um efeito de transformação adicional adicionado à linha. A ideia é usar efeitos de transformação para dimensionar e girar a linha em seu estado padrão e, em seguida, restaurar o design original ao passar o mouse.
NOTA: Esta técnica realmente só funcionará bem para uma linha de uma coluna com um único módulo. Isso ocorre porque o visitante precisará passar o mouse sobre o módulo e a linha simultaneamente. Portanto, o módulo precisa ocupar toda a altura e largura da linha. Módulos ou espaçamentos adicionais interromperão o estado de foco e causarão problemas.
Para fazer isso, vamos ficar com nosso design de módulo de texto atual, que já combina o efeito de foco ken burns com um efeito de filtro adicional. Portanto, este é, na verdade, um efeito de flutuação triplo!
Abra as configurações da linha que contém o módulo de texto. Em seguida, atualize o seguinte:
Preenchimento personalizado: 0 px superior, 0 px inferior, 0 px à esquerda, 0 px à direita
Isso é para garantir que não haja espaçamento adicional entre o módulo de texto e a linha. 
Em seguida, vamos adicionar uma sombra de caixa à linha da seguinte maneira:
Sombra da caixa: veja a imagem
Força do desfoque de sombra da caixa: 36 px
Cor da sombra: rgba (0,0,0,0.17)
Agora adicione os seguintes efeitos de transformação:
Transformar escala do eixo x (padrão): 70%
Transformar escala do eixo x (foco): 100%
Eixo y da escala de transformação (padrão): 70%
Eixo y da escala de transformação (pairar): 100%
Transformar Girar eixo y (padrão): 19deg
Transformar Girar eixo y (pairar): 0deg
Transformar Girar eixo z (padrão): 23 graus
Transformar e girar eixo z (pairar): 0deg
Agora vamos conferir o resultado final.
Adicionando o efeito Ken Burns Hover a uma linha inteira de conteúdo
Caso você esteja se perguntando, o efeito de foco Ken Burns também pode ser usado para dar vida a uma linha inteira de conteúdo ao pairar. Isso não será muito prático para linhas com muito conteúdo, pois poderá confundir ou distrair os visitantes. Mas para coisas como cabeçalhos, essa pode ser uma técnica de design útil. O truque é adicionar o snippet CSS personalizado “overflow: hidden” à seção. Em seguida, você pode adicionar os efeitos de transformação à linha.
Pensamentos finais
Embora o Efeito Ken Burns já exista há algum tempo, você ainda pode considerá-lo útil para criar alguns efeitos de foco bastante exclusivos para suas imagens e módulos no Divi. O truque é saber como usar as opções de transformação Divi, que são surpreendentemente intuitivas. Os exemplos dados neste tutorial pretendem apresentar o conceito e, com sorte, fornecer um pouco de inspiração para seu próprio uso. Quando você pensa em todas as maneiras de combinar opções de transformação com todas as outras opções de estilo disponíveis no Divi, toneladas de ideias começam a surgir.
Estou ansioso para ouvir de você nos comentários.
Saúde!