A ver si alguien me puede echar un cable.
Estoy tratando de animar un objeto con desplazamiento de derecha a izquierda. El objeto debe animarse continuamente cuando el scroll supera una cantidad determinada (trigger1) y debe parar cuando supere otra (fin).
Creo no es necesario poner el código html y los estilos.
El script es este:
Código:
Al ver que no se paraba la animación, puse en el código html un botón con el clearinterval al clickar sobre él.$(document).ready(function(){ var top_trigger = $('#trigger1').position().top; var top_cuadroazul = $('#cuadroazul').position().top; var distancia = top_cuadroazul - top_trigger; var top_stop = $('#stopanima').position().top; var fin = top_stop - top_trigger; var left_cuadroazul = parseInt($('#cuadroazul').css('left')); var wpos; var nosigas = 0;//limita el setinterval a una sola vez, no tantas como scrolles $(window).on('scroll', function(){ wpos = $(window).scrollTop(); if (wpos >= distancia && wpos < fin){ if (nosigas == 0){ nosigas = 1; var intervalo= null; intervalo = setInterval(function(){ left_cuadroazul = -left_cuadroazul; $('#cuadroazul').animate({left: left_cuadroazul}, 1500, 'swing'); }, 5); } } if(wpos >fin){ clearInterval(intervalo); console.log('entro'); } }); });
Tampoco lo hace y en la consola sale el mensaje:
intervalo is not defined
Gracias por adelantado.
PD: Cómo no sé si hay alguna norma que prohiba links externos, podéis ver la página en esta dirección:
http://dereprueba.web44.net/cuadro/index2w.html