Disparar Animação CSS com Scroll

[Ewerton Madeira 0]

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?

[Lucas Medina 17]

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 0]

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 5]

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 142]

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

[Lucas Medina 17]

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 ;)