问题描述
我想要具有这样的图像序列的基于滚动的动画：
当访问上面的链接时，向下滚动时请参阅第3节，海滩图像从白天移到晚上。该动画似乎滚动流畅。我的动画在本地平滑滚动，当我在服务器上放置相同的代码时，图像在滚动时断断续续。在滚动条上无法顺利工作。那我现在该怎么办？请帮助我.....在此先谢谢....下面是我的代码....
path// define images
var images = [
"imgs/0001/0001-compress2.jpg","imgs/0001/0002-compress2.jpg","imgs/0001/0003-compress2.jpg","imgs/0001/0004-compress2.jpg","imgs/0001/0005-compress2.jpg","imgs/0001/0006-compress2.jpg","imgs/0001/0007-compress2.jpg","imgs/0001/0008-compress2.jpg","imgs/0001/0009-compress2.jpg","imgs/0001/0010-compress2.jpg","imgs/0001/0011-compress2.jpg","imgs/0001/0012-compress2.jpg","imgs/0001/0013-compress2.jpg","imgs/0001/0014-compress2.jpg","imgs/0001/0015-compress2.jpg","imgs/0001/0016-compress2.jpg","imgs/0001/0017-compress2.jpg","imgs/0001/0018-compress2.jpg","imgs/0001/0019-compress2.jpg","imgs/0001/0020-compress2.jpg","imgs/0001/0021-compress2.jpg","imgs/0001/0022-compress2.jpg","imgs/0001/0023-compress2.jpg","imgs/0001/0024-compress2.jpg","imgs/0001/0025-compress2.jpg","imgs/0001/0026-compress2.jpg","imgs/0001/0027-compress3.jpg","imgs/0001/0028-compress3.jpg","imgs/0001/0029-compress3.jpg","imgs/0001/0030-compress3.jpg","imgs/0001/0031-compress3.jpg","imgs/0001/0032-compress3.jpg","imgs/0001/0033-compress3.jpg","imgs/0001/0034-compress3.jpg","imgs/0001/0035-compress3.jpg","imgs/0001/0036-compress3.jpg","imgs/0001/0037-compress3.jpg","imgs/0001/0038-compress3.jpg","imgs/0001/0039-compress3.jpg","imgs/0001/0040-compress3.jpg","imgs/0001/0041-compress3.jpg","imgs/0001/0042-compress3.jpg","imgs/0001/0043-compress3.jpg","imgs/0001/0044-compress3.jpg","imgs/0001/0045-compress3.jpg","imgs/0001/0046-compress3.jpg","imgs/0001/0047-compress3.jpg","imgs/0001/0048-compress3.jpg","imgs/0001/0049-compress3.jpg","imgs/0001/0050-compress3.jpg","imgs/0001/0051-compress3.jpg","imgs/0001/0052-compress3.jpg","imgs/0001/0053-compress3.jpg","imgs/0001/0054-compress3.jpg","imgs/0001/0055-compress3.jpg","imgs/0001/0056-compress3.jpg","imgs/0001/0057-compress3.jpg","imgs/0001/0058-compress3.jpg","imgs/0001/0059-compress3.jpg","imgs/0001/0060-compress3.jpg","imgs/0001/0061-compress3.jpg","imgs/0001/0062-compress3.jpg","imgs/0001/0063-compress3.jpg","imgs/0001/0064-compress3.jpg","imgs/0001/0065-compress3.jpg","imgs/0001/0066-compress3.jpg","imgs/0001/0067-compress3.jpg","imgs/0001/0068-compress3.jpg","imgs/0001/0069-compress2.jpg","imgs/0001/0070-compress3.jpg","imgs/0001/0071-compress3.jpg","imgs/0001/0072-compress2.jpg","imgs/0001/0073-compress3.jpg","imgs/0001/0074-compress3.jpg","imgs/0001/0075-compress3.jpg","imgs/0001/0076-compress2.jpg","imgs/0001/0077-compress2.jpg","imgs/0001/0078-compress2.jpg","imgs/0001/0079-compress3.jpg","imgs/0001/0080-compress3.jpg"
];
// TweenMax can tween any property of any object. We use this object to cycle through the array
var obj = {curImg: 0};
// create tween
var tween = TweenMax.to(obj,0.5,{
curImg: images.length - 1,// animate propery curImg to number of images
roundProps: "curImg",// only integers so it can be used as an array index
repeat: 0,// repeat 3 times
immediateRender: true,// load first image automatically
ease: Linear.easeNone,// show every image the same amount of time
onUpdate: function () {
$("#myimg").attr("src",images[obj.curImg]); // set the image source
}
}
);
// init controller
var controller = new ScrollMagic.Controller();
// build scene
var scene = new ScrollMagic.Scene({triggerElement: "#trigger",duration: 800})
.setTween(tween)
.addTo(controller);
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）