Scrollmagic:视差部分内的动画内容问题
Scrollmagic: issue with animating content inside parallax sections
我正在试验视差和滚动魔法。在 scrollmagic demo 的视差示例中,我试图在第一个视差部分中对内容进行动画处理。
我无法让 #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 ---------------------------------------------->>
也许你可以使用一个位置相对于#parallax1 的元素,将(示例)放在#parallax1 底部上方 20px 处,并将其用作触发器
我正在试验视差和滚动魔法。在 scrollmagic demo 的视差示例中,我试图在第一个视差部分中对内容进行动画处理。
我无法让 #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 ---------------------------------------------->>
也许你可以使用一个位置相对于#parallax1 的元素,将(示例)放在#parallax1 底部上方 20px 处,并将其用作触发器