3

写真を一時停止しようとしています。少しスクロールすると、画像 (part1) がフェードアウトし、下にある画像が表示されます。さらにスクロールすると、両方ともスクロールアウトするはずです。

http://janpaepke.github.io/ScrollMagicを使用していますが、ピン留めとアニメーションの組み合わせが機能しません。

<body>
<script>
    var controller;
    $(document).ready(function($) {     
        controller = new ScrollMagic();
    });
</script>

<div id="trigger1"></div>
<section>   
    <img id="part1" src="img/part1.jpg" height="950" width="" />
    <img id="part2" src="img/part1.jpg" height="950" width="" />
</section>

<div class="spacer s10"></div>
<div id="trigger2"></dv>

<script>
    $(document).ready(function($) {

        var scene = new ScrollScene({triggerElement: "#trigger1", duration: 1600})
                        .setPin("#part1")
                        .addTo(controller);

        var scene = new ScrollScene({triggerElement: "#trigger2"})
                        .setTween(TweenMax.to("#part1", 2, {opacity: 0}))
                        .addTo(controller);

        // show indicators (requires debug extension)
        scene.addIndicators();
    });
</script>
</body>
4

1 に答える 1

2

最初の画像のみを固定ターゲットとして使用すると、最初の画像のみが固定されます。(duh)
これにより、ピンが完了するまで 2 番目の画像が押し下げられます。

説明した効果を実現するには、両方の画像のコンテナー (この場合はセクション) を固定する必要があります。次に、期待どおりに画像をフェードアウトします。最初の画像を として設定しposition: absolute、z-index を上げてください。

これが役に立てば幸いです、
J

于 2014-10-06T13:53:31.160 に答える