parallax / ken烧伤效果无滚动

时间:2013-07-24 04:30:50

标签: javascript jquery html5 css3 animation

好的,我正在对图像应用视差/ ken烧伤效果,但我不相信我用来做这个的方法就是那么好。它在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%;   
  }

1 个答案:

答案 0 :(得分:0)

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

这是demo