scrollReveal.js – animando elementos ao rolar scrollbar

Neste artigo vou fazer algumas experiências com a ferramenta scrollReveal.JS, que é uma biblioteca JavaScript para animar elementos conforme o usuário rola a pagina do navegador.

Demo & Download

Primeiramente vamos precisar de um layout simples com alguns elementos para testar a animação, lembrando que precisamos de um layout com bastante conteúdo para gerar scroll.

Desenvolvi um simples layout para demonstrar os exemplos do tutorial, então quem quiser utilizar o mesmo pode baixar o aqui os arquivos.

Certifique-se de que o arquivo do plugin está devidamente linkado a pagina HTML de teste, caso não esteja, baixe o arquivo no site do plugin e mapeie o mesmo no arquivo HTML (conforme orientação do plugin, o arquivo JavaScript é linkado após o fechamento da tag body).

Com o arquivo JavaScript linkado, adicione o seguinte código após a tag </body>:

<script type="text/javascript" src="scrollReveal.js"></script>
<script type="text/javascript">
window.scrollReveal = new scrollReveal();
</script>

No arquivo do exemplo, criei algumas div’s com texto para gerar scroll e demonstrar a animação ao rolar a pagina, conforme o código a seguir:

<div class="box1">

Yellow-and-black triplefin North American freshwater catfish, albacore shiner, squeaker sabertooth snoek Canthigaster rostrata. Mackerel dogfish brook trout hardhead catfish peacock flounder Oregon chub European eel Black scabbardfish brook trout steelhead. Pencilfish Mexican blind cavefish yellowmargin triggerfish cutthroat eel shiner, duckbill kelp perch false trevally--temperate ocean-bass dory redlip blenny javelin peladillo pompano whitebait; perch, halosaur slimehead. Flagfish coffinfish: northern anchovy skipjack tuna. Kingfish righteye flounder Chinook salmon albacore dogfish leatherjacket Blenny guitarfish false trevally.

</div>
<div class="box2">

Threadsail prowfish snubnose eel pink salmon; butterfly ray burbot, "freshwater herring needlefish ghost fish moray eel." Bullhead false cat shark pencilsmelt morwong paradise fish gopher rockfish squarehead catfish. Jawfish mustard eel stingfish; gombessa requiem shark pencil catfish. Cepalin spinyfin tripod fish, "Arctic char sheepshead snailfish," bristlemouth limia roach, "sheepshead minnow," duckbill eel. Fathead sculpin torrent catfish herring pike conger lampfish sandfish bluntnose minnow, Pacific hake. African glass catfish, Sacramento splittail blackchin paradise fish barbelless catfish tube-snout zebra danio peladillo sheepshead minnow glowlight danio: dusky grouper gouramie. Mexican golden trout. Bigscale pomfret eeltail catfish mud cat stickleback barfish Rattail fingerfish scissor-tail rasbora. Javelin northern pearleye; archerfish, freshwater hatchetfish." Walu pomfret searobin red snapper scabbard fish Ganges shark red snapper.

</div>
<div class="box3">

Finback cat shark silverside, cuckoo wrasse. Cherry salmon morwong collared carpetshark upside-down catfish Black triggerfish mrigal. Trumpeter wolf-herring elver, ocean sunfish snook armorhead catfish Blenny Hammerjaw? Angler blue-redstripe danio croaker, thornyhead regal whiptail catfisce tube-snout threadfin Redhorse sucker stoneroller minnow. Yellowtail clownfish sheepshead, warmouth lemon shark freshwater hatchetfish scythe butterfish long-whiskered catfish jellynose fish. Bramble shark mako shark Moses sole giant sea bass grunt sculpin cobia blue whiting? Whale catfish zebra bullhead shark grass carp sergeant major, damselfish spearfish goldspotted killifish louvar.

</div>
<div class="box4">

Rough sculpin taimen eel cod treefish prickleback mora ghost carp trumpeter handfish Pacific cod Pacific herring snakehead. Cepalin common tunny ellowtail snapper lamprey featherback gray eel-catfish. Sandroller lungfish. Muskellunge bluntnose knifefish sand tiger monkfish gibberfish Sacramento splittail herring smelt? Colorado squawfish cowfish pike wolf-eel Bigscale pomfret half-gill flagfish Canthigaster rostrata frogmouth catfish spotted dogfish. Cod icefish alligatorfish waryfish buffalofish sea snail southern Dolly Varden--channel bass galjoen fish swordfish wallago: threadfin bream blue eye rough scad?

</div>
<div class="box5">

Lancetfish jack Devario megamouth shark ghost fish Death Valley pupfish black dragonfish blackchin orangestriped triggerfish glass knifefish. Lancetfish barreleye kelp perch saber-toothed blenny peamouth eelblenny sheepshead desert pupfish oarfish medusafish Quillfish Black tetra mosquitofish white shaeam yellow jack shell-ear peacock flounder giant wels. Zebra danio sweeper; Sevan trout queen danio stonecat shad northern pike; pearleye zebra bullhead shark Alaska blackfish spikefish tadpole cod. Olive flounder, Pacific lamprey round whitefish candiru longfin smelt delta smelt, kanyu Death Valley pupfish slimy sculpin. Arrowtooth eel.

</div>
<div class="box6">

Threadsail prowfish snubnose eel pink salmon; butterfly ray burbot, "freshwater herring needlefish ghost fish moray eel." Bullhead false cat shark pencilsmelt morwong paradise fish gopher rockfish squarehead catfish. Jawfish mustard eel stingfish; gombessa requiem shark pencil catfish. Cepalin spinyfin tripod fish, "Arctic char sheepshead snailfish," bristlemouth limia roach, "sheepshead minnow," duckbill eel. Fathead sculpin to danio: dusky grouper gouramie. Mexican golden trout. Bigscale pomfret eeltail catfish mud cat stickleback barfish Rattail fingerfish scissor-tail rasbora. Javelin northern pearleye; archerfish, freshwater hatchetfish." Walu pomfret searobin red snapper scabbard fish Ganges shark red snapper.

</div>
<div class="box7">

Finback cat shark silverside, cuckoo wrasse. Cherry salmon morwong collared carpetshark upside-down catfish Black triggerfish mrigal. Trumpeter wolf-herring elver, ocean sunfish snook armorhead catfish Blenny Hamnnow. Yellowtail clownfish sheepshead, warmouth lemon shark freshwater hatchetfish scythe butterfish long-whiskered catfish jellynose fish. Bramble shark mako shark Moses sole giant sea bass grunt sculpin cobia blue whiting? Whale catfish zebra bullhead shark grass carp sergeant major, damselfish spearfish goldspotted killifish louvar.

</div>

Cada div tem um classe box para diferencia-las, conforme o CSS abaixo:

body {
font-family: helvetica;
margin-top: 100px;
margin-bottom: 100px;
}

.box1 {
background-color: goldenrod;
}

.box2 {
background-color: tomato;
}

.box3 {
background-color: aliceblue;
}

.box4 {
background-color: chocolate;
}

.box5 {
background-color: goldenrod;
}

.box6 {
background-color: rosybrown;
}

.box7 {
background-color: sandybrown;
}

div {
margin: 0 auto;
width: 800px;
padding: 50px;
margin-top: 70px;
box-shadow: 1px 1px 15px #888888;
border: solid 3px white;
border-radius: 5px;
font-weight: bold;
}

Com o layout pronto, vamos testar as funcionalidades do plug-in.

A documentação do scrollReveal descreve vários métodos para animar os elementos ao rolar da página, aqui vou apresentar os exemplos mais simples para desfrutar do plug-in, que também conta com configurações avançadas em JavaScript.

Exemplos de utilização

Para adicionar a funcionalidade do plug-in, é necessário adicionar o elemento data data-scroll-reveal na tag do elemento que será animado, no nosso caso uma div, conforme o exemplo abaixo, onde animamos a box1:

<div class="box1" data-scroll-reveal="">

Yellow-and-black triplefin North American freshwater catfish, albacore shiner, squeaker sabertooth snoek Canthigaster rostrata. Mackerel dogfish brook trout hardhead catfish peacock flounder Oregon chub European eel Black scabbardfish brook trout steelhead. Pencilfish Mexican blind cavefish yellowmargin triggerfish cutthroat eel shiner, duckbill kelp perch false trevally--temperate ocean-bass dory redlip blenny javelin peladillo pompano whitebait; perch, halosaur slimehead. Flagfish coffinfish: northern anchovy skipjack tuna. Kingfish righteye flounder Chinook salmon albacore dogfish leatherjacket Blenny guitarfish false trevally.

</div>

Com o atributo acima o elemento recebe uma animação padrão, mas podemos melhorar essa animação com os seguintes atributos:

Enter

Cotrola a origem do elemento, se vem de cima, de baixo, da direita ou da esquerda, conforme o exemplo abaixo:
enter + top | right | bottom | left

<div data-scroll-reveal="enter top">teste1</div>

Move

A distancia que o elemento percorre ao se mover para direção declarada no enter.
move + valor em px 20px

<div data-scroll-reveal="move 20px">teste1</div>

Over

Duração da animação mediantes os parametros anteriores.
over + valor decimal em segundos 10s

<div data-scroll-reveal="over 10s">teste1</div>

After/Wait

Duração da animação após o elemento ser revelado.
after/wait + valor decimal em segundos 10s

<div data-scroll-reveal="after/wait 10s">teste1</div>

Obtemos o seguinte resultado combinando todos os atributos acima em um elemento:

<div data-scroll-reveal="enter top move 50px">teste1</div>
<div data-scroll-reveal="enter top move 50px, after 0.3s">teste2</div>
<div data-scroll-reveal="enter top move 50px, after 0.6s">teste3</div>
<div data-scroll-reveal="enter top move 50px, after 0.9s">teste4</div>

Teste esses atributos nas div’s dos elementos do arquivo de teste para entender o funcionamento dos atributos.

Existem outro parâmetros de condição que podemos utilizar, segue relação:

  • from
  • the
  • and
  • then
  • but
  • with
  • ,

Exemplo:

<div data-scroll-reveal="wait 0.3s, then enter left and move 40px over 2s">teste1</div>
<div data-scroll-reveal="enter from the left after 0.3s, move 40px, over 2s">teste2</div>
<div data-scroll-reveal="enter left move 40px over 2s after 0.3s">teste3</div>
<div data-scroll-reveal="enter left, move 40px, over 2s, wait 0.3s">teste4</div>

Teste também com esses parâmetros as div’s do nosso exemplo, para entender a funcionalidade destes atributos.

Existem outros atributos mais avançados para serem declarados com JavaScript, mas não vamos abordar os mesmo aqui para não fugir da simplicidade e praticidade do plug-in, mas para quem se interessar basta visitar a documentação do plug-in.

Qualquer duvida, encaminhem um comentário.

🙂

  • Marcus Pereira

    Cara só entrei mesmo para comentar, porque este post valeu muito apena, cara você me deu uma mão retada. Valeu brother, até +

    • Muito obrigado Marcus, muito gratificante seu comentário 🙂
      Qualquer coisa estamos ai!

  • João SIlvestre

    Cara, e quando o scroll está em uma div com parallax? Pois não é o “body” que rola para baixo, mas sim a div “parallax”.

    • Então, eu não cheguei a fazer testes com background em parallax. Mas se você fez testes, avisa aqui para gente.

  • José Roberto

    Cara, meus parabéns, esse conteúdo me ajudou muito, excelente publicação, muito obrigado

    • De nada José Roberto, qualquer coisa estamos ai 🙂

  • Carlos Eduardo de Figueiredo

    Primeiramente meus parabéns estava procurando a tempo um tuto desse, mas tenho uma pergunta. Fazemos o efeito ao rolar o mouse para baixo, tem como ao descer ele desfazer o efeito e ao subir novamente a págino o efeito acontecer dinovo?

    • Carlos, valeu. Da pra fazer sim o efeito contrário, no site deles ele opera dessa forma. Faz um tempo que não utilizo o scrollreeveal.js. Vou dar uma olhada nele esse fim de semana e te respondo Carlos! 🙂

      • guilomaker

        Bom dia! também gostaria de saber como fazer o efeito contrario, pois pela documentação não conseguir, no seu tutorial está de uma forma diferente do que na documentação atual. sabe dizer como posso fazer? Obrigado!!

  • Leandro

    Você está de parabéns, vai me ajudar demais em questão de tempo e utilidade 🙂

  • Samuel Dos Santos

    Excelente artigo. Obrigado por compartilhar.

  • Thavi Lang

    Moço, não tah funcionando não, nem sua página de exemplo… 🙁

    • Pedro Ivo Vilela Costa

      Acabei de testar aqui e está funcionando perfeitamente. Qual navegador/versão está usando?

  • Douglas Fiedler

    Vou fazer igual a Thavi…

    Moço, não tah funcionando não…

    Usei Firefox 44, Chrome 48, OS Linux…

    O site scrollrevealjs.org funciona. Seu exemplo não. O código que vc fornece para baixar as DIVs não vem definido data-scroll-reveal, poderia, assim tinha como verificar.

    No site eles não utilizam data-scroll-reveal nos elementos é tudo definido no javascript.

    Todos os tutoriais que encontrei sobre esse plugin ensinam como vc, colocando o data-scroll-reveal, porém não funciona. E no site demo oficial não utiliza desse jeito.

    E aí? Como nóis faiz? Rsrs

    Passei o dia inteiro tentando fazer funcionar desse jeito que vc ensina e nada.

    • Gabriel Silveira

      window.sr = ScrollReveal({ reset: true });
      sr.reveal(‘.box1’, { duration: 2000, origin: ‘bottom’ });

      • Opa, obrigado Gabriel Silveira!

        • Gabriel Silveira

          Seu artigo me ajudou bastante! Eu que agradeço! Abraços!

  • Rafael Henrique Muller

    Vlw, muito obrigado fera ajudouu muito!!

  • Excelente post. http://www.wiy.com.br

  • Natanael Mara

    Thierry, cara como faço para deixar meu header igual esse https://scrollrevealjs.org/
    ?
    Ele aparece ao rolar a página. VLw!