我用ScrollMgic创建了一个简单的动画:在水平滚动页面时旋转。问题是,当滚动窗口页面时,动画显得平滑,而当滚动元素所在的div时,动画非常“混蛋”。我想隐藏窗口滚动只留下div滚动,保持动画smoth。有谁知道为什么以及如何解决这个问题?谢谢!
HTML代码:
HTML
<div class="scrollcontainer">
<div id="scrolldiv" class="scrolldiv">
<div class="weel">
<img id="weel" src="weel.png" alt="">
</div>
</div>
<div id="trigger">
</div>
</div>
CSS
body {
}
.weel img {
width: 100px;
}
#scrolldiv {
height: 500px;
width: 5000px;
background: url(bgterritorio.jpg);
position: relative;
}
.scrollcontainer {
overflow-x: scroll;
white-space: nowrap;
position: relative;
}
JAVASCRIPT
var controller = new ScrollMagic.Controller({vertical: false});
var tween = TweenMax.to("#weel", 1, {rotation: 1080, ease: Linear.easeNone});
var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 5000})
.setTween(tween)
.setPin("#weel", {pushFollowers: false})
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
解决了!有必要告诉ScrollMagic引用动画的容器。在我的情况下,我只是添加:
container: '.scrollcontainer'
到控制器对象