ScrollMagic Pin 和显示问题答案

【问题标题】：ScrollMagic Pin and reveal issueScrollMagic Pin 和显示问题
【发布时间】：2014-09-22 15:26:39
【问题描述】：

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

【问题讨论】：

标签： jquery scrollmagic

【解决方案1】：

如果您只使用第一张图片作为固定目标，则只会固定第一张图片。（呃）
这会导致第二个图像被下推，直到 pin 完成。

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

希望这会有所帮助，
J

【讨论】：