Como projetar uma máscara de texto com animação de fundo em Scroll in Divi
Publicados: 2020-08-16Os designs de máscara de texto são surpreendentemente fáceis de criar usando as opções integradas do Divi. O construtor tem todos os ingredientes para criar um efeito de máscara de texto, incluindo opções para estilos de texto, planos de fundo e modos de mesclagem. Na verdade, já criamos designs de máscara de texto usando modos de mesclagem antes. Mas, com os efeitos de rolagem, podemos levar os designs de máscara de texto a um novo nível.
Neste tutorial, vamos mostrar como criar uma máscara de texto com animação de fundo em rolagem no Divi. O design é único e o efeito de rolagem realmente o faz ganhar vida.
Vamos começar!
Espiada
Aqui está uma rápida olhada nos designs que construiremos neste tutorial.
Baixe o Layout GRATUITAMENTE
Para colocar suas mãos nos designs deste tutorial, 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.
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.
Projetando uma máscara de texto com animação de fundo em Divi
Adicionar linha
Para começar, adicione uma linha de duas colunas à seção regular padrão.
Atualizar as configurações da seção
Antes de adicionar qualquer módulo, abra as configurações da seção e atualize a cor de fundo e o preenchimento da seguinte forma:
- Cor de fundo: # 750046
- Preenchimento: 0 px superior, 0 px inferior
Atualizar configurações de linha
Depois de concluir as configurações da seção, abra as configurações da linha e atualize as seguintes configurações de design:
- Largura da calha: 1
- Largura: 100%
- Largura máxima: 100%
- Preenchimento: 0 px superior, 0 px inferior
É importante definir a largura da medianiz como 1 e a largura como 100% porque usaremos a unidade de comprimento vw para o nosso texto ao criar o design da máscara de texto. Como a unidade de comprimento vw é baseada na largura do navegador, é importante que os contêineres pai (seção e linha) tenham a mesma largura do navegador, que é 100%.
Atualizar configurações da coluna 1
Nossa máscara de texto e imagem serão adicionadas à coluna da esquerda (coluna 1). Precisamos adicionar uma cor de fundo à coluna para que os modos de mesclagem que adicionamos à imagem e ao texto mesclem / revelem essa cor. Também precisamos definir o estouro como oculto para que, ao animar a imagem na rolagem, não vejamos a imagem transbordando fora da coluna.
Abra as configurações da coluna 1 e atualize o seguinte:
- Cor de fundo: # 750046
- Excesso horizontal: oculto
- Estouro vertical: oculto
Criação da máscara de texto
Para criar a máscara de texto, adicione um módulo de texto à coluna 1.
O Conteúdo do Texto
Em seguida, adicione a palavra “divi” ao conteúdo do corpo. Estamos usando uma palavra de 4 letras para que ela seja empilhada uniformemente para um design quadrado.
Fundo do Texto
Em seguida, adicione uma cor de fundo branca ao módulo de texto.
- Cor de fundo: #ffffff
Design de Texto
Em seguida, na guia de design, atualize o seguinte:
- Fonte do texto: Rubik Mono One
- Estilo da fonte do texto: TT
- Cor do texto do texto: # 000000
- Tamanho do texto do texto: 25vw (desktop), 50vw (tablet e telefone)
- Altura da linha de texto: 0,8em
- Alinhamento de texto: centro
- Preenchimento: 8vw superior, 8vw inferior
Modo de mesclagem de texto
Para completar o design da máscara de texto, adicione o seguinte modo de mesclagem:
- Modo de mistura: tela
Até agora, os quatro ingredientes principais para este efeito de máscara de texto são os seguintes:
- Fundo da coluna
- Fundo de texto branco
- Texto Preto
- Modo de mesclagem de tela no módulo de texto
O modo de mesclagem de tela multiplica as camadas e produz uma versão mais leve da mistura. Com o modo de mesclagem de tela, o texto preto se torna completamente transparente, revelando o que está por trás dele, que neste caso é uma cor de fundo.
Adicionar imagem de fundo
Para adicionar a imagem de plano de fundo à máscara de texto, crie um novo módulo de imagem e carregue uma imagem que tenha aproximadamente 1700 por 2500 pixels. O tamanho da imagem é importante para que ela cubra a altura e a largura da coluna.
Design de imagem
Em seguida, atualize as seguintes configurações de design:
- Forçar largura total: SIM
- Modo de mistura: tela
Este modo de mesclagem não é necessário para o efeito de máscara de texto, mas mescla a imagem com a cor de fundo para que corresponda melhor ao design.
Posição da imagem
Em seguida, dê à imagem uma posição absoluta e atualize o Índice Z para que fique atrás do módulo de texto.
- Posição: Absoluta
- Índice Z: -1
Efeitos de rolagem de imagem
Assim que o design da imagem estiver pronto, vá para a guia avançada e atualize as opções de efeito de rolagem da seguinte forma:
Na guia Movimento vertical,
- Compensação inicial: -1 (a 0%)
- Deslocamento médio: 0 (em 50%)
- Compensação final: 1 (em 100%)
Na guia Movimento horizontal,
- Compensação inicial: -0,5 (a 0%)
- Deslocamento médio: 0 (em 50%)
- Compensação final: 0,5 (em 100%)
Na guia Escala para cima e para baixo,
- Escala inicial: 110% (a 0%)
- Escala média: 125% (em 50%)
- Escala final: 140% (em 100%)
Resultado
Você pode adicionar alguma margem superior e inferior à seção para que possa verificar o resultado até agora.
Criando o Texto Fictício
Na coluna certa, adicione um novo módulo de texto.
Atualize o conteúdo do corpo com o seguinte:
<h2>Lorem Ipsum Dolor Sit Amet</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
Em seguida, atualize as configurações de design de texto do seguinte anúncio:
- Cor do Texto: Claro
- Fonte do título 2: Rubik
- Tamanho do texto do título 2: 4vw
- Preenchimento (desktop): 16vw superior, 5vw esquerdo, 5vw direito
- Preenchimento (tablet): 16vw superior, 16vw inferior, 5vw esquerdo, 5vw direito
Resultado
Ajustes opcionais
Fundo Preto / Texto Branco
Se você quiser usar um fundo preto para a máscara de texto, tudo que você precisa fazer é atualizar as três opções principais que compõem o efeito de mascaramento de texto.
Abra as configurações do módulo de texto e altere o seguinte:
- Cor de fundo: # 000000 (preto)
- Cor do texto do texto: #ffffff (branco)
- Modo de mistura: Multiplicar
E aqui está o resultado…
Rotação de imagem PNG
E você pode alterar a imagem animada para uma que tenha um fundo transparente (um PNG) para outro efeito legal. Aqui está um exemplo de uma imagem PNG que usei com um efeito de rolagem giratório adicionado.
Resultados finais
Aqui está outra visão de todos os designs.
Pensamentos finais
Esperançosamente, esses designs de máscara de texto com animação de fundo em rolagem darão a vantagem criativa de que seu site precisa. Depois de conhecer os ingredientes básicos para criar o efeito de mascaramento de texto, você não terá problemas para criar inúmeras versões desse design para atender às suas necessidades.
Estou ansioso para ouvir de você nos comentários.
Saúde!