Scrollmagic：動畫內容在視差部分內的問題

我正在嘗試視差和scrollmagic。在scrollmagic demo的視差示例中，我試圖在第一視差部分中動畫內容。Scrollmagic：動畫內容在視差部分內的問題

我不能得到letter A在#box移動我想要它。我曾嘗試添加一個邊界框並將其用作triggerElement，但這並不奏效。

在scrolldown上它應該向下移動150px並淡出。現在它使用"#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 ---------------------------------------------->>

來源

2015-06-14 Agent Zebra

您正在尋找這樣的事情： [[鏈接]（http://jsfiddle.net/tahirahmed/pg33x29f/）] –

接近這一點，我希望'A'在頁面上仍然可見時進入'不透明度0'。 –

嘗試使用分別在「TweenMax.set」和第一個「新ScrollMagic.Scene（{...}）」行中設置的'y'＆'yPercent'值進行播放。將'y'設置爲'250'並將'yPercent'設置爲'200'。這是一個醜陋/黑客的解決方案，我對ScrollMagic的理解顯然在這裏。我確信必須有一個更清潔和適當的方式來做到這一點，但我不確定究竟如何。 –

也許你可以使用一個元素相對＃parallax1的位置是放在（例如）爲20px＃parallax1底部上方，並使用它作爲一個觸發

來源

2015-06-24 11:26:41

Scrollmagic：動畫內容在視差部分內的問題

回答

相關問題