如何在iOS設備上構建視差滾動

Question

今天，我看到了最令人驚歎的ipad應用程序，它使用html5，css3和javascript編寫......應用程序的最佳部分是它們完美地創建了視差滾動條。 ..我的問題是...怎麼做？...我找不到任何文檔可以在iOS上創建視差滾動設計...如果有人可以給我一個鏈接或任何建議如何做到這一點將不勝感激...任何人？...親切的問候J

Answer 1

我也在考慮這樣做。 Mark Dalgeish檢查stellar.js。它在大多數情況下都很有用。如果任何人有任何其他鏈接或信息，它會很高興聽到。

http://markdalgleish.com/projects/stellar.js/demos/ios.html

它採用滾動性。我希望能像stellar.js那樣以scrollarama的方式在iPad上工作。那就是夢想！

希望這可以幫助您的搜索。

Answer 2

此刻，這是不可能在iOS設備上。 iOS設備在滾動過程中凍結DOM操作，在滾動完成時排隊它們以應用。所以你最好會得到矮胖的動畫。不要打擾。

Answer 3

我們最近發佈了一個在iPad上進行視差滾動的網站。有一點的解釋，它在這裏使用了一個視頻：http://www.aerian.com/portfolio/one-potato/one-potato-html5-website

和網站本身，如果你有一臺iPad玩搭配：

• http://one-potato.co.uk

要做到這個，我們寫了一些JavaScript庫代碼，我們希望在不久的將來可以開源。

基本的想法是編寫一個滾動容器，它接受觸摸輸入並跟蹤你的內容的x和y位置（如果你需要兩個維度）。爲了實現這種視差能力，我們發現最好的方法是將委派委派給各種控制器。我不記得我們無需在控制器尋找

container.on('touchmove', function(e) { 
    //get our offset 
    var offset = <some value>; //e.g. { x : 0, y : -1300 } 
    var easing = 'ease-out'; 

    self.delegate.scrollViewDidScrollToOffsetWithAnimation(self, offset, easing); 
}); 

然後使用確切的語法，是這樣的：

var scrollView = new ScrollView($('#container')); 

var controller = { 
    scrollViewDidScrollToOffsetWithAnimation : function(scrollView, offset, easing) { 
     //here you need to respond to offset, by changing some css properties of your parallax elements: 
     parallaxElement.css('transform', 'translate(-offset.x, -offset.y * 0.8)'); 
     anotherParallaxElement.css('transform', 'translate(-offset.x, -offset.y * 0.1)'); 
    } 
} 

scrollView.setDelegate(controller); 

該委託模式是通過UIKit的，因爲我覺得嚴重影響它提供了一個更清潔通知另一個事件系統的不同部分的方式。我發現使用太多事件調度變得難以維護，但這完全是另一回事。

希望這會有所幫助。

Answer 4

這個網站展示瞭如何視差風格的影響可以在iOS https://victoriabeckham.landrover.com/INT

他們根據輸入你給的類型是模擬的滾動工作一個很好的例子。您實際上並沒有滾動頁面，然後爲各種屬性設置動畫。它正在閱讀觸摸事件，鼠標滾輪或其自定義烘焙滾動條，並查看您想要滾動的內容。頁面中的所有內容都位於一個容器中。這樣當你做觸摸事件時，它只是讀你在頁面上移動多少。

最重要的是，他們正在使用動畫循環來讓所有的東西都移動。他們利用window.requestAnimationFrame方法來優化頁面中的更改，以便在iPad和瀏覽器中順利運行。下面是它的說明頁：

http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 瀏覽器可以優化當前的動畫一起到一個單一的 迴流和重繪循環，從而導致更高的保真度動畫。例如，對於 示例，基於JS的動畫與CSS轉換或SVIL SMIL同步。此外，如果您在不可見的選項卡中運行動畫循環，則瀏覽器將無法保持運行狀態，這意味着CPU，GPU，內存使用率更低，從而延長電池使用時間。

最重要的是，他們已經構建了一個自定義關鍵幀對象，它將決定頁面上的所有動畫。我對這個設置感到流口水。太糟糕了，這不是一個開放的框架。您可以在關鍵幀對象中設置效果開始的位置，結束位置，緩動等等，其框架將通過動畫循環處理所有其他內容。

{ 
    selector: '#outro2 > .content2', 
    startAt: outroStart+500, 
    endAt: outroStart+1000, 
    onEndAnimate:function(anim) {}, 
    keyframes: [ 
     { 
      position: 0, 
      properties: { 
       "margin-top": 650 
      } 

     }, 
     { 
      position: 1, 
      ease: TWEEN.Easing.Sinusoidal.EaseOut, 
      properties: { 
       "margin-top": 650 
      } 
     } 
    ] 
}, 

總之，相信自定義實現滾動的組合，以及使用該方法requestAnimationFrame自定義動畫循環獲得超出通常與iOS設備相關聯的視差限制。

Answer 5

馬克Dalgleish誰發展stellar.js真的很好解釋how to achieve this using iScroll.js to simulate an iOS scroll（YouTube視頻）。

Answer 6

我最近檢查了Skrollr：http://prinzhorn.github.com/skrollr/

的例子在iOS和桌面的偉大工程！

Answer 7

我發現這個網站有一篇關於在ios中工作很好的視差的文章。但是，那隻支持觸摸設備。如果有人能夠在臺式機和ios設備上工作，這將會非常棒。 http://torontographic.wordpress.com/2012/08/11/so-you-want-parallax-scrolling-in-ios-ipad-and-ipod/

Answer 8

看看這個網站：http://www.shindiristudio.com/demo/?item=Portal_Wordpress

它可能給你是如何做的一些見解。

Answer 9

One Million Square Feet of Culture在Windows Phone，帶觸摸屏的Windows，標準滾動桌面，Android和iOS上都很有魅力。

他們有這個parallax scrolling library