Estoy creando una página, y hay una sección donde quiero poner de fondo un gif cuando cierto scroll haya transcurrido.
Para eso utilizo una condición if
, sin embargo, cada vez que le doy scroll se reinicia el gif, cosa que sólo debería suceder cuando entra en el rango y luego detenerse. Aquí está el código:
var vistaEstandar = document.getElementById('vista');
vistaEstandar.onscroll = (function(){
var corte = true;
return function()
{
if (($(window).width() > 1700 && vistaEstandar.scrollTop > 3888 && vistaEstandar.scrollTop < 4500 && corte) || ($(window).width() > 1700 && document.documentElement.scrollTop > 3888 && document.documentElement.scrollTop < 4500 && corte)) {
var $div = $("#section6");
$div.addClass("go");
var img = document.createElement('img');
img.src = "images/estandar/monitorEstandarEntrada.gif?p" + new Date().getTime();
$(img).load(function(){
$div.css({backgroundImage: "url("+img.src+")"});
});
}
else if (($(window).width() > 1700 && vistaEstandar.scrollTop >= 4499 && vistaEstandar.scrollTop < 5171) || ($(window).width() > 1700 && document.documentElement.scrollTop >= 4499 && document.documentElement.scrollTop < 5171)) {
var $div = $("#section6");
$div.addClass("out");
var img = document.createElement('img');
img.src = "images/estandar/monitorEstandarSalida.gif?p" + new Date().getTime();
$(img).load(function(){
$div.css({backgroundImage: "url("+img.src+")"});
});
corte: false;
}
else
{
$('#section6').css('background-image', 'none');
}
}
})();
Consiste de dos animaciones, la primera es un monitor entrando... Y a medida que el usuario sigue bajando el fondo de esa sección se debería cambiar por otro gif que muestra el monitor saliendo. El cambio se da, sólo que se reinicia. Necesito que al entrar al rango de scrollTop definido en la condición entre el gif una sola vez y se quede fijo hasta que se cambie.
ACTUALIZADO
https://jsfiddle.net/lj_tang/qynvg44b/11/ Aqui hay un fiddle donde se ve el problema que genera. Cada vez que hago scroll y se vuelven a cambiar los fondos... se deberían cambiar los gifs y reiniciarse