Publicado em 22 de jan.

Disparar Animação CSS com Scroll

Bom dia galera,

Eu estou tentando colocar um efeito fade numa DIV com o plugin Animate.css (http://daneden.github.io/animate.css/). O que acontece é que eu quero que esse efeito seja ativado assim que o SCROLL atingir esta DIV, como acontece nesse template http://shapebootstrap.net/preview/?id=439 . Um exemplo de como estou fazendo:

A div em HTML:

<div class="div1">
 <p>Teste</p>
</div>

<div class="div2">
 <p>Teste</p>
</div>

E o arquivo javascript para disparar a animação:

$(document).ready(function(){
 $('.div1').addClass('animated fadeInUp');
 $('.div2').addClass('animated fadeInUp');
});

A animação está funcionando normalmente, só que todas elas são ativadas assim que a página é carregada. Eu gostaria que elas fossem ativadas assim que o scroll atingisse a DIV.

Alguém pode me ajudar?

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Lucas Medina· 22 de jan.

Bom dia, Ewerton!

Como você está buscando soluções em JQuery, existem os métodos scroll() e scrollTop();

O primeiro é um método de eventos, que vai ativar sempre que for feito scroll na página. E o outro pega o valor atual do scrollTop na página:

$(document).scroll(function() {
 if ($(this).scrollTop() > 500) {
 console.log('Mais de 500 pixels submarinos');
 }
});

No seu caso, é só usar e abusar do addClass após um dado valor no scrollTop(), e daí é só magia ;)

Ewerton Madeira· 22 de jan.

Acho que entendi Bruno. Eu vou ter que determinar que o efeito seja disparado após rolar "x" pixels, correto?

Mas como eu determino isso se a quantidade de pixels a rolar para atingir determinada div pode variar com a resolução do monitor?

wneo· 24 de jan.

>
Acho que entendi Bruno. Eu vou ter que determinar que o efeito seja disparado após rolar "x" pixels, correto?

Mas como eu determino isso se a quantidade de pixels a rolar para atingir determinada div pode variar com a resolução do monitor?

Esse eh um tema q me interessa tbm, e estava aqui pensando na solução..Se definirmos o if ($(this).scrollTop() > 500) {

em porcentagem%, podemos obter sucesso nesse caso, oq acham?

angelorubin· 24 de jan.

Veja se isso ajuda - http://jsfiddle.net/tcloninger/e5qaD/

Lucas Medina· 25 de jan.

>
Acho que entendi Bruno. Eu vou ter que determinar que o efeito seja disparado após rolar "x" pixels, correto?

Mas como eu determino isso se a quantidade de pixels a rolar para atingir determinada div pode variar com a resolução do monitor?

Você pode utilizar uma propriedade de alguma predefinição do navegador em javascript.

Por exemplo, o tamanho da tela é adquirido com window.innerHeight

Então ao invés de um número pré-definido, você pode utilizar um valor como este.

Se for 100 pixels a mais que a altura da tela, você pode utilizar window.innerHeight + 100, e assim por diante. Tudo depende do que exatamente você está querendo desenvolver ;)