Seu Negócio Virtual

Tudo sobre o digital.

Sobre o Autor

Autor Marcelo Torres

Olá,

Eu sou o Marcelo Torres.

Mineiro, 28 anos e apaixonado por Marketing Digital. Meu objetivo aqui é ajudar você a criar e otimizar seu negócio na internet.

Farei análise das melhores ferramentas disponíveis no mercado, com todos os seus pontos positivos e negativos.

Conte comigo para obter sucesso em seus negócios online, boas vendas!

Todos os Posts

Review Completo do Scroll Sequence

Deseja criar uma experiência mais atraente e atraente para os visitantes do seu site WordPress?

Em nossa análise do Scrollsequence, mostraremos como você pode usar este plugin freemium para criar incríveis animações de rolagem em seu site sem escrever uma única linha de código – assim como a Apple usa em seu site Airpods Pro .

Eu realmente não posso descrever o conjunto completo de recursos apenas com texto, então vou começar com um exemplo real:

Em poucas palavras, o plugin Scrollsequence ajuda você a criar exatamente o mesmo efeito em seu site WordPress. Tudo o que você precisa fazer é enviar algumas imagens, adicionar algum texto e talvez configurar algumas animações.

No geral, essa é uma maneira muito legal de criar uma experiência mais “cinemática” em seu site WordPress.

Continue lendo nossa análise do Scrollsequence para saber como funciona…

 

Ganhe 20% de desconto!

Desconto exclusivo de 20% no Scrollsequence ao usar o código de cupom wpmayor20

Obter sequência de rolagem

Revisão da sequência de rolagem: explorando a lista de recursos

O recurso principal do Scrollsequence é que ele ajuda você a criar o efeito de animação de rolagem exclusivo do exemplo acima. Você também pode conferir alguns exemplos ao vivo aqui se quiser vê-lo em ação:

Você pode criar animações ilimitadas e colocá-las em qualquer lugar do seu site usando um shortcode, com planos de adicionar um bloco dedicado do Gutenberg. O plug-in também permite que você crie páginas independentes dedicadas para suas animações, se preferir.

A animação não é uma única imagem ou vídeo animado. Em vez disso, é uma série de mais de 50 imagens reunidas que parecem animar à medida que um visitante rola para baixo.

Você pode escolher qualquer plano de fundo que desejar e também pode criar várias “páginas” para alterar a animação do plano de fundo à medida que os visitantes continuam a rolar para baixo.

Para adicionar conteúdo, você poderá usar um editor de texto simples (o antigo editor do WordPress, também conhecido como o clássico editor TinyMCE). Além de adicionar texto e formatá-lo usando o editor, você também pode incluir outros tipos de conteúdo, como códigos de acesso de outros plugins, oembeds, seu próprio HTML personalizado e muito mais.

Para adicionar ao efeito de rolagem, você poderá animar todos os elementos que adicionar ao editor de texto. Você também pode usar animações diferentes para diferentes partes do conteúdo, o que também permite alterar o texto à medida que o usuário rola para baixo.

Há também alguns outros recursos menores que podem ser úteis, que você verá na seção prática.

Como criar uma animação de rolagem com Scrollsequence

Nesta seção, mostrarei como o Scrollsequence realmente funciona. 

Vou guiá-lo por todas as etapas do processo, o que o ajudará a entender como ele funciona e também mostrará alguns dos recursos menores e opções de configuração.

Observação – estou usando a versão premium para este passo a passo, mas a maioria desses recursos também está disponível na versão gratuita.

1. Crie uma nova “Página”

Ao criar sua animação de rolagem, você pode baseá-la em uma única sequência de animação ou adicionar várias sequências que mudam conforme o usuário rola para baixo. Cada sequência dentro de sua animação geral é chamada de “página”.

Você pode criar uma única página. Ou você pode adicionar quantas novas páginas desejar. Se você adicionar uma nova página, ela terá sua própria guia e você poderá realizar todas as ações que detalharei abaixo para cada página:

Criando uma página

2. Prepare e carregue suas imagens

Em seguida, você precisa fazer upload das imagens que usará para criar sua animação. Novamente, Scrollsequence não depende de uma única imagem GIF como você pode estar acostumado. Em vez disso, é uma série de mais de 50 imagens, que permite criar o efeito imersivo.

Preocupado com o impacto no desempenho do upload de mais de 50 imagens em uma única página? Não se preocupe! O plug-in exibirá o conteúdo assim que a primeira imagem for carregada, para que você não tenha problemas de bloqueio de renderização e os tempos de carregamento percebidos do seu visitante ainda sejam bons (junto com métricas como Maior Pintura de Conteúdo e Primeira Pintura de Conteúdo).

Para obter essas imagens, você pode pegar um pequeno videoclipe e usar uma ferramenta para convertê-lo em imagens para cada quadro – mais sobre isso abaixo.

Mas primeiro, vamos falar sobre a proporção de suas imagens.

Se você quiser usar a mesma sequência de animação para visitantes de desktop e dispositivos móveis, o desenvolvedor recomenda que você escolha uma proporção quadrada. Se você preferir uma proporção mais ampla para visitantes de desktop, outra opção é criar sequências de animação separadas para cada tipo de visitante.

Atualmente, você não pode conseguir isso dentro do plugin, embora o desenvolvedor planeje adicioná-lo como um recurso. No entanto, você pode conseguir isso com um plug-in de terceiros que permite exibir condicionalmente um código de acesso por dispositivo ou usar seu próprio código.

Em seguida, vamos falar sobre como gerar as imagens que você precisa. Novamente, você vai querer começar com um videoclipe curto ( estou usando um clipe royalty-free do Pexels ). Em seguida, use uma dessas ferramentas que o desenvolvedor testou para convertê-la em imagens para cada quadro. Pessoalmente, usei o conversor Ezgif gratuito . No entanto, se você deseja uma conversão de taxa de quadros mais alta, pode preferir software de desktop como VLC ou FFMPEG.

Com o Ezgif, tudo o que você faz é carregar o arquivo de vídeo , especificar quantos quadros converter e, em seguida, ele fornecerá um ZIP com todas as imagens. O desenvolvedor recomenda de 50 a 100 imagens, então você vai querer combinar a taxa de quadros com esse número.

Usei um videoclipe de sete segundos a 10 FPS, o que me dá 70 imagens:

Convertendo vídeo em imagens

Você provavelmente vai querer usar uma taxa de quadros mais alta, já que 10 FPS torna a sequência de animação um pouco “saltante”.

Depois de ter as imagens, carregue-as na sua página Scrollsequence.

Infelizmente, devido a uma peculiaridade de como o WordPress uploader funciona, algumas de suas imagens podem carregar fora de ordem. Ou, a sequência inteira pode carregar para trás. Novamente, este é um problema com o WordPress, não com o Scrollsequence.

Se isso acontecer, você pode usar arrastar e soltar para arrastá-los na ordem correta. O desenvolvedor também tem planos de adicionar um recurso de reversão em massa para economizar algum tempo, o que acho que será super útil em situações em que o WordPress adiciona as imagens ao contrário:

Fazendo upload de imagens

3. Adicione conteúdo sobre as imagens

Em seguida, você pode usar o editor TinyMCE para adicionar o conteúdo que aparecerá no topo dessa sequência de animação.

Você pode adicionar texto normal e formatá-lo como quiser. Ou você também pode incluir códigos de acesso, HTML personalizado, imagens estáticas, oembeds, etc.

Adicionando seu conteúdo

4. Configure Animações (Opcional)

Em seguida, você tem a opção de animar o conteúdo que adicionou no editor acima. Isso é opcional, mas permite aprimorar ainda mais o efeito cinematográfico.

Para usar o recurso de animação, você precisará de um pouco de código, mas é definitivamente algo que usuários não técnicos podem fazer.

A parte do código é que você precisará ir para a guia Texto do editor de conteúdo e adicionar uma classe ou ID CSS a cada elemento que deseja animar.

Por exemplo, para usar animações separadas para o título H1 e o título H2, você deve configurá-lo assim:

Adicionando CSS para animações

Em seguida, você rolaria até as configurações de Animação de conteúdo e adicionaria uma animação. Na coluna Seletor , você adicionará o ID ou a classe do elemento que deseja segmentar.

Então, o resto das configurações são bastante auto-explicativas. Você pode:

  • Escolha um horário de início/parada para a animação. Você pode segmentar isso pelo número da imagem na sequência ( que o plug-in marca convenientemente para você ).
  • Escolha a animação de/para e a duração de cada animação.

Você obtém quatro tipos diferentes de animações:

  • Fade para/da opacidade
  • Mover de/para deslocamento horizontal
  • Mover de/para deslocamento vertical
  • Escala de/para

Você também pode adicionar várias animações ao mesmo tempo.

Veja como seria ter um conteúdo começando da esquerda e mudando para a direita:

Personalizando as animações

5. Defina outras configurações de página e animação

Para terminar as coisas, você pode configurar alguns misc. configurações para a página individual em sua animação e sua animação de rolagem como um todo.

Para a página, você pode configurar a duração de cada imagem individual na sequência, bem como o dimensionamento e o alinhamento da imagem para visitantes de desktop e dispositivos móveis:

Outras configurações de página

E para a sequência como um todo, você terá algumas configurações da barra lateral para controlar o atraso de rolagem, largura da imagem, opacidade e outros detalhes.

E é basicamente isso para configurar sua animação de rolagem. Agora, é hora de exibi-lo.

Configurações de animação de rolagem completa

 

6. Exiba sua animação

Quando terminar, você pode exibir sua animação em qualquer lugar do site usando seu código de acesso:

[scrollsequence id=”####”]

Você também pode usar parâmetros de código de acesso para adicionar margem superior ou inferior da seguinte forma:

[scrollsequence id=”####” margintop=”-150px” marginbottom=”-150px”]

Atualmente, o shortcode é a única opção para incorporar sua animação em outro conteúdo, mas o desenvolvedor também tem planos de adicionar um bloco Gutenberg dedicado.

Preços de sequência de rolagem

Scrollsequence vem em uma versão gratuita no WordPress.org , bem como uma versão premium com mais recursos .

A versão gratuita por si só permitirá que você crie algo com ótima aparência, mas limita o número de páginas e imagens que você pode usar. Ele também não possui as opções avançadas de animação e alguns outros recursos, como o dimensionamento automático de imagens.

Para remover esses limites e ter acesso a todos os recursos, você pode ir Pro. Uma coisa legal sobre todos os planos Pro é que eles oferecem uma avaliação gratuita de 14 dias, para que você possa testá-los sem nenhum risco.

  • Um site – $ 49,99 para uma licença de um ano ou $ 149,99 para toda a vida.
  • Cinco sites – $ 129,99 para uma licença de um ano ou $ 389,99 para toda a vida.
  • Dez sites – $ 219,99 para uma licença de um ano ou $ 659,99 para toda a vida.

Considerações Finais sobre Scrollsequence

No geral, o Scrollsequence facilita muito a criação dessas animações de rolagem atraentes em seu site WordPress. Nem todo site WordPress precisará desse tipo de animação , mas é uma opção realmente interessante para sites com foco visual ou geralmente qualquer site onde você deseja adicionar uma sensação mais cinematográfica. Também pode ser ótimo criar uma landing page envolvente para um produto.

Que eu saiba, não existem outros plugins do WordPress que permitem que você faça isso, especialmente sem usar seu próprio código.

Se você quiser testá-lo, você pode brincar com a versão gratuita no WordPress.org ou obter uma avaliação gratuita de 14 dias da versão premium (sem a necessidade de inserir um cartão de crédito).

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *