Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript
Webdesign

Introdução ao ScrollMagic 2.0

by
Difficulty:IntermediateLength:ShortLanguages:

Portuguese (Português) translation by thierry rene matos (you can also view the original English article)

Se você está desesperado para utilizar animações ao rolar da página no seu próximo projeto, de uma olhada nesta solução. O ScrollMagic é uma biblioteca JavaScript que auxilia na criação de animações ao rolar da página, que são acionadas conforme o usuário muda a posição do scroll.

Recentemente o ScrollMagic passou por algumas mudanças, e neste tutorial vamos dar uma olhada nas melhorias e nos seus novos recursos.

ScrollMagic Homepage
Página do ScrollMagic

O que há de novo?

Dependências que antes eram considerados core components, como o GreenSock (GSAP) e o jQuery, foram totalmente removidos da biblioteca. A partir da versão 2.0.0, tudo que é feito com base no ScrollMagic é considerado um plugin, tornando o ScrollMagic uma biblioteca pura (standalone), com 6KB (gzip).

O changelog traz outras questões que foram ajustadas, vale a pena conferir. Caso você não tenha tempo para conferir o changelog, abaixo separamos as principais mudanças:

  1. Remoção de dependências e introdução de plugins
  2. Controllers agora são definidos utilizando ScrollMagic.Controller()
  3. Scenes agora são definidas como ScrollMagic.Scene()
  4. Remoção do triggerOffset
  5. Remoção do pinClass (esse recurso pode ser utilizado com o setClassToggle na versão 2.0)
  6. O valor padrão do pushfollowers foi definido como false
  7. Novos eventos: add e remove
  8. Renomeado o .parent para .controller
  9. Extensão Debug renomeada para plugins/scene.addIndicators e pode ser aplicada no controller e opera mesmo quando as scenes são removidas ou re-adicionadas.
  10. Novo method removeIndicators

Ajustes de performance

Os ajustes de performance ajudam a otimizar a velocidade do ScrollMagic com base no RAF (request animation frame) do Paul Irish. Ao invés de executar ações com base nos eventos do scroll, fora utilizada uma técnica chamada "debouncing". Isso significa que qualquer evento que deveria ser executado no scroll e na verdade executado em timeout, ou delay. Quando o onScroll é disparado a unica coisa que muda é uma variável como a wasScrolled = true que aguarda pela função de timeout. Originalmente a função debounce era chamada no RAF e então era requisitada a variavel wasScrolled em um loop.

Agora, ao invés de um loop, ele apenas checa no próximo RAF quando um evento scroll é disparado. Tudo isso significa que, se o scroll não se mover, nenhum é loop é executado.

Durações responsivas

Durações responsivas é uma das minhas mudanças favoritas ao lado das questões de performance. A duração de uma Scene agora pode aceitar um valor em porcentagem em string como "100%". O scroll deve ser calculado em relação ao tamanho do scroll do container. O ScrollMagic vai utilizar a altura e a largura do container para mover, respectivamente, os elementos animados.

Carregando o script

A ordem dos scripts está um pouco diferente agora, já que bibliotecas como o GSAP foram removidas das dependências do ScrollMagic. Isso significa que toda vez que você desejar utilizar uma biblioteca como a TweenMax, você vai precisar carregar primeiro a biblioteca GSAP, seguida da biblioteca do ScrollMagic, e então o plugin que desejado.

Lembre-se de sempre carregar a biblioteca GSAP primeiro, depois os plugins do ScrollMagic.

A requisição para do plugin GSAP basicamente é o novo plugin do ScrollMagic que contém as funcionalidades do GSAP tween integradas ao ScrollMagic. Também fora integrado o velocity.js, para aqueles que não desejam utilizar as funcionalidades do GSAP.

Definindo controllers

Um controller é uma maneira de "controlar as scenes/cenas". É uma class que precisa ser adicionada em todo scroll container, e na versão 2.0 é declarada um pouco diferente.

Vamos comparar a maneira como são definidos os controllers hoje, em relação a versão antiga do ScrollMagic:

Antes

Agora

Scenes

Uma scene é a localização da sua animação. Define onde o controller deve ser executado, e como. É também outro exemplo de como a sintaxe do ScrollMagic mudou.

Antes

Agora

Dicas atualizadas

Falando com o criador do ScrollMagic, Jan Paepke, eu aprendi uma maneira genial que pode auxiliar a ganhar tempo, ao migrar seu código do ScrollMagic para o novo padrão.

  1. Primeiro, de um find/replace (buscar/substituir) no seu editor de texto. Busque a palavra "ScrollMagic" e substitua por "SM_TMP" em todos os seus arquivos.
  2. Depois, substitua "ScrollScene" por "ScrollMagic.Scene".
  3. Por ultimo, substitua "SM_TMP" por "ScrollMagic.Controller".

Nota: cuidado para não alterar os arquivos do ScrollMagic. Estas mudanças devem ser aplicadas apenas no seu código ao utilizar a biblioteca .

Documentação

Se você precisa de um exemplo de utilização do ScrollMagic para analisar seu funcionamento, pode dar uma olhada na minha coleção no CodePen para o WIKI section of the ScrollMagic repo. O WIKI também traz algumas explicações, com demos, em sua maioria apresentadas no site oficial do ScrollMagic:

Agora você pode tranquilamente criar animações ao rolar da página, no seu proximo projeto!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.