滚动魔术双倍每个面板擦除动画动态

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);
});