Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Galera estou com um duvida preciso que o script carregue apenas quando chegar na minha div, pois como a div que via ser carregada tem uma animação e o conteúdo só vai ser mostrado quando o usuário chegar naquele div preciso que o script seja carregado somente quando o usuário rolar a pagina e chegar a determinada div HTML:
<div class="post"> <div class="skills"> <h2>Teste</h2> <div class="demo" data-percent="65"></div> </div>
</div> post(). function post(){ jQuery('.post').addClass("hidden").viewportChecker({ classToAdd: 'visible animated zoomIn', offset: 100, }). }skill(). function skill(){ $('.demo').percentcircle({ animate: true, diameter: 100, guage: 2, coverBg: '#fff', bgColor: '#efefef', fillColor: '#5c93c8', percentSize: '15px', percentWeight: 'normal' }). }Lucas ja tentei isso, mas meu problema é que o script que tem a animação não funciona corretamente dai, ou não aparece a div que tem que aparecer ou quando aparece div fica em loop e a cada scroll aparece mais uma div ;/
Você precisa criar triggers pra isso.
Como um interruptor, fazer com que um evento só ocorra uma vez, enquanto uma variável em boolean seja verdadeira, ou semelhante:
var check = true;
$(document).scroll(function() {
console.log(window.scrollY);
if (check && window.scrollY > 500) {
console.log('Animação de entrada');
check = false;
console.log('Fim de evento');
}
});Fiz desta forma mas não consigo tirar o loop, preciso de quatro div .demo mas desta forma que foi mostrado só carrega uma e não carrega mais nenhum outra ;/
$(document).ready(function() {
$(window).scroll( function(){
$('.hidem').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
skill();
function skill(){
$('.demo').percentcircle({
animate : true,
diameter : 100,
guage: 2,
coverBg: '#fff',
bgColor: '#efefef',
fillColor: '#5c93c8',
percentSize: '15px',
percentWeight: 'normal'
});
}
}
});
});
});
Olá!
Tente colocar dúvidas sobre Javascript na seção de Javascript. Um por todos, todos pelo fórum!
No caso, você está utilizando jQuery no seu projeto? Existe um event handler no jQuery chamado .scroll(), que aciona um evento sempre que o scroll é feito no site.
Uma solução legal para o seu caso é fazer o seguinte:
Um exemplo:
* Para quando a div estiver no meio da página:
* Para quando a div aparecer completamente, somente:
* Para quando a div for aparecer:
Vai depender bastante de como você quer que tal procedimento seja aplicado, mas o .scroll() deve ser suficiente para esta ocasião ;)
Boa sorte!