视差效果与平滑滚动效果

好了干扰，所以我固定由（窗口）把所有的内容了div容器“盒子”，并具有Java调用数据滚动平滑滚动的问题 - 并得到了视差工作在Firefox中通过添加-moz转换而不是仅使用webkit，谢谢ahren -视差效果与平滑滚动效果

我一直在努力重新设计一个网络标签，以产生视差效果。这里是一个链接到什么我迄今所做的：

~~http://www.sasparillarootcoyote.com/parallax_experiment/index2.html~~ （链接不可用）

我gotton视差效果究竟如何我希望它的工作，才发现它在Firefox中完全不起作用。任何人有任何想法，我可以解决这个问题，而不使用完全不同的方法来创建视差效果？

这里的视差脚本 - 我使用jQuery 8.1.3

<script> 

    $(document).ready(function() { 

     $("#box").scroll(function() { 
      s = $("#box").scrollTop(); 
      $("#hideedges").css("-webkit-transform","translateY(" + (s/1) + "px)"); 
      $("#thumb1").css("-webkit-transform","translateY(" + (s/1.6) + "px)"); 
      $("#thumb2").css("-webkit-transform","translateY(" + (s/2) + "px)"); 
      $("#thumb3").css("-webkit-transform","translateY(" + (s/4) + "px)"); 
      $("#thumb4").css("-webkit-transform","translateY(" + (s/24) + "px)"); 
      $("#thumb5").css("-webkit-transform","translateY(" + (s/50) + "px)"); 
      $("#thumb6").css("-webkit-transform","translateY(" + (s/16) + "px)"); 
      $("#thumb7").css("-webkit-transform","translateY(" + (s/24) + "px)"); 
      $("#thumb8").css("-webkit-transform","translateY(" + (s/9) + "px)"); 
      $("#thumb9").css("-webkit-transform","translateY(" + (s/3) + "px)"); 
      $("#thumb10").css("-webkit-transform","translateY(" + (s/44) + "px)"); 
      $("#thumb11").css("-webkit-transform","translateY(" + (s/9) + "px)"); 
      $("#thumb12").css("-webkit-transform","translateY(" + (s/500) + "px)"); 
      $("#thumb13").css("-webkit-transform","translateY(" + (s/24) + "px)"); 
      $("#thumbcolor13").css("-webkit-transform","translateY(" + (s/1.6) + "px)"); 
      $("#thumbcolor1").css("-webkit-transform","translateY(" + (s/2) + "px)"); 
      $("#thumbcolor2").css("-webkit-transform","translateY(" + (s/4) + "px)"); 
      $("#thumbcolor3").css("-webkit-transform","translateY(" + (s/24) + "px)"); 
      $("#thumbcolor4").css("-webkit-transform","translateY(" + (s/50) + "px)"); 
      $("#thumbcolor5").css("-webkit-transform","translateY(" + (s/16) + "px)"); 
      $("#thumbcolor6").css("-webkit-transform","translateY(" + (s/24) + "px)"); 
      $("#thumbcolor7").css("-webkit-transform","translateY(" + (s/9) + "px)"); 
      $("#thumbcolor8").css("-webkit-transform","translateY(" + (s/100) + "px)"); 
      $("#thumbcolor9").css("-webkit-transform","translateY(" + (s/44) + "px)"); 
      $("#thumbcolor10").css("-webkit-transform","translateY(" + (s/9) + "px)"); 
      $("#thumbcolor11").css("-webkit-transform","translateY(" + (s/500) + "px)"); 
      $("#thumbcolor12").css("-webkit-transform","translateY(" + (s/24) + "px)"); 

     }) 

    }) 

</script>

感谢您的帮助球员

来源

2013-02-28 user2121528

你需要扼杀你的滚动处理程序......并且它在firefox中不起作用的原因是因为你只使用'webkit'前缀为你的CSS ... – ahren 2013-02-28 23:52:07

不相关，但你可以压缩这段代码通过分组的元素，将具有相同的值'$（“＃的Thumb2，＃thumbcolor1”）。CSS（...' – Shmiddty 2013-02-28 23:55:25

@Shmiddty和缓存那些选定的元素！ – 2013-02-28 23:57:55

添加

position: fixed; 
top: 0;

您#one IMG将保持在屏幕上的图像始终。

来源

2013-02-28 23:55:17 MattDiamant

视差效果与平滑滚动效果

回答

相关问题