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

Question

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

代码笔可在此处获得：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&P 错误。

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

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

既然我们看到了场景指示器，那么发生的事情应该会变得相当明显。
场景的 triggerHook 设置为 "onEnter" 和 globalSceneOptions，并相应地位于视口的底部。
场景的triggerElement设置为"#parallax1"，这是主要的部分，使其位置在页面顶部。
所以从一开始触发器就已经超过了场景的开始位置。
并且因为场景的持续时间是 window 高度的 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

希望这对您有所帮助，
J

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

Tweening opacity of text box with Scrollmagic

html

javascript

css

jquery

scrollmagic