疑似視差サイトを作ろうとしています。Scrollmagic jquery プラグインを使用しています。バックグラウンド アニメーションは正常に動作していますが、最初のテキスト ボックス (灰色のバーにある) に問題があります。opacity:1 から開始し、tween を opacity:0 に設定しました。ページを読み込むと、div コンテナーの不透明度が既に .5 に設定されているようです。私は何を間違っていますか？TweenMax.to のデュレーションを .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>