如何使用jQuery(通过滚动或触发动画)为PNG序列设置动画效果

Question

越来越多我看到一个效果,其中pngs被加载到一系列DIV(或一个div)中,然后逐帧排序,或者基于按钮点击或基于滚动.我试图查看代码,我知道javascript正在做繁重的工作,但我仍然有点迷失,有没有关于这种技术的教程？例子？

动画的例子(多个div) http://atanaiplus.cz/index_en.html:

动画的例子(一个div):http: //www.hyundai-veloster.eu/

滚动动画的示例:http: //discover.store.sony.com/tablet/#design/ergonomics

Answer 1

您只想使用setInterval计时器替换src属性

var myAnim = setInterval(function(){
  $(".myImageHolder").attr('src', nextImage);
}, 42);

诀窍是你如何生成nextImage.这在很大程度上取决于图像的命名约定,或者您希望动画运行的方向

更新

或者使用插件