Question

我正在尝试制作一个伪视差网站。我正在使用Scrollmagic jquery插件。我的背景动画工作正常，但我遇到第一个文本框（生活在灰色栏中）的问题。我将它设置为以不透明度开始：1和补间到不透明度：0。当我加载页面时，div容器似乎已将不透明度设置为.5。我究竟做错了什么？我已经尝试将TweenMax.to中的持续时间调整为.5而且我发现.text-background如何补间没有区别。

此处可以使用codepen：http://codepen.io/anon/pen/vExZPR

谢谢。

    <body>
        <div id="container">
            <div id="parallax1">
                <div style="background-image: url('img/evcbg1.jpg');">
                    <div id="parallax1_content">
                        <div class="text-background"><h1>We offer a full line of EPA approved enclosed combustors that meet the ever-changing<br>requirements of today’s regulation-filled oil and gas industry.</h1></div>
                    </div>
                </div>
            </div>
            <div class="content_box">
                <h2>Are you in compliance with the latest EPA tank emission regulations?</h2>
                <p>...</p>
            </div>
            <div id="parallax2">
                <div style="background-image: url('img/clouds.jpg')"></div>
            </div>
            <div class="content_box">
                <h2>Are you in compliance with the latest EPA tank emission regulations?</h2>
                <p>...</p>
            </div>
            <div id="parallax3">
                <div style="background-image: url('img/clouds.jpg')"></div>
            </div>
            <div class="content_box">
                <h2>Are you in compliance with the latest EPA tank emission regulations?</h2>
                <p>...</p>
            </div>
            <div class="content_box">
                <h2>Are you in compliance with the latest EPA tank emission regulations?</h2>
                <p>...</p>
            </div>
            <div class="content_box">
                <h2>Are you in compliance with the latest EPA tank emission regulations?</h2>
                <p>...</p>
            </div>
        </div>

         <script>
            $(document).ready(function(){
                //initialize the controller
                var controller = new ScrollMagic({globalSceneOptions: {triggerHook: "onEnter", duration: $(window).height()*2}});

                //build scenes
                new ScrollScene({triggerElement: "#parallax1"})
                    .setTween(TweenMax.to(".text-background", .1, {opacity: "0", ease: Linear.easeNone}))
                    .addTo(controller)
                    .addIndicators({zindex: 1, suffix: "1"});

                new ScrollScene({triggerElement: "#parallax1"})
                    .setTween(TweenMax.from("#parallax1 > div", 1, {top: "-80%", ease: Linear.easeNone}))
                    .addTo(controller)
                    .addIndicators({zindex: 1, suffix: "1.BG"});

                new ScrollScene({triggerElement: "#parallax2"})
                    .setTween(TweenMax.from("#parallax2 > div", 1, {top: "-80%", ease: Linear.easeNone}))
                    .addTo(controller)
                    .addIndicators({zindex: 999, suffix: "2"});

                new ScrollScene({triggerElement: "#parallax3"})
                    .setTween(TweenMax.from("#parallax3 > div", 1, {top: "-80%", ease: Linear.easeNone}))
                    .addTo(controller)
                    .addIndicators({zindex: 999, suffix: "3"});

                // show indicators (requires debug extension)
                    scene.addIndicators();
            });


         </script>

    </body>

Answer 1

几点说明：
始终确保您的控制台干净。如果那里有东西，那可能意味着你做错了什么。但不用担心，它也为你提供了如何解决它的重要指示。

在你的笔上，当你在控制台中查看时，你会很快发现第9行出现问题，你可以在其中调用“setIndicators”。这是因为您忘记包含ScrollMagic调试扩展。

然后第27行还有另一个问题，即scene未定义。当从其中一个ScrollMagic示例复制时，该变量未设置且我假设是C＆amp; P错误。

在解决了这两个问题之后，我们实际上可以看到指示灯，除了起始指示灯，因为它是绿色的绿色。
幸运的是，我们可以改变颜色。

一旦这些issues are resolved我们开始处理实际问题。

现在我们看到了现场指标，它应该变得相当明显发生了什么场景triggerHook设置为"onEnter" globalSceneOptions，因此位于视口底部。
场景的triggerElement设置为"#parallax1"，这是主要部分，使其位置在页面顶部。
因此，从一开始，触发器就已经超过了场景的起始位置并且因为场景的持续时间是窗口高度的2倍，所以这种情况（从底部触发，从顶部开始）导致场景在加载时完全达到50％。

解决此问题就像更改相关场景的triggerHook一样简单。
通过将其设置为"onLeave"（或0），场景的triggerHook将移至顶部。
请记住，这需要在将场景添加到控制器之后完成，因为否则会被覆盖，如文档中所述。

这将使我们处于此已解决的版本：http://codepen.io/janpaepke/pen/WbpMOO

我建议您查看ScrollMagic scene manipulation example，以便更好地了解哪些场景参数会产生哪种结果。

对于未来的问题，我还强烈建议您遵循本指南：https://github.com/janpaepke/ScrollMagic/blob/master/CONTRIBUTING.md

希望这会有所帮助，
Ĵ

使用Scrollmagic补间文本框的不透明度

1 个答案: