Question

我正在开发一个具有垂直和水平滚动的网站。向下滑动鼠标滚轮时，我想水平滚动。我已经通过ScrollMagic和GSAP（TimelineMax）实现了这一目标。但是，当我调整窗口大小时，我需要更新变量，其中包含必须向右滚动的像素数。

当窗口加载时，我进行了一系列计算，以知道必须向右滚动多少像素（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);
        });
    }
});

现在，当我调整窗口大小时，我已经做到了：

$(window).bind("resize", function() {
    amount_to_scroll = calculateCarruselDimensions();
    //console.log(amount_to_scroll);
    scene.duration(amount_to_scroll + 'px');
});

这是您可以在其中查看代码（link）的钢笔

我更新了场景，但是我需要从To更新TimelineMax的x坐标

x: amount_to_scroll * (-1) + 'px',

我不知道如何实现这一目标。我搜索了互联网，没有找到：（

任何人都可以给我指路吗？

谢谢！

Answer 1

最后，在GreenSock论坛中为我提供了解决方案。

如果将来有人遇到类似于我的问题，我会在此处发布链接。

解决方案：link to the GreenSock forums

基本上，您要做的是销毁场景，然后使用补间“内部”再次构建场景。

如何在调整窗口大小时更新TimelineMax的fromVars / toVars值？

1 个答案: