1

我正在尝试制作一个伪视差网站。我正在使用 Scrollmagic jquery 插件。我的背景动画工作正常，但我遇到了第一个文本框（位于灰色栏中）的问题。我将它设置为从 opacity:1 开始并在 opacity:0 之间进行补间。当我加载页面时，div 容器似乎已经将不透明度设置为 0.5。我究竟做错了什么？我尝试将 TweenMax.to 中的持续时间调整为 0.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>
4

1 回答 1

1

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

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

然后在第 27 行还有另一个问题，它指出，scene未定义。从 ScrollMagic 示例之一复制时，未设置变量，我假设是 C&P 错误。

解决这两个问题后，我们实际上可以看到指标了，除了最开始的那个，因为它是绿色的。
幸运的是我们可以改变颜色。

一旦这些问题得到解决，我们就开始着手解决实际问题。

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

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

这将使我们留在这个已解决的版本：http ://codepen.io/janpaepke/pen/WbpMOO

我建议您查看ScrollMagic 场景操作示例，以更好地了解哪些场景参数会导致哪些结果。

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

希望这会有所帮助，
J

于 2015-01-15T09:54:20.467 回答