{"id":3627,"date":"2024-10-21T22:08:34","date_gmt":"2024-10-21T14:08:34","guid":{"rendered":"https:\/\/www.openbyt.com\/?p=3627"},"modified":"2024-10-21T22:11:37","modified_gmt":"2024-10-21T14:11:37","slug":"how-to-create-stunning-scroll-triggered-animations-in-elementor-pro-a-step-by-step-guide","status":"publish","type":"post","link":"https:\/\/www.openbyt.com\/pt\/como-criar-animacoes-de-deslocacao-impressionantes-em-elementor-pro-um-guia-passo-a-passo","title":{"rendered":"Como criar anima\u00e7\u00f5es de rolagem impressionantes no Elementor Pro: Um guia passo a passo"},"content":{"rendered":"

As anima\u00e7\u00f5es acionadas pelo scroll podem ser um fator de mudan\u00e7a para o seu s\u00edtio Web, melhorando a sua interatividade e tornando o conte\u00fado mais envolvente. \u00c0 medida que os utilizadores se deslocam para baixo, as anima\u00e7\u00f5es d\u00e3o profundidade \u00e0 sua p\u00e1gina, chamando a aten\u00e7\u00e3o e tornando a experi\u00eancia de navega\u00e7\u00e3o mais envolvente. Se estiver a utilizar Elementor Pro<\/mark><\/strong>Se quiser adicionar estas anima\u00e7\u00f5es, \u00e9 muito simples. Aqui est\u00e1 um guia para o ajudar a come\u00e7ar e a tirar o m\u00e1ximo partido destes efeitos, incluindo anima\u00e7\u00f5es de paralaxe para um design com mais camadas.<\/p>

\"\"<\/figure><\/div>

Porqu\u00ea utilizar anima\u00e7\u00f5es acionadas pelo scroll?<\/h3>

Estas anima\u00e7\u00f5es t\u00eam algumas vantagens significativas:<\/p>

  • Realce os elementos importantes<\/strong>: As anima\u00e7\u00f5es chamam naturalmente a aten\u00e7\u00e3o, ajudando-o a real\u00e7ar sec\u00e7\u00f5es cr\u00edticas do seu site.<\/li>\n\n
  • Melhore o envolvimento do utilizador<\/strong>: Como o conte\u00fado se revela gradualmente, \u00e9 mais prov\u00e1vel que os utilizadores se mantenham envolvidos.<\/li>\n\n
  • Conte uma hist\u00f3ria<\/strong>: A forma como o conte\u00fado se desenrola pode guiar o utilizador atrav\u00e9s da sua p\u00e1gina, passo a passo, mantendo o seu interesse.<\/li><\/ul>

    Com Elementor Pro<\/strong>\u00e9 f\u00e1cil implementar estas anima\u00e7\u00f5es e fazer com que o seu s\u00edtio Web seja vida<\/strong>.<\/p>

    Passo 1: Configurar a estrutura da sua p\u00e1gina no Elementor Pro<\/h3>

    Antes de come\u00e7ar a animar, precisa de definir a estrutura b\u00e1sica da sua p\u00e1gina. Por exemplo, digamos que est\u00e1 a criar uma sec\u00e7\u00e3o de her\u00f3i com um t\u00edtulo, uma imagem e um texto de apoio.<\/p>

    Criar uma nova sec\u00e7\u00e3o<\/strong>:<\/p>

    1. Aberto Elementor<\/strong>adicione uma nova p\u00e1gina e utilize o Elementor Edit para aceder \u00e0 p\u00e1gina de edi\u00e7\u00e3o.<\/li><\/ol>
      \"\"<\/figure><\/div>
      1. Clique no bot\u00e3o \"Adicionar novo contentor<\/strong>\" na p\u00e1gina.<\/li><\/ol>
        \"\"<\/figure><\/div>
        1. Selecione um disposi\u00e7\u00e3o em duas colunas<\/strong> com o lado esquerdo para adicionar conte\u00fado textual (como um t\u00edtulo<\/strong> e texto de apoio<\/strong>) e o lado direito para adicionar uma imagem para melhorar o seu aspeto visual.<\/li><\/ol>
          \"\"<\/figure><\/div>

          Adicione conte\u00fado:<\/h4>
          1. Coluna da esquerda<\/strong>: Adicionar um widget de t\u00edtulo<\/strong> e um widget de texto<\/strong> para visualizar as informa\u00e7\u00f5es principais da p\u00e1gina.<\/li><\/ol>
            \"\"<\/figure><\/div>
            1. Coluna da direita<\/strong>: adicione um widget de imagem<\/strong> para colocar uma imagem visual relevante para acrescentar atratividade visual \u00e0 p\u00e1gina.<\/li><\/ol>
              \"\"<\/figure><\/div>

              Cada bloco pode ser modificado para completar os elementos pretendidos. Esta configura\u00e7\u00e3o simples prepara o terreno para um design eficaz antes de come\u00e7ar a adicionar anima\u00e7\u00e3o.<\/p>

              Passo 2: Adicionar anima\u00e7\u00e3o de desloca\u00e7\u00e3o ao seu t\u00edtulo<\/h3>
              \"\"<\/figure><\/div>

              Vamos animar o t\u00edtulo para que deslize suavemente a partir da esquerda \u00e0 medida que o utilizador se desloca para baixo.<\/p>

              Selecionar o widget de t\u00edtulo<\/strong>:<\/p>

              • Clique no widget T\u00edtulo para abrir as suas defini\u00e7\u00f5es.<\/li><\/ul>

                Ativar efeitos de deslocamento<\/strong>:<\/p>

                • Aceda ao separador Avan\u00e7adas.<\/li><\/ul>
                  \"\"<\/figure>
                  • Sob Efeitos de movimento<\/strong>, ligue Efeitos de desloca\u00e7\u00e3o<\/strong>.<\/li><\/ul>
                    \"\"<\/figure><\/div>

                    Definir a desloca\u00e7\u00e3o horizontal<\/strong>:<\/p>

                    • Active o desloca\u00e7\u00e3o horizontal<\/em><\/strong> efeito.<\/li><\/ul>
                      \"\"<\/figure><\/div>
                      • Defina a dire\u00e7\u00e3o para \"da esquerda para a direita.<\/strong>“<\/li><\/ul>
                        \"\"<\/figure><\/div>
                        • Ajuste a velocidade para cerca de 4<\/strong> para um efeito suave e vis\u00edvel.<\/li><\/ul>

                          Pr\u00e9-visualiza\u00e7\u00e3o<\/strong>:<\/p>

                          Quando percorrer a p\u00e1gina, ver\u00e1 o t\u00edtulo deslizar da esquerda para a direita. Pode ajustar a velocidade e a dire\u00e7\u00e3o at\u00e9 obter o efeito pretendido.<\/p>

                          Passo 3: Adicionar um efeito de paralaxe \u00e0 imagem<\/h3>

                          Para tornar a sua p\u00e1gina mais din\u00e2mica, vamos agora adicionar um efeito de paralaxe \u00e0 imagem. A imagem move-se a uma velocidade diferente da do texto, criando um efeito de camadas e 3D.<\/p>

                          Selecionar o widget de imagem<\/strong>:<\/p>

                          • Clique no widget Imagem e abra as suas defini\u00e7\u00f5es.<\/li><\/ul>
                            \"\"<\/figure><\/div>

                            Ativar efeitos de deslocamento<\/strong>:<\/p>

                            • No separador Avan\u00e7adas, active Efeitos de desloca\u00e7\u00e3o<\/strong>.<\/li><\/ul>
                              \"\"<\/figure>

                              Aplicar a desloca\u00e7\u00e3o vertical<\/strong>:<\/p>

                              • Active a desloca\u00e7\u00e3o vertical e defina a velocidade para cerca de 1,5. Isto cria um efeito de paralaxe subtil e suave, com a imagem a mover-se mais lentamente do que o texto.<\/li><\/ul>
                                \"\"<\/figure><\/div>

                                Adicionar altera\u00e7\u00f5es de opacidade<\/strong>:<\/p>

                                • Ativar Transpar\u00eancia<\/mark><\/strong> nas op\u00e7\u00f5es de desloca\u00e7\u00e3o.<\/li><\/ul>
                                  \"\"<\/figure><\/div>
                                  • Defina o Transpar\u00eancia<\/strong> n\u00edvel para variar de 0% (totalmente transparente)<\/strong> para 100% (totalmente vis\u00edvel)<\/strong>permitindo que a imagem se desvane\u00e7a gradualmente \u00e0 medida que o utilizador percorre a p\u00e1gina. Ajuste o controlo deslizante da janela de visualiza\u00e7\u00e3o para controlar quando o efeito de esbatimento come\u00e7a e termina, melhorando a experi\u00eancia de deslocamento com uma transi\u00e7\u00e3o visual suave.<\/li><\/ul>
                                    \"\"<\/figure><\/div>

                                    Isto far\u00e1 com que a imagem apare\u00e7a gradualmente, acrescentando profundidade \u00e0 experi\u00eancia visual.<\/p>

                                    Passo 4: Criar um visual em camadas com paralaxe<\/h3>

                                    Para melhorar ainda mais o design, pode adicionar efeitos de paralaxe a outros elementos, como imagens de fundo.<\/p>

                                    Adicionar uma imagem de fundo<\/strong>:<\/p>

                                    • Clique no contentor exterior da sua sec\u00e7\u00e3o e v\u00e1 para o separador Estilo.<\/li><\/ul>
                                      \"\"<\/figure><\/div>
                                      • Adicione uma imagem de fundo.<\/li><\/ul>
                                        \"\"<\/figure>

                                        Ativar efeitos de deslocamento para o fundo<\/strong>:<\/p>

                                        • No separador Avan\u00e7adas, active Efeitos de desloca\u00e7\u00e3o<\/strong>.<\/li><\/ul>
                                          \"\"<\/figure><\/div>
                                          • Defina a velocidade de desloca\u00e7\u00e3o vertical para cerca de 0,5, para que o fundo se mova mais lentamente do que os elementos em primeiro plano.<\/li><\/ul>
                                            \"\"<\/figure>

                                            Pr\u00e9-visualiza\u00e7\u00e3o<\/strong>:<\/p>

                                            \u00c0 medida que desce, ver\u00e1 um efeito totalmente din\u00e2mico: o t\u00edtulo desliza para dentro, a imagem move-se com um efeito de paralaxe e o fundo desloca-se subtilmente para tr\u00e1s.<\/p>

                                            Passo 5: Adicione uma anima\u00e7\u00e3o de desloca\u00e7\u00e3o para o texto<\/h3>

                                            Selecione o widget de texto:<\/strong><\/p>

                                            • Clique no bot\u00e3o caixa de texto<\/strong> para aceder \u00e0 interface de defini\u00e7\u00e3o do texto.<\/li><\/ul>
                                              \"\"<\/figure><\/div>

                                              Active o efeito de desloca\u00e7\u00e3o:<\/strong><\/p>

                                              1. Aceda a o Avan\u00e7ado<\/strong> tab.<\/li>\n\n
                                              2. Sob Efeitos de movimento<\/strong>, ativar Desloca\u00e7\u00e3o<\/strong> Efeitos<\/strong>.<\/li><\/ol>
                                                \"\"<\/figure><\/div>

                                                Selecione o Transpar\u00eancia<\/strong> para criar um efeito de esbatimento no texto.<\/p>

                                                1. <\/li><\/ol>

                                                  Defina a anima\u00e7\u00e3o de transpar\u00eancia:<\/strong><\/p>

                                                  • Defina o intervalo de transpar\u00eancia de 0%<\/strong> (totalmente transparente) para 100%<\/strong> (totalmente vis\u00edvel). O texto passa de transparente a vis\u00edvel \u00e0 medida que o utilizador percorre a p\u00e1gina, criando uma transi\u00e7\u00e3o suave.<\/li><\/ul>
                                                    \"\"<\/figure><\/div>

                                                    Defina o ponto de ativa\u00e7\u00e3o:<\/strong><\/p>

                                                    • No Efeito de desloca\u00e7\u00e3o<\/strong> pode ajustar as defini\u00e7\u00f5es de Porta de visualiza\u00e7\u00e3o<\/strong> Percentagem para especificar onde a anima\u00e7\u00e3o come\u00e7a e termina a desloca\u00e7\u00e3o. Por exemplo, definir a anima\u00e7\u00e3o para disparar quando o utilizador se desloca entre 20% e 80% de<\/strong> a p\u00e1gina permite que o texto apare\u00e7a juntamente com o conte\u00fado da p\u00e1gina.<\/li><\/ul>
                                                      \"\"<\/figure><\/div>

                                                      Passo 6: Adicione o efeito Slide In<\/h3>

                                                      Selecione o efeito Slide In:<\/strong><\/p>

                                                      • No \u00e2mbito do Avan\u00e7ado > Efeitos de movimento<\/strong> selecione Para a anima\u00e7\u00e3o<\/strong>e, em seguida, selecione Deslize para dentro<\/strong> no menu pendente.<\/li><\/ul>
                                                        \"\"<\/figure>
                                                        • Pode escolher Slide In a partir da esquerda, Slide In a partir da direita ou Slide In de baixo para cima, consoante as suas necessidades de design.<\/li><\/ul>
                                                          \"\"<\/figure>

                                                          Isto aplica-se a todos os cen\u00e1rios em que pretende melhorar o aspeto visual de uma p\u00e1gina Web e a interatividade do utilizador.<\/p>

                                                          Passo 7: Otimizar a experi\u00eancia do utilizador<\/h3>

                                                          As anima\u00e7\u00f5es acionadas pelo scroll podem melhorar significativamente um s\u00edtio Web, mas tem de manter a experi\u00eancia do utilizador suave. Aqui ficam algumas dicas:<\/p>

                                                          Mantenha-o simples<\/strong>: Demasiadas anima\u00e7\u00f5es podem sobrecarregar o utilizador. Limite-se a alguns efeitos bem colocados para manter um aspeto profissional.<\/p>

                                                          Otimiza\u00e7\u00e3o m\u00f3vel<\/strong>: Nem todas as anima\u00e7\u00f5es funcionam bem em dispositivos m\u00f3veis. No Elementor Pro, pode desativar anima\u00e7\u00f5es espec\u00edficas para telem\u00f3veis e tablets para manter o s\u00edtio responsivo e de f\u00e1cil utiliza\u00e7\u00e3o.<\/p>

                                                          \"\"<\/figure><\/div>

                                                          Testes entre navegadores<\/strong>: As anima\u00e7\u00f5es de deslocamento podem comportar-se de forma diferente nos v\u00e1rios browsers. Teste sempre o seu design em browsers populares para garantir a consist\u00eancia.<\/p>