3

視差とスクロールマジックを試しています。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  ---------------------------------------------->>
4

1 に答える 1

2

たぶん、#parallax1 の下部から 20px 上に配置された #parallax1 の相対的な位置を持つ要素を使用して、それをトリガーとして使用することができます

于 2015-06-24T11:26:41.217 に答える