javascript - Scrollmagic:视差部分内的动画内容问题

Question

我正在试验视差和滚动魔法。在 scrollmagic demo 的视差示例中我正在尝试在第一个视差部分中制作动画内容。

这是 a fiddle of my experiment .

我无法让 #box 中的 letter A 移动我想要的方式。我曾尝试添加一个边界框并将其用作 triggerElement，但没有用。

向下滚动时，它应该向下移动 150 像素并淡出。现在它使用 "#parallax1" 作为它的 triggerElement 并且一旦到达该部分的底部就会淡出。我希望它在该部分的底部之前淡出。我怎样才能做到这一点？

我做错了什么？

//////////////////////////////////////////////////////
////////////   //// Parallax Animation    ////////////
//////////////////////////////////////////////////////

// init controller
var controller = new ScrollMagic.Controller({
    globalSceneOptions: {
        triggerHook: "onEnter",
        duration: "200%"
    }
});

// build scenes
// build tween1
var tween1 = new TimelineMax();
tween1.to("#parallax1 > div", 1, {
    y: "80%",
    ease: Linear.easeNone
});

var scene = new ScrollMagic.Scene({
    triggerElement: "#parallax1"
})
    .setTween(tween1)
    .addIndicators()
    .addTo(controller);

new ScrollMagic.Scene({
    triggerElement: "#parallax1"
})
    .setTween("#box", 0.10, {
    alpha: 0,
    yPercent: 0,
    y: "800%",
    ease: Linear.easeNone
})
    .addIndicators()
    .addTo(controller);

new ScrollMagic.Scene({
    triggerElement: "#parallax2"
})
    .setTween("#parallax2 > div", {
    y: "80%",
    ease: Linear.easeNone
})
    .addIndicators()
    .addTo(controller);

new ScrollMagic.Scene({
    triggerElement: "#parallax3"
})
    .setTween("#parallax3 > div", {
    y: "80%",
    ease: Linear.easeNone
})
    .addIndicators()
    .addTo(controller);

/////----  End Parallax Animation  ---------------------------------------------->>

Answer 1

也许你可以使用一个位置相对于#parallax1 的元素，将(示例)放在#parallax1 底部上方 20px 处，并将其用作触发器