視差效果與平滑滾動效果

好了干擾，所以我固定由（窗口）把所有的內容了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

視差效果與平滑滾動效果

回答

相關問題