Estoy desarrollando una web con scroll vertical y horizontal. Me gustaría desplazarme horizontalmente cuando bajo la rueda del mouse. Lo he logrado con ScrollMagic y GSAP (TimelineMax).
Pero cuando cambio el tamaño de la ventana (window.resize), necesito actualizar las variables que contienen la cantidad de píxeles que tengo que desplazar hacia la derecha o izquierda.
Cuando se carga la web, hago una serie de cálculos para saber cuántos píxeles tengo que desplazar hacia la derecha (var amount_to_scroll):
function calculateCarruselDimensions() {
var total_width = 0;
var total_global_width = 0;
var amount_to_scroll = 0;
$('.carrusel').find('.carrusel_item').each(function() {
_this = $(this);
_this.css('width', _this.find('img').width() + 'px');
console.log(_this.find('img').width());
total_width += _this.find('img').width();
//console.log( _this.attr('id') + '=' + total_width );
});
total_global_width = total_width;
$('.carrusel').find('.panel').css('width', total_global_width + 'px');
amount_to_scroll = total_global_width - $(window).width();
return amount_to_scroll;
}
$(window).on("load", function() {
if ($('.carrusel').length) {
var controller = new ScrollMagic.Controller();
var horizontalSlide = new TimelineMax();
$('.carrusel').imagesLoaded(function() {
amount_to_scroll = calculateCarruselDimensions();
console.log(amount_to_scroll);
horizontalSlide.fromTo("#slideContainer", 10,
{
x: "0"
}, {
x: amount_to_scroll * (-1) + 'px',
ease: Linear.easeNone,
});
scene = new ScrollMagic.Scene({
triggerElement: "#slideWrapper",
triggerHook: "onLeave",
duration: amount_to_scroll + 'px' }).
setPin("#slideWrapper").
setTween(horizontalSlide).
addTo(controller);
});
}
});
Ahora, cuando el tamaño de la ventana cambia, he hecho esto:
$(window).bind("resize", function() {
amount_to_scroll = calculateCarruselDimensions();
//console.log(amount_to_scroll);
scene.duration(amount_to_scroll + 'px');
});
Actualizo la variable scene de ScrollMagic, pero también necesito actualizar la coordenada x de la variable horizontalSlide (TimelineMax.fromTo). Concretamente, esta línea de código:
x: amount_to_scroll * (-1) + 'px',
Aquí tenéis el código funcionando en un Pen (enlace)
No tengo idea de cómo puedo lograrlo. He buscado en internet, pero no he encontrado nada :(
¿Alguien puede mostrarme el camino, por favor?
¡¡Gracias!!