我正在尝试制作伪视差站点。我正在使用Scrollmagic jquery插件。我的背景动画运行正常，但是第一个文本框（位于灰色栏中）存在问题。我将其设置为从opacity：1开始并补间到opacity：0。当我加载页面时，div容器似乎已经将不透明度设置为.5。我究竟做错了什么？我尝试将TweenMax ..中的持续时间调整为.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和"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
希望这可以帮助，
Ĵ
关于javascript - Scrollmagic补间文本框的不透明度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27948912/