如何創建適用於iOS和桌面的視差滾動網站？

Question

在你說這是不可能的之前，我知道它是。 這是一個例子： http ： //victoriabeckham.landrover.com/INT

主要問題是iOS在滾動時凍結DOM操作，因此您必須使用某種技術來克服該問題。 我希望使用的parallax插件是stellar.js，但我遇到的問題是該插件的“iOS演示”在桌面上並不真正可用。 今天早上我擺弄了3個小時，無法在iOS和桌面上都能正常使用。

我需要一些想法，要么是一種技術來配置stellar.js以同樣的方式在兩者上工作（我不確定這是否可行），或者是另一個可以同時工作的庫，或者可能對我如何編程解決方法有所了解我。

任何幫助表示贊賞。

Answer 1

第1步：像這樣創建和對象

{
startFrameNumber: {
     //first obj
     id: idOfElement
     duration: howeverManyFrames
     startLeft: whatever
     endLeft: whatever
     startTop: stillWhatever
     endTop: whateverAgain
   },

   nextStartFrameNumber: {

   }
}

第2步：通過CSS使頁面不可滾動，即100％高度和寬度，以及溢出：隱藏

步驟3：當用戶滾動（通過自定義滾動條，鍵盤操作或觸摸事件）時，根據它們滾動的距離或其他任何內容推進動畫x幀。 如果您創建的動畫對象具有鍵[frame]，則將其添加到可見和移動的事物的隊列中，並將隊列中的所有內容移動到適當的位置和/或將它們從活動對象的隊列中移除

而已。 移動東西的功能應該是非常直接的，除了動畫平滑將需要一點點玩。

Answer 2

只需手動滾動每一層視差效果並自己控制它們，而無需依賴瀏覽器的頁面滾動。

Answer 3

我已經在Zynga Scroller js庫的幫助下成功實現了跨設備/瀏覽器視差滾動。 它會解決您的主要問題之一，即點擊和觸摸事件的互操作性以及在移動webkit設備上滾動 - 這允許您在滾動時操縱DOM。

然后，要創建視差效果，您有三種選擇：

1. 使用3d變換模擬真實世界的3d視差（使用控制透視和變換原點的父/包裝元素）。
2. 使用2d視差庫，如stellar.js或skrollr
3. 構建自己的視差滾動算法。

這是選項1 的快速演示 （使用現有的示例代碼），顯示了平滑滾動在桌面和移動設備上的工作方式。 當然，您僅限於支持3D變換的設備。 請注意，Zynga Scroller通過單擊/觸摸和拖動工作 - 它可能不應該用作dekstop解決方案，因為唯一需要的是overflow: scroll在CSS中overflow: scroll 。

Answer 4

看看jQuery-Plugin“Scroll Path” http://joelb.me/scrollpath並將其與不同的圖層和速度結合起來。 您將認識到，示例頁面的滾動不僅僅是一個垂直視差階段，而且在您向上和向下滾動時也會水平移動圖層。 使用滾動路徑可以實現這一點。

Answer 5

嘗試一起使用http://cubiq.org/iscroll-4和stellar.js。

Answer 6

正常做桌面視差工作，然后添加一個'touchmove'事件監聽器來觸發滾動事件：

document.body.addEventListener('touchmove', function(){$window.scroll()}, true);

使用iOs 5.1.1在iPad 2上進行測試和工作