使用滚动魔术的文本框的补间不透明度

Tweening opacity of text box with Scrollmagic

本文关键字：不透明度 文本 滚动 魔术      更新时间：2023-09-26

我正在尝试制作一个伪视差网站。我正在使用Scrollmagic jquery插件。我的背景动画工作正常，但是第一个文本框（位于灰色条中）出现问题。我将其设置为从不透明度：1 开始，补间开始到不透明度：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>

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

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

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

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

一旦这些问题得到解决，我们就可以开始处理实际问题了。

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

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

这将让我们看到这个已解决的版本：http://codepen.io/janpaepke/pen/WbpMOO

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

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

希望这有帮助，
J

相关文章：