Scrollmagic：视差部分内的动画内容问题答案

【问题标题】：Scrollmagic: issue with animating content inside parallax sectionsScrollmagic：视差部分内的动画内容问题
【发布时间】：2015-06-14 05:52:46
【问题描述】：

我正在试验视差和滚动魔法。在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  ---------------------------------------------->>

【问题讨论】：

您是否在寻找类似的东西：[Link]？
接近那个，我希望A 在页面上仍然可见时转到opacity 0。
尝试分别在TweenMax.set 和第一个new ScrollMagic.Scene({ ... }) 行中设置y 和yPercent 值，例如将y 设置为250 并将yPercent 设置为200。这是一个丑陋 / hack-y 的解决方案，我对 ScrollMagic 的理解不足显然在这里起作用。我确信必须有一种更清洁、更正确的方法来做到这一点，但我不确定具体如何。

标签： javascript gsap scrollmagic

【解决方案1】：

也许您可以使用相对位置为 #parallax1 的元素，该元素位于（例如）#parallax1 底部上方 20px 的位置，并将其用作触发器

【讨论】：