带有与div相关的scrollmagic的pin元素

问题描述 投票:0回答:1

我用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
1个回答
0
投票

解决了!有必要告诉ScrollMagic引用动画的容器。在我的情况下,我只是添加:

container: '.scrollcontainer'

到控制器对象

© www.soinside.com 2019 - 2024. All rights reserved.