使視差在iPad上工作

我一直在尋找和閱讀很多關於視差效果的知識，而我即將創建我的第一個視差網站。我的主要擔心之一是使其在iPad上工作。我已經閱讀並且足以認識到，Parallax在iPad上不能很好地工作。使視差在iPad上工作

現在，在所有Parallax網站中，我發現2個似乎在iPad上運行良好，但我仍然不知道他們爲他們工作有什麼不同，他們有什麼想法？

基本上我想知道的是Parallax網站之間有什麼區別。我已經看到一些使用canvas標籤，而其他似乎只是調整頂部和左側的值，而其他人似乎正在取代圖像。另外，iPad友好的Parallax網站的最佳方法是什麼？

的2點，我發現做工精細的iPad是：

http://www.nike.com/jumpman23/aj2012/

https://victoriabeckham.landrover.com/INT

感謝。

來源

2012-07-19 Pablo Rincon

要回答你的問題，我有一個看代碼，我發現這一點：

// touch 
    function touchStartHandler(e) { 
    //e.preventDefault(); 
    touchStart.x = e.touches[0].pageX; 

    // Store the position of finger on swipe begin: 
    touchStart.y = e.touches[0].pageY; 

    // Store scroll val on swipe begin: 
    scrollStart = scrollTop; 
    }; 

    function touchEndHandler(e) { 

    } 

    function touchMoveHandler(e) { 

    /*if (settings.freezeTouchScroll == true) { 
     $('#status2').html('freezin'); 
     return false; 
    }; 
    $('#status2').html('moovin'); 
    */ 

    e.preventDefault(); 
    offset = {}; 
    offset.x = touchStart.x - e.touches[0].pageX; 

    // Get distance finger has moved since swipe begin: 
    offset.y = touchStart.y - e.touches[0].pageY; 

    // Add finger move dist to original scroll value 
    scrollTop = Math.max(0, scrollStart + offset.y); 
    checkScrollExtents(); 
    }

我沒有嘗試過的代碼我自己，但我相信這是你所需要的。我會試一試，讓你知道如果這就是你需要的一切。

來源

2012-08-02 01:09:30 Zendy

我的回答是專門爲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設備相關聯的視差限制。

來源

2012-10-08 20:44:45

使視差在iPad上工作

回答

相關問題