【发布时间】：2015-01-14 17:29:30
【问题描述】：
我正在尝试制作一个伪视差网站。我正在使用 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>
【问题讨论】：
标签： javascript jquery html css scrollmagic