Saludos y feliz año.
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:
$(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');
}
});
});
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.
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