Explorando como criar e animar formas CSS no Divi

Criar formas usando CSS em web design não é um conceito novo de forma alguma. Na verdade, o método clássico de criação de formas CSS foi amplamente ofuscado por outras soluções gráficas HTML, como Canvas e SVG. No entanto, as formas CSS (pelo menos as básicas) são muito mais fáceis de criar e ainda podem desempenhar um papel significativo no design da web. Além disso, quando você adiciona animação de rolagem a essas formas, um novo elemento de design pode surgir.

Neste tutorial, vamos explorar como criar e animar formas CSS no Divi. Depois de entender o conceito básico de como criar algumas formas usando as opções integradas do Divi, você pode animar essas formas para criar designs de animação de rolagem exclusivos para o seu site. Você ficará surpreso com o quanto você pode fazer!

Vamos começar.

Espiada

Aqui está uma rápida olhada no design 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.

Baixe os arquivos

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.

DOWNLOAD

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:

1. Se ainda não o fez, instale e ative o Divi Theme.
2. Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
3. Escolha a opção “Build From Scratch”.

Depois disso, você terá uma tela em branco para começar a desenhar no Divi.

Explorando como criar formas CSS com animação em Divi

A Estrutura de Linhas e Colunas

Primeiro, adicione uma linha de coluna de um terço e dois terços à seção.

Antes de qualquer coisa, abra as configurações de linha e atualize o seguinte:

• Largura da calha: 1
• Equalize a altura das colunas: SIM
• Largura: 95%
• Largura máxima: 900px

NOTA: Essas configurações são cruciais para a configuração do nosso design. Por exemplo, a estrutura da coluna de um terço e dois terços combinada com uma linha que tem uma largura máxima de 900px sem quaisquer margens (largura da medianiz 1), vamos saber que a coluna esquerda terá exatamente 300px de largura. Além disso, se eu mantiver meu design contido nesta coluna de largura de 300 px, também posso ter certeza de que ficará bem em tablets e dispositivos móveis.

Adicionando o espaçador do módulo divisor

Em seguida, adicione um divisor para criar o espaçamento necessário para a coluna que conterá nossas formas CSS.

Neste ponto, você deve abrir o modal de visualização de camadas para gerenciar as camadas / módulos seguintes, que podem ser encontrados no menu de configurações do Divi Builder.

Abra as configurações do divisor e atualize a altura do divisor da seguinte forma:

• Mostrar divisor: NÃO
• Altura: 150px

Uma vez que nossos Shapes CSS serão posicionados de forma absoluta, o espaçamento real da área da coluna pode ser facilmente ajustado ajustando a altura do divisor. Pessoalmente, acho isso mais fácil do que tentar manipular a altura ou o espaçamento da coluna. Além disso, oferece a vantagem adicional de estilizar a divisória como um elemento de design (ou forma) adicional. Por enquanto, você pode pensar nisso como uma tela para seus futuros designs de formas CSS.

Criando a primeira forma CSS usando opções de borda

Para criar nosso formato CSS, vamos usar um módulo divisor. Tecnicamente, estamos usando apenas as bordas que circundam o módulo, não a área do módulo. (Portanto, você pode usar outros módulos, como módulos de texto ou módulos de código também).

Para criar a forma CSS, duplique o módulo divisor já criado anteriormente.

Em seguida, retire a altura e a largura do módulo divisor, definindo cada um para 0 px da seguinte forma:

• Largura: 0px
• Altura: 0 px

Para a primeira forma, vamos criar um triângulo retângulo que aponta para o canto superior direito. Para fazer isso, atualize os estilos de borda divisória da seguinte forma:

• Cor da borda: rgba (245,44,143,0,5)
• Largura da borda superior: 150 px
• Largura da borda esquerda: 150 px
• Cor da borda esquerda: transparente

Nota: Dar à cor da borda uma semitransparência ajudará a revelar as formas sobrepostas para um elemento de design adicional.

Também é uma boa ideia rotular esse novo divisor como “formato 1” para facilitar a identificação mais tarde.

Como vamos adicionar animação de rolagem às formas adicionais que criaremos, é importante dar a essa forma (e às formas adicionais nesta coluna) uma posição absoluta para que sejam empilhadas umas sobre as outras, portanto, tenham o mesmo ponto de partida para animação.

Na guia avançada, altere a posição para absoluta e mantenha o local da posição padrão definido para o canto superior direito:

• Posição: Absoluta
• Localização da posição: Superior direito (padrão)

NOTA: É importante manter o local da posição no canto superior direito porque quaisquer outros locais que adicionam uma localização centralizada (como centro superior ou centralizado) entrarão em conflito com as opções de transformação que adicionaremos aos Shapes CSS mais tarde.

Parabéns pela criação de um triângulo CSS! Embora isso não seja tão impressionante por si só, fica ainda melhor. Podemos duplicar esse triângulo para criar todos os tipos de novos designs, uma vez que os movamos com animação.

Criação da forma 2 com animação de rolagem

Para criar a próxima forma (ou triângulo, neste caso), duplique o módulo divisor anterior (forma 1) para adicionar um triângulo superior direito idêntico que fica diretamente sobre a forma de triângulo anterior.

Em seguida, identifique-o como “forma 2”.

Abra as configurações do divisor de "forma 2" e adicione o seguinte efeito de transformação rotativa:

• Efeitos de transformação de rolagem: giratório
• Habilitar rotação: SIM
• Rotação inicial: 0 ° (a 30%)
• Rotação média: 45 ° (a 45%)
• Rotação final: 90 ° (a 60%)

Criação da forma 3 com animação de rolagem

Duplique o módulo divisor “forma 2” e rotule a duplicata como “forma 3”.

Em seguida, atualize as configurações de rotação de transformação da seguinte maneira:

• Rotação média: 90 °
• Rotação final: 180 °

Para criar a (quarta) forma final, duplique o módulo divisor da forma 3 e rotule-o de “forma 4”.

Em seguida, atualize as configurações de rotação de transformação da seguinte maneira:

• Rotação média: 180 °
• Rotação final: 270 °

Neste ponto, você deve ver uma forma quadrada criada pelos triângulos sobrepostos e agora girados.

Testando a animação de rolagem

Para testar a animação de rolagem dessas formas, vamos adicionar algumas margens temporárias na parte superior e inferior da seção. Abra as configurações da seção e atualize o seguinte:

• Margem: 80 Vh superior, 80 Vh inferior

Aqui está como deve ser a aparência à medida que você rola a página para cima e para baixo.

Antes de explorarmos novas maneiras de personalizar essas animações de forma, vamos complementar nosso design com um título simulado na coluna certa. Sinta-se à vontade para pular esta etapa se quiser continuar com os designs de forma.

Adicionando um título de simulação à coluna direita (opcional)

Para ajudar a ter uma ideia de como você pode usar esses designs de forma animada em uma página, achei que seria uma boa ideia adicionar um título fictício à coluna certa. Este seria um ótimo exemplo de como complementar os títulos das seções da sua página com um design de animação impressionante usando formas CSS.

CSS personalizado da coluna

Antes de adicionarmos o título, podemos ter certeza de que o texto está centralizado verticalmente na coluna usando a propriedade display flex. Abra as configurações da coluna 2 e adicione o seguinte CSS personalizado ao elemento principal:

display:flex;
flex-direction:column;
align-items:center;

Depois que o CSS da coluna estiver no lugar, adicione um novo módulo de texto à coluna 2.

Em seguida, abra as configurações de texto e atualize o conteúdo do corpo com um título h2 da seguinte forma:

<h2>elegant design</h2>

Na guia de design, atualize o seguinte:

• Fonte do título 2: Poppins
• Alinhamento de texto do título 2: padrão (desktop), centro (tablet e telefone)
• Tamanho do texto do título 2: 55 px (desktop), 45 px (tablet), 35 px (telefone)
• Largura: 100%

Enquanto estamos nisso, vá em frente e adicione o seguinte efeito de “movimento horizontal” de transformação de rolagem ao texto da seguinte maneira:

• Efeitos de transformação de rolagem: movimento horizontal
• Habilitar movimento horizontal: SIM
• Compensação inicial: 2 (em 20%)
• Deslocamento médio: 1 (em 35%)
• Compensação final: -0,6

Em seguida, abra as guias responsivas e atualize o deslocamento final da seguinte forma:

• Ending Offset (tablet e telefone): 0

Explorar animações em forma de triângulo superior direito

Continuando de onde paramos antes de adicionar o texto do título, agora podemos explorar as possibilidades de design / animação para a forma atual do Triângulo Superior Direito.

Uma maneira fácil de fazer isso é usar multiselect para selecionar todas as quatro formas CSS (criadas com módulos divisores).

Em seguida, abra as configurações de uma das formas para exibir o modal de configurações de elemento que atualizará o design de todos os quatro módulos de uma vez para que você possa ver os resultados visualmente.

Em seguida, selecione a guia de projeto e abra a guia de origem da transformação. Posicione o modal de visualização de camadas e o modal de configurações de elemento à esquerda para que você possa ver as alterações visualmente no Divi Builder.

Explorando as animações de design de formas CSS do triângulo ascendente

Agora que a configuração está pronta, você pode explorar a criação de novas formas e ver como elas ficam com as animações de rolagem atuais no lugar.

Para este próximo exemplo, vamos criar uma forma CSS de Triângulo Ascendente (tecnicamente um Triângulo Isósceles).

Para fazer isso, certifique-se de selecionar todas as formas e atualizar os estilos de borda de cada uma da seguinte maneira:

• Largura da borda direita: 100 px
• Cor da borda direita: transparente
• Largura da borda inferior: 100 px
• Cor da borda inferior: rgba (245,44,143,0,5)
• Largura da borda esquerda: 100px
• Cor da borda esquerda: transparente

Atualize Transform Origin para explorar novos designs de animação de rolagem

Agora que temos uma forma / triângulo ligeiramente novo no lugar, a animação de rotação resultante também será diferente. Para explorar as diferentes possibilidades de design de animação de rolagem, certifique-se de manter todas as quatro formas selecionando usando multisseleção e, em seguida, ajustar a origem da transformação para visualizar os resultados.

Explorando as animações do Teardrop CSS Shape Design

Você já deve estar entendendo como esse processo funciona. Para este próximo projeto, vamos criar uma forma de lágrima que pode ser feita criando um triângulo inferior direito com um raio de borda.

Para fazer isso, certifique-se de selecionar todas as formas e atualizar os estilos de borda de cada uma da seguinte maneira:

• Cantos arredondados: 0 px superior direito, 50% superior direito, 50% inferior direito, 50% inferior esquerdo
• Largura da borda inferior: 150 px
• Cor da borda inferior: rgba (245,44,143,0,5)
• Largura da borda esquerda: 150 px
• Cor da borda esquerda: transparente

Em seguida, ajuste o valor da origem da transformação para explorar os designs de animação de rolagem para a lágrima.

Explorando o Setor (ou Pizza Slice) Animações de Design de Forma CSS

Você já deve estar entendendo como esse processo funciona. Para este próximo projeto, vamos criar um formato de setor que pode ser feito criando um triângulo inferior direito com um raio de borda.

Para fazer isso, certifique-se de selecionar todas as formas e atualizar os estilos de borda de cada uma da seguinte maneira:

• Cantos arredondados: 0 px superior direito, 0 px superior direito, 50% inferior direito, 50% inferior esquerdo
• Largura da borda direita: 75 px
• Cor da borda direita: transparente
• Largura da borda inferior: 75 px
• Cor da borda inferior: rgba (245,44,143,0,5)
• Largura da borda esquerda: 75 px
• Cor da borda esquerda: transparente

Em seguida, ajuste a origem da transformação para explorar os diferentes designs de animação de rolagem.

Explorando as animações de design de formas CSS do trapézio

Para nosso design final de forma CSS, vamos criar uma forma trapezoidal CSS que pode adicionar alguma largura adicional a um triângulo para cima (ou isósceles).

Para fazer isso, certifique-se de selecionar todas as formas e atualizar os estilos de borda de cada uma da seguinte maneira:

• Cantos arredondados: 0 px
• Largura da borda direita: 100 px
• Cor da borda direita: transparente
• Largura da borda inferior: 100 px
• Cor da borda inferior: rgba (245,44,143,0,5)
• Largura da borda esquerda: 100px
• Cor da borda esquerda: transparente

Em seguida, atualize a largura das formas / módulos da seguinte forma:

• Largura: 100px

Com a forma trapezoidal no lugar, você pode mais uma vez usar atualizar a origem da transformação para cada um para explorar os novos designs de animação de rolagem.

Resultados finais

Vamos dar uma olhada final em alguns dos meus designs favoritos que são possíveis usando este tutorial.

Pensamentos finais

Explorar como criar e animar formas CSS no Divi pode ser uma ótima maneira de fazer fluir a criatividade conforme você amplia sua perspectiva do poder dos recursos de design integrados do Divi. O truque é entender como usar bordas para criar formas diferentes. Em seguida, você pode adicionar animação de rolagem a essas formas. Mas não se esqueça do poder da origem de transformação, que muda a maneira como essas animações posicionam cada forma. Esta é, obviamente, a ponta do iceberg quando você pensa em todas as diferentes formas e animações que você pode combinar para criar infinitos designs criativos para seu site.

Esperançosamente, isto lhe dará algumas idéias sobre como adicionar a animação de formato CSS perfeita ao seu próprio site.

Estou ansioso para ouvir de você nos comentários.

Saúde!