Efeito com rolagem

[Diegocombr 0]

Olá pessoal.

 

Gostaria da ajuda de alguém que conheça um tutorial para o que estou procurando.

Bem, estou desenvolvendo um site em wordpress e gostaria que ao eu ir fazendo a rolagem os conteúdos de cada DIV fosse alterando sua opacidade (de 0 a 1).

 

Para explicar melhor... Ao abrir a página apareceria apenas o slide na header, os conteúdos abaixo estariam todo em opacidade 0, e ao rolar eles iam surgindo, pegaram? ;)

 

Agradecimentos desde já.

[Fiote 24]

Você está usando algum framework? (jQuery por exemplo)

[Diegocombr 0]

Você está usando algum framework? (jQuery por exemplo)

Não amigo.

[William Bruno 1501]

O segredo é ouvir o evento onscroll e aplicar o que vc quer, a cada ponto que vc quer.

 

Exemplo didático:

http://wbruno.com.br/javascript-puro/como-fazer-menu-fixo-apartir-de-certa-rolagem-da-pagina/

[Fiote 24]

Ouvir o onscroll é fácil. Acredito que a mágica aqui é: como saber se um elemento está "na tela"?

 

Acabei de fazer essa função, acho que deve te ajudar ;)

 

 

function estaNaTela(obj) {    
    var info = obj.getBoundingClientRect();

    // Verificando se ele está dentro da tela (em X)
    var dentroX = false;
    if (info.left >= 0 && info.left <= window.innerWidth) dentroX = true;
    if (info.right >= 0 && info.right <= window.innerWidth) dentroX = true;

    // Verificando se ele está dentro da tela (em Y)
    var dentroY = false;
    if (info.top >= 0 && info.top <= window.innerHeight) dentroY = true;
    if (info.bottom >= 0 && info.bottom <= window.innerHeight) dentroY = true;

    return (dentroX && dentroY);
}

var meudiv = document.getElementById('qqcoisa');
var natela = estaNaTela(meudiv);
var newopacity = (natela) ? 1 : 0.2;
meudiv.style.opacity = newopacity;

[Diegocombr 0]

Obrigado. Vou testar aqui. :)