Divi Scroll Effects – Atualização Divi 4.3

Divi Scroll Effects – Atualização Divi 4.3

Por Maicon Ramos

10/02/2020
Divi Scroll Effects – Atualização Divi 4.3

Saiu a nova versão 4.3 do tema Divi da ElegantThemes, um dos maiores (mais caros 🤑) tema para WordPress. Eu particularmente fiquei bem empolgado com essa atualização, pois trouxe um grande recurso chamado Divi Scroll Effects, agora permite fazer sites bem “vivos” e não seguindo o básico de animações de entrada apenas.

O que é Divi Scroll Effects?

Scroll Effects  traduzido (efeito de rolagem) permite criar animações e transições avançadas que reagem enquanto os visitantes rolam (scroll) a página para cima ou para baixo.

O comportamento dessa animação é um pouco diferente das animações tradicionais de entrada, pois estão diretamente relacionados ao comportamento da rolagem do scroll do mouse ou da tela no celular, e SIM, funciona em qualquer tipo de tela.

Qualquer elemento (módulo do divi) pode ser animado usando combinações de escala, rotação, movimento horizontal e vertical, opacidade e efeitos de desfoque, totalmente personalizado tanto na questão de velocidade, duração ou ponto de inicio ou fim da rolagem, o divi scroll effects permitem infinidades de animações que vão mudar a experiência dos seus visitantes. 

Efeitos do Scroll Effects

A parte mais surpreendente do Divi Scroll Effects é como eles são fáceis de usar, o Divi criou um interface em cada modulo dedicado a esse tipo de efeito, confira alguns exemplos:

Vertical

O efeito de movimento vertical permite que qualquer elemento se mova para cima e para baixo na página com base na velocidade e na direção em que o visitante rola. O resultado é um efeito de paralaxe! Agora qualquer coisa pode ser usada para criar efeitos de paralaxe com o Divi. Você pode até combinar movimento vertical com imagens de fundo de paralaxe para criar alguns designs realmente impressionantes.

Horizontal

Efeito de movimento horizontal é exatamente como o efeito de movimento vertical, exceto que permite que os elementos sejam movidos para a esquerda e para a direita na tela com base na direção e velocidade que um visitante rola. Você pode até combinar movimentos verticais e horizontais, oferecendo controle total sobre o movimento de qualquer elemento!

Blur

O efeito de desfoque (blur) trará elementos para dentro e fora de foco, com base na velocidade e na direção em que o visitante rola. Como o Divi Scroll Effects permite controlar o valor inicial, médio e final do desfoque, você pode colocar os elementos em foco exatamente quando estão diante dos olhos do visitante. É uma ótima maneira de chamar a atenção para informações importantes.

Fade

O efeito fade com elementos fade dentro e fora com base na velocidade e na direção que um visitante rola. Você pode desvanecer elementos, desbotá-los ou ambos. Combinar desbotamento, desfoque e escala pode criar algumas animações realmente sofisticadas que adicionam extra aos seus projetos.Tocador de vídeo.

Scale

O efeito de scale (escala) aumentará ou diminuirá o tamanho de qualquer elemento com base na velocidade e na direção em que o visitante rola. Se quiser chamar a atenção para um elemento específico, como uma frase, é possível definir o efeito de escala para aumentar o tamanho do elemento à medida que ele se aproxima do centro da janela de exibição. Claro que existem muitas outras possibilidades também!

Rotation

O efeito de rotação com gira um elemento em qualquer direção, com base na velocidade e na direção em que um visitante rola. A rotação sutil pode realmente dar vida às cenas. Apenas um pouco de rotação quando combinado com o movimento horizontal pode parecer ótimo! Ou deixe os elementos girarem e girarem.

Como utilizar Divi Scroll Effects?

Para adicionar um efeito de rolagem, basta navegar para o novo grupo de opções Scroll Effects na guia Avançado de qualquer módulo, linha, coluna ou seção. Vários efeitos podem ser ativados de uma só vez e os efeitos serão combinados em uma animação única. Confira no vídeo abaixo um exemplo:

Ter o recurso do scroll effects incorporado no Divi e de uma maneira simples de implementar, adiciona uma enorme quantidade de liberdade criativa.

Já tem o tema Divi? Clique aqui e veja um mundo de oportunidades.

Comentários

0 comentários
Enviar um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *