我正在尝试制作一个伪视差网站。我正在使用 Scrollmagic jquery 插件。我的背景动画工作正常，但我在第一个文本框(位于灰色栏中)方面遇到问题。我将其设置为从不透明度:1 开始，然后调整到不透明度:0。当我加载页面时，div 容器似乎已经将不透明度设置为 0.5。我究竟做错了什么？我尝试将 TweenMax.to 中的持续时间调整为 0.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 错误。
解决这两个问题后，我们实际上可以看到指标了，除了起始指标，因为它是绿上绿的。
幸运的是我们可以改变颜色。
一旦这些issues are resolved我们准备开始解决实际问题。
现在我们看到了场景指示器，发生的事情应该变得相当明显。
场景的 triggerHook 通过 globalSceneOptions 设置为 "onEnter"，并相应地位于视口(viewport)的底部。
场景的 triggerElement 设置为 "#parallax1"，这是主要部分，这使其位置位于页面顶部。
因此从一开始触发器就已经超过了场景的开始位置。
而且由于场景的持续时间是窗口高度的 2 倍，这种情况(在底部触发，从顶部开始)会导致场景在加载时恰好达到 50% 的播放速度。
解决这个问题就像更改相关场景的triggerHook一样简单。
通过将其设置为“onLeave”(或0)，场景的triggerHook将移动到顶部。
请记住，这需要在将场景添加到 Controller 之后完成，因为否则它将被覆盖，如文档中所述。
这将使我们得到这个已解决的版本:http://codepen.io/janpaepke/pen/WbpMOO
我建议您看看 ScrollMagic scene manipulation example更好地了解哪些场景参数将导致哪种结果。
对于 future 的问题，我还强烈建议遵循本指南:https://github.com/janpaepke/ScrollMagic/blob/master/CONTRIBUTING.md
希望这有帮助，
J
关于javascript - 使用 Scrollmagic 补间文本框的不透明度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27948912/