Como combinar animações e paralaxe em Divi para designs exclusivos
Publicados: 2019-08-07Quer estejamos preparando uma refeição ou desenhando um site, os ingredientes por si só não garantem um prato saboroso ou um belo site. É a forma como combinamos esses elementos que faz toda a diferença. Neste tutorial, vou mostrar a você como combinar animação e paralaxe de imagem de uma forma que você pode nunca ter considerado antes. Se você ainda não sabe, a animação é um recurso Divi embutido que pode ser adicionado a qualquer elemento Divi no carregamento da página. Paralaxe também é uma opção Divi que permite adicionar um movimento exclusivo às imagens de fundo na rolagem.
Hoje, vamos usar as configurações de design integradas do Divi para combinar animações e paralaxe em todos os tipos de formas criativas. A combinação funciona magicamente para criar um belo layout de imagens animadas de paralaxe que parecem incríveis à medida que você rola a página para baixo.
Vamos começar!
Espiada
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 para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará ter o seguinte:
- O Divi Theme instalado e ativo
- Uma nova página criada para construir do zero no front end (construtor visual)
- Imagens a serem usadas para conteúdo simulado. Você pode encontrar as imagens usadas para este tutorial no Life Coach Divi Layout Pack.
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
A ideia básica
A ideia básica por trás deste conceito de design centra-se no uso de paralaxe CSS em imagens de fundo. Devido à forma como a paralaxe CSS funciona, a imagem paralaxe permanecerá fixa e preencherá automaticamente a janela do navegador, independentemente do tamanho do elemento que a está usando. A natureza fixa da imagem permite que você use a mesma imagem paralaxe em vários elementos em Divi e, em seguida, mova esses elementos usando animação. Quando a animação se estabilizar, as imagens de fundo de paralaxe usadas corresponderão e funcionarão conforme o esperado ao rolar a página para baixo.
Parte 1: Criando a Divi Animation and Parallax Design (Versão 1)
Crie uma nova seção com uma linha de duas colunas (1/2 1/2).
Antes de adicionar nossos módulos, vamos fazer alguns ajustes na seção e linha.
Atualizar configurações de seção e linha
Primeiro, abra as configurações da seção e retire o preenchimento padrão da seguinte forma:
Preenchimento: 0 px superior, 0 px inferior
Em seguida, abra as configurações de linha e forneça à linha uma imagem de fundo de paralaxe.
Imagem de fundo: [upload de imagem]
Use o efeito de paralaxe: SIM
Método Parallax: CSS
Aqui, o método de paralaxe deve ser definido como CSS para que o design funcione.
Largura: 100%
Largura máxima: 100%
Preenchimento: 10vw superior, 10vw esquerdo, 10vw direito
Adicione o módulo de texto com fundo paralaxe correspondente
Agora estamos prontos para começar a adicionar nossos módulos de texto ao design. O primeiro módulo de texto é a chave para este design. Aplicando exatamente a mesma imagem de fundo e paralaxe CSS ao módulo de texto, podemos ser criativos com a animação para um efeito completamente único.
Vá em frente e adicione um novo módulo de texto à coluna 1.
Em seguida, atualize as configurações do módulo de texto da seguinte forma:
Conteúdo do corpo:
<p>Hi!<br>I'm Jane...</p> <a href="#">about me</a>
Em seguida, forneça ao módulo de texto a mesma imagem de fundo de paralaxe css que você adicionou à linha.
Imagem de fundo: [upload de imagem]
Use o efeito de paralaxe: SIM
Método Parallax: CSS
Fonte do texto: Fira Sans
Peso da fonte do texto: leve
Cor do texto do texto: #ffffff
Tamanho do texto do texto: 70px
Altura da linha de texto: 1em
Estilo da fonte do link: Sublinhado (U)
Cor do texto do link: #ffffff (padrão), # 881e67 (passar o mouse)
Tamanho do texto do link: 30px
Espaçamento entre letras de link: 2px
Preenchimento: 20% superior, 20% inferior, 10% esquerdo, 10% direito
Largura da borda: 20px
Cor da borda: #ffffff
Em seguida, adicione a seguinte animação ao módulo de texto:
Estilo de animação: slide
Direção da animação: direita
Duração da animação: 1500ms
Intensidade de animação: 80%
Opacidade inicial da animação: 20%
Vamos verificar o efeito até agora ...
Observe como a imagem de plano de fundo do módulo de texto animado fica no local correspondente do plano de fundo da linha. Isso ocorre porque ambos compartilham a mesma imagem de fundo com o efeito de paralaxe css.
Adicionando o segundo módulo de texto com uma imagem de fundo de paralaxe verdadeira
Neste ponto, estamos prontos para adicionar nosso próximo módulo de texto. Este próximo terá uma imagem de fundo diferente usando o verdadeiro efeito de paralaxe. Também daremos algumas animações.
Adicione um novo módulo de texto à coluna 2.
Em seguida, atualize o conteúdo do corpo com a palavra “meu blog”.
Em seguida, adicione uma imagem de fundo com o método de paralaxe verdadeiro.
Imagem de fundo: [upload de imagem]
Use o efeito de paralaxe: SIM
Método Parallax: True Parallax
Fonte do texto: Fira Mono
Estilo da fonte do texto: TT
Alinhamento do Texto do Texto: centro
Cor do texto do texto: #ffffff
Espaçamento entre letras do texto: 10px
Largura: 320px
Largura máxima: 320px
Alinhamento do Módulo: Centro
Margem: (desktop): -5vw superior, 4vw inferior
Margem (tablet e telefone): 3vw superior
Preenchimento: 70px superior, 70px inferior
Largura da borda: 20px
Cor da borda: #ffffff
Estilo de animação: slide
Direção da animação: para baixo
Atraso de animação: 200ms
Criando o terceiro módulo de texto com uma nova imagem de fundo paralaxe
Para criar o terceiro módulo de texto, duplique o módulo de texto que você acabou de criar na coluna 2.
Então, vamos manter a imagem de fundo a mesma, mas vamos atualizar o efeito de paralaxe com o método de paralaxe CSS.
Largura: 240px
Largura máxima: 240px
Alinhamento do Módulo: esquerda
Margem: 0px inferior
Preenchimento: 170px superior, 170px inferior, 95px à esquerda, 95px à direita
A largura personalizada e o preenchimento direito e esquerdo são usados para criar a exibição de texto vertical que vai bem com o design de módulo mais longo.
Em seguida, atualize a direção da animação para cima em vez de para baixo.
Direção da animação: PARA CIMA
Resultado final
Agora vamos conferir o resultado final.
Parte 2: Criando a Animação e Design Parallax (versão 2)
O próximo projeto adicionará uma animação única ao carregar a imagem de fundo de paralaxe para a linha após a animação inicial dos módulos. Para fazer isso, precisaremos usar uma linha separada estritamente para a imagem de fundo de paralaxe CSS que se moverá para trás do conteúdo. E como teremos o fundo da nossa seção exposto inicialmente, podemos adicionar uma cor de fundo personalizada para o nosso conteúdo antes da animação da linha.
Veja como fazer.
Primeiro, implante o modo de visualização wireframe. Em seguida, duplique a linha que contém seus módulos de texto. Agora você terá duas linhas idênticas. Em seguida, exclua os módulos de texto dentro da linha superior. Tudo o que realmente queríamos fazer era começar na frente no design da nossa linha superior.
Em seguida, atualize as configurações da linha superior da seguinte maneira:
Altura: 900 px (desktop), 2.000 px (tablet e telefone)
Preenchimento: 0 px superior, 0 px inferior
Estilo de animação: slide
Direção da animação: direita
Duração da animação: 1250ms
Atraso de animação: 1800ms
Estamos dando à linha uma altura definida porque a linha vazia não terá nenhuma altura por padrão. Portanto, você precisa se certificar de que a altura da linha é suficiente para cobrir o conteúdo da segunda linha com o conteúdo. Também fornecemos à linha uma animação com um atraso para que ela deslize para trás do conteúdo depois que os módulos de texto aparecerem.
Sobrepondo as duas linhas
Agora tudo o que temos a fazer é trazer a linha inferior para cima usando a margem negativa para que ela se sobreponha à linha superior com nossa animação de fundo.
Abra as configurações da linha inferior e atualize a margem da seguinte forma:
Margem: -900px superior (desktop), -2000px (tablet e telefone)
Em seguida, retire a imagem de plano de fundo com o método css parallax para a linha, pois usaremos a imagem de plano de fundo da linha superior.
Aqui está o design até agora. Observe a animação de fundo atrasada na primeira linha e como o fundo de paralaxe para o módulo de texto na coluna 1 combina perfeitamente.
Adicionando uma Cor de Fundo da Seção
Para dar aos módulos de texto uma cor de fundo inicial antes da animação da linha, você pode dar uma cor de fundo à seção.
Abra as configurações da seção e adicione o seguinte:
Cor do gradiente de fundo à esquerda: rgba (136,30,103,0,61)
Cor certa do gradiente de fundo: # 881e67
Tipo de gradiente: radial
Resultado final
Agora vamos conferir o resultado final.
Modo de mistura opcional e combinação de animação
Você também pode ser ainda mais criativo adicionando um modo de mesclagem à segunda linha e adicionando uma animação de zoom que funcionará em conjunto com as animações do módulo.
Modo de mistura: luminosidade
Estilo de Animação: Zoom
Aqui está o resultado final.
E é assim que fica no celular.
Pensamentos finais
Espero que você tenha aprendido algumas coisas ao longo do caminho, à medida que exploramos algumas maneiras exclusivas de combinar imagens de animação e paralaxe. Os resultados são definitivamente únicos e tenho certeza de que você pode facilmente ajustar essa configuração para construir inúmeras outras combinações que ficarão impressionantes em seu próximo projeto.
Estou ansioso para ouvir de você nos comentários.
Saúde!