Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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á.
Você está usando algum framework? (jQuery por exemplo)
Não amigo.
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/
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;Obrigado. Vou testar aqui. :)
Você está usando algum framework? (jQuery por exemplo)