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.
Título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
