滚动魔法持续时间答案

【问题标题】：Scrollmagic duration滚动魔法持续时间
【发布时间】：2016-09-01 10:01:20
【问题描述】：

有没有办法将场景的滚动魔法持续时间设置为与场景的高度一样长？我想使用类切换功能并且某些场景高于视口高度。

<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 为单位的持续时间：{duration: 400}

vh 中的持续时间：{duration: '100%'}

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

感谢您的帮助！

【问题讨论】：

尽量不要在 html 中多次使用 id。在这种情况下，您应该使用类而不是 id。

标签： scrollmagic

【解决方案1】：

尝试在持续时间选项中使用 $("#sec1").height()。

【讨论】：

这只有在 id 被使用一次时才有效。这种情况看起来需要一个循环，或者 3 个不同的场景。

【解决方案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.

【讨论】：