0
我有一系列彩色DIV,当您向下滚动页面时,我试图淡入淡出。SuperScrollOrama和TweenMax淡入淡出滚动
我对div的设置很简单:
<div class="wrapper">
<div id="content" class="clearfix">
<div class="box alpha"></div>
<div class="box beta"></div>
<div class="box gamma last"></div>
<div class="box delta"></div>
<div class="box epsilon"></div>
<div class="box zeta last"></div>
</div>
</div>
这里是我的superscrollorama/tweenmax脚本:
var controller = $.superscrollorama();
controller.addTween('.box.alpha', TweenMax.from($('.box.alpha'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 400);
controller.addTween('.box.alpha', TweenMax.to($('.box.alpha'), 1, {css:{opacity: .2}}), 1600);
controller.addTween('.box.beta', TweenMax.from($('.box.beta'), 1, {css:{opacity: .2}}), 1600);
controller.addTween('.box.beta', TweenMax.to($('.box.beta'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 2400);
controller.addTween('.box.gamma', TweenMax.from($('.box.gamma'), 1, {css:{opacity: .2}}), 2400);
controller.addTween('.box.gamma', TweenMax.to($('.box.gamma'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 3200);
controller.addTween('.box.delta', TweenMax.from($('.box.delta'), 1, {css:{opacity: .2}}), 3200);
controller.addTween('.box.delta', TweenMax.to($('.box.delta'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 4000);
controller.addTween('.box.epsilon', TweenMax.from($('.box.epsilon'), 1, {css:{opacity: .2}}), 4000);
controller.addTween('.box.epsilon', TweenMax.to($('.box.epsilon'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 4800);
controller.addTween('.box.zeta', TweenMax.from($('.box.zeta'), 1, {css:{opacity: .2}}), 4800);
controller.addTween('.box.zeta', TweenMax.to($('.box.zeta'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 5600);
一切都消失在你向下滚动页面,但我希望有一个框当下一个盒子淡入淡出时,我可能做错了,但我找不到很多文档。
下面是我在做什么:http://emptywalrus.com/scroll/