視差とスクロールマジックを試しています。scrollmagic デモの視差の例では、最初の視差セクションでコンテンツをアニメーション化しようとしています。
これが私の実験のフィドルです。
思い通りに動けletter A
ない。#box
バウンディング ボックスを追加して、それを triggerElement として使用しようとしましたが、うまくいきませんでした。
スクロールダウンすると、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 ---------------------------------------------->>