Question

我试图暂停一段时间。滚动一点后，图片（第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>

Answer 1

如果仅使用第一个图像作为引脚目标，则仅固定第一个图像。（杜）
这会导致第二个图像被向下推，直到引脚完成。

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

希望这会有所帮助，
Ĵ

ScrollMagic Pin并揭示问题

1 个答案: