3

我正在尝试暂停图片一段时间。滚动一点后，图片（第 1 部分）应该会淡出并显示底层图片。经过更多滚动后，两者都应该滚动出去。

我正在使用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)
这会导致第二个图像被向下推，直到 pin 完成。

为了实现您描述的效果，您需要固定两个图像的容器（在您的情况下为部分）。然后按照您的预期淡出图像。确保将第一个图像设置为position: absolute并提升 z-index。

希望这会有所帮助，
J

于 2014-10-06T13:53:31.160 回答