Scrollmagic持续时间

Question

有没有办法在场景中设置可滚动的持续时间，只要场景的高度？我想使用类切换功能，某些场景比视口高度更高。

<section id="sec1">I'm 400px in height</section>
<section id="sec1">I'm 100% in height (1 viewport)</section>
<section id="sec1">I'm 2500px in height (2,2 viewports)</section>

px的持续时间：{持续时间：400}

持续时间vh：{持续时间：＆＃39; 100％＆＃39;}

元素高度的持续时间：???

感谢您的帮助！

Answer 1

尝试在持续时间选项中使用$（“＃sec1”）。height（）。

Answer 2

要将持续时间设为场景的高度，您需要找到项目的高度，然后将其应用于持续时间。

看到所有场景都是各个部分，就可以遍历所有部分。

(function() {
let controller = new ScrollMagic.Controller();

// Run through all sections
let items = document.querySelectorAll("section");

items.forEach(function(element, index) {
    let height = element.clientHeight; //height of current element
    let scene = new ScrollMagic.Scene({
        duration: height
        //Other scene options go here
    })
        .on("leave enter", function() {
            //Element instructions
        })
        .addTo(controller);
});

注意：除非目标是为每个部分赋予自己的ID，否则我将ID更改为您的部分中的类，因为页面上的ID仅应在页面上出现一次，而类可以被多次使用。

An example of this in use。