ScrollMagic将每个面板动态放大两倍动画

Question

确定，我将尽最大努力解释我所面临的问题。我是scrollMagic的新手，但此时我已经完成了两个部分。我的问题是该网站将转换为Wordpress主题，因此我需要使其动态化，因此，如果客户端添加更多幻灯片，它将自动配置js。这是我当前的代码，您可以看到其当前的7张幻灯片，但是我只需要配置6张幻灯片，因为第一个是0索引。我基本上只是做100/6 = 16.66666667％

我需要使它像100 / num = animatePerc这样的自动文件

我不确定如何执行此操作并确保它准确无误。我需要一点帮助，甚至可以尝试一些东西。

这是我的代码：

    $(function () { // wait for document ready
    // init
    var controller = new ScrollMagic.Controller();


    // define movement of panels
    var quickFacts = new TimelineMax()
        // First slide is staged in the center on page load. Second slide triggers it to slide out of window

        // animate to second panel
        .to("#slideContainer", 1, { x: "-16.666666666666667%" })    // move in to first panel

        // animate to third panel
        .to("#slideContainer", 0.5, { delay: 1 })
        .to("#slideContainer", 1, { x: "-33.3333%" })

        // animate to forth panel
        .to("#slideContainer", 0.5, { delay: 1 })
        .to("#slideContainer", 1, { x: "-50%" })

        // animate to fifth panel
        .to("#slideContainer", 0.5, { delay: 1 })
        .to("#slideContainer", 1, { x: "-66.66667%" })

        // animate to sixth panel
        .to("#slideContainer", 0.5, { delay: 1 })
        .to("#slideContainer", 1, { x: "-83.3333%" })

        // animate to seventh panel
        .to("#slideContainer", 0.5, { delay: 1 })
        .to("#slideContainer", 1, { x: "-100%" });



    // create scene to pin and link animation
    new ScrollMagic.Scene({
        triggerElement: "#pinContainer",
        triggerHook: "onLeave",

        duration: $('#content').outerHeight(true),
        reverse: true
    })
        .setPin("#pinContainer")
        .setTween(quickFacts)
        // .addIndicators() // add indicators (requires plugin)
        .addTo(controller);
});

现在打这样的东西，但我不确定如何使x：动态转换。我正在尝试测试宽度和增量：

var numSlides = $("section.quick-facts__panel");
    var i = 0;

    $(numSlides).each(function (index, i) {
        $(this).data('serial', i++);
        var slides = numSlides.length;
        // console.log(slides, index);
        var slideSize = 100 / slides;
        // console.log(slideSize, value);
        var slideCount = slideSize * index;
        slideCount++;
        console.log(slideCount);
        if(index !== 0)
            $(numSlides).width(slideCount);


    });

Answer 1

我能够通过执行以下操作：

    $(function () { // wait for document ready
    // init
    var controller = new ScrollMagic.Controller();

    var numSlides = $("section.quick-facts__panel");
    var slides = numSlides.length;
    // console.log(slides, index);
    var slideSize = 100 / slides;
    // console.log(slideSize, value);
    var slideCount;


    $(numSlides).each(function (index) {
        slideCount = slideSize * index;
        // console.log(slideCount);
        $(this).css("left", slideCount + '%');

    });

    var $panels = $('#slideContainer .quick-facts__panel');
    $panels.not($panels.eq(0)).css('opacity', 0);

    // define movement of panels
    var quickFacts = new TimelineMax();

    $panels.each(function (i, item) {
        if (i === 0 || i === $panels.length) {
            return true;
        }
        quickFacts.to("#slideContainer", 1, { x: (-slideSize * i) + "%" });
        quickFacts.to($panels.eq(i), 0.25, { opacity: 1 }, "-=0.75");
    });
    // First slide is staged in the center on page load. Second slide triggers it to slide out of window

    // create scene to pin and link animation
    new ScrollMagic.Scene({
        triggerElement: "#pinContainer",
        triggerHook: "onLeave",
        duration: $('#content').outerHeight(true),
        reverse: true
    })
        .setPin("#pinContainer")
        .setTween(quickFacts)
        // .addIndicators() // add indicators (requires plugin)
        .addTo(controller);
});