1

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

2 respuestas 2

2

Ok, una persona me ayudó muy amablemente a responder esto aqui

El codigo sería el siguiente:

if (($(window).width() > 1700 && vistaEstandar.scrollTop > 3888 && vistaEstandar.scrollTop < 4500) || ($(window).width() > 1700 && document.documentElement.scrollTop > 3888 && document.documentElement.scrollTop < 4500)) {           

                    if ( $('#section6').attr('data-img') != 'images/estandar/monitorEstandarEntrada.gif') {
                        ++v;
                        $('#section6').attr('data-img', 'images/estandar/monitorEstandarEntrada.gif');
                        $('#section6').css('background', 'url(images/estandar/monitorEstandarEntrada.gif?v='+v+')');
                        $('#section6').css('background-size', 'cover');
                        $('#section6').css('background-position', 'bottom');
                    }

            }
            else if (($(window).width() > 1700 && vistaEstandar.scrollTop >= 4499 && vistaEstandar.scrollTop < 5171) || ($(window).width() > 1700 && document.documentElement.scrollTop >= 4499 && document.documentElement.scrollTop < 5171)) {    

                    if ( $('#section6').attr('data-img') != 'images/estandar/monitorEstandarSalida.gif') {
                        ++v;
                        $('#section6').attr('data-img', 'images/estandar/monitorEstandarSalida.gif');
                        $('#section6').css('background', 'url(images/estandar/monitorEstandarSalida.gif?v='+v+')');
                        $('#section6').css('background-size', 'cover');
                        $('#section6').css('background-position', 'bottom');
                    } 
            }
            else
            {
                $('#section6').css('background', 'none');
            } 

Aquí les dejo un fiddle con el problema que tenía y otro con la solucion

Nótese que la respuesta a este problema se le acredita al usuario SteinB

0

La solución más común suele ser tener dos .gif, uno animado y otro no e intercambiar uno por otro, aunque yo lo veo bastante cutre. Otra opción es que pintes cada fotograma del .gif en un canvas a modo de sprite sheet, de este modo tendrías control total sobre la animación.

1
  • no me importa tener dos gif porque el gif solo hace la animacion una vez. El problema es... que entra el gif 1 y funciona bien, luego lo cambio por el gif 2 y este funciona bien... cuando hago scroll hacia arriba y lo vuelvo a cambiar por el gif 1.... me aparece ya terminado (el ultimo fotograma). Es decir, la animacion no se reinicia
    – Caro
    Commented el 27 jul. 2016 a las 13:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.