A ver si alguien me puede echar una mano, estoy atascado.
Trato de hacer que 6 divs, llamados bolos, se animen aleatoriamente cuando aparecen en pantalla al hacer scroll. Y quiero que dejen de animarse cuando el usuario siga haciendo scroll en una posición determinada. Detectar las posiciones lo que conseguido, el console.log me lo demuestra. Pero los bolos siguen animándose a pesar del clearinterval. No entiendo pr qué. Gracias por adelantado.
La variable "solouna" creo que sobra, es un intento de que se genere un sólo setinterval al hacer el scroll.
Código:
$(document).ready(function(){ var solouna = 0;//para solo un setinterval $(window).on('scroll', function(){ var elscroll = $(window).scrollTop(); var altvent = $(window).height(); var disparamapa = $('.mapa').offset().top - (altvent/2); var stopmapa = $('.mapa').offset().top; if(elscroll >= disparamapa && elscroll < stopmapa && solouna == 0){ var luces = setInterval(function(){ var bolo = '.bolo' + parseInt((Math.random() * 6) + 1); var boloescala = parseFloat(((Math.random() * 2)/10)); $(bolo).css('transform', 'scale(' + boloescala + ')'); }, 1200); solouna = 1; } if(elscroll > (stopmapa - 200)){ clearInterval(luces); solouna = 0; console.log(elscroll + ' ' + stopmapa + ' ' + solouna); } }); });