javascript - 没有滚动的视差/肯燃烧效果

Question

好吧，我正在对图像应用视差/ken burns 效果，但我不相信我用来执行此操作的方法有那么好。它在 webkit 浏览器上运行良好，但在 firefox 上不是很流畅，在 IE 中根本无法运行

这很简单，我在 div 中有一个背景图像，在窗口加载时，我应用了一个名为 pan 的类来更改背景位置。

有没有人有任何想法来实现这种平滑且平移良好的效果。

这是网站 http://dev.touch-akl.com/xmas/

#banner{
  background-size: 100%;  
  background-attachment: fixed;
  background-repeat:no-repeat;
  background-position:0 0;
  padding-top:35.15625%;
  -o-transition-duration: 10s;
  -ms-transition-duration: 10s;
  -moz-transition-duration: 10s;
  -webkit-transition-duration: 10s;      
  }

有一次我什至在 .pan 类上有一个小规模，它在 chrome 上看起来不错但在 firefox 上更差

  #banner.pan{
    background-position:0 160%;   
  }

Answer 1

这是ken burn效果的免费插件，您可以下载

这里是 demo