Problema con efecto parallax

[Mariano_Floyd]

Buenas, estoy creando una web que tiene un efecto parallax, entre dos secciones. Es exactamente igual al de esta web : http://www.vacationequalityproject.com/
Mi problema consiste, en que para lograr dicho efecto, muevo las dos secciones con la propiedad transform: translateY de css y algunas transiciones, pero al llegar al fin del contenido del html, me queda una pantalla en blanco, que pienso es producto de mover el contenido hacia arriba. Mi pregunta es, como puedo lograr que no me quede dicho espacio? Mi codigo js es el siguiente:

Código Javascript:

$(window).scroll(function(){
 
            parallax();
 
            });
 
            function parallax(){
            var fin = $(document).height();
            var winheight = $(window).height();
            var movimiento = $(window).scrollTop();
    
                $('.video-wrapper').css('transform','translateY('+ (-(movimiento*0.75)) + 'px) translateZ(0px)');
                $('.contenido').css('transform','translateY('+ (-(movimiento*1.5)) + 'px)  translateZ(0px)');
            
            
        }
 

Saludos.

[juangemelo01]

Hola, no eh practicado aun el efecto parallax, pero por lo que eh leido, tienes que ajustar el alto de tu contenedor = a la suma de las alturas de tu elementos que estaran en parallax, asi cuando llegues al final no tendras ese desborde, ya que el fondo blanco significa que tu contenedor es mas grande que tu contenido dentro de el.

[Mariano_Floyd]

Hola, el problema no es el alto, tengo el documento con la altura al 100%. Me fije en la web que puse como guía y tiene el css tal cual lo tengo yo, así que el problema tiene que ser algún calculo o función del scroll en js.

[AlejandroGalvez]

Veo que has hecho un copy & paste algo malo de un ejemplo que habrás encontrado. Tienes una variable que no utilizas (var fin). Por cierto utilizas transformaciones en 3D de CSS3 (veo translateZ()), las cuales no son muy recomendadas aun pues hay navegadores (IE hasta versiones muy recientes) y algunos navegadores móviles que no las soportan para nada. Tu problema es que ese código está pensado para que funcione SOLO con elementos que estén situados arriba del todo del documento, en la posición 0 respecto a scrollTop().

Te dejo un ejemplo mio de Parallax con una pequeña guía:

http://optimaldevs.com/wp-alex/efect...-css-y-jquery/

Es bastante sencillo y dado que no tengo mucho más que aportar pues ahí dejo mi conocimiento escrito.

Saludos.