今天,我看到了最令人驚歎的ipad應用程序,它使用html5,css3和javascript編寫......應用程序的最佳部分是它們完美地創建了視差滾動條。 ..我的問題是...怎麼做?...我找不到任何文檔可以在iOS上創建視差滾動設計...如果有人可以給我一個鏈接或任何建議如何做到這一點將不勝感激...任何人?...親切的問候J如何在iOS設備上構建視差滾動
回答
我也在考慮這樣做。 Mark Dalgeish檢查stellar.js。它在大多數情況下都很有用。如果任何人有任何其他鏈接或信息,它會很高興聽到。
http://markdalgleish.com/projects/stellar.js/demos/ios.html
它採用滾動性。我希望能像stellar.js那樣以scrollarama的方式在iPad上工作。那就是夢想!
希望這可以幫助您的搜索。
此刻,這是不可能在iOS設備上。 iOS設備在滾動過程中凍結DOM操作,在滾動完成時排隊它們以應用。所以你最好會得到矮胖的動畫。不要打擾。
我們最近發佈了一個在iPad上進行視差滾動的網站。有一點的解釋,它在這裏使用了一個視頻:http://www.aerian.com/portfolio/one-potato/one-potato-html5-website
和網站本身,如果你有一臺iPad玩搭配:
要做到這個,我們寫了一些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的,因爲我覺得嚴重影響它提供了一個更清潔通知另一個事件系統的不同部分的方式。我發現使用太多事件調度變得難以維護,但這完全是另一回事。
希望這會有所幫助。
我喜歡你的土豆頁面和它的作品相當順利。我正在嘗試將[stellar.js](http://markdalgleish.com/projects/stellar.js/)與[可滾動性](https://github.com/joehewitt/scrollability)結合使用,但它工作但不真的很順利,有一些更大的PNG。 如果您可以向我們展示一些詳細的解釋/教程/您將如何順利地構建此應用程序,我將不勝感激。 感謝和問候伊夫 – Yves 2012-09-09 20:32:46
不幸的是,現場鏈接現在似乎... ...-( – 2014-06-18 07:02:07
)是的,我不知道公司發生了什麼事情,你仍然應該能夠看到對aerian.com鏈接的影響。 – Tom 2014-06-18 13:40:40
這個網站展示瞭如何視差風格的影響可以在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設備相關聯的視差限制。
不幸的是,landrover.com鏈接現在似乎已關閉。 :-( – 2014-06-18 07:02:38
馬克Dalgleish誰發展stellar.js真的很好解釋how to achieve this using iScroll.js to simulate an iOS scroll(YouTube視頻)。
雖然只有鏈接的答案纔是有效的,但最好總結內容(幷包括鏈接) - 然後,如果鏈接中斷,答案仍然有效。 – mnel 2012-10-22 22:41:17
Mark的博客文章可能涵蓋了更多細節比這個視頻:http://markdalgleish.com/2012/10/mobile-parallax-with-stellar-js/ – 2014-06-18 07:13:25
我最近檢查了Skrollr:http://prinzhorn.github.com/skrollr/
的例子在iOS和桌面的偉大工程!
好發現!我迫不及待地嘗試這一個出來...似乎像iOS基於Web的視差滾動是很難實現的 – 2013-01-21 18:36:39
哇,幾乎所有我尋找的東西感謝分享我的朋友 – CalZone 2013-11-25 15:33:41
我不會說它在iOS上的「優秀」我的iPad 4可以滾動它,但它有點遲緩並且絕對不是標準網頁的「黃油平滑」滾動。 – 2014-06-18 06:56:48
我發現這個網站有一篇關於在ios中工作很好的視差的文章。但是,那隻支持觸摸設備。如果有人能夠在臺式機和ios設備上工作,這將會非常棒。 http://torontographic.wordpress.com/2012/08/11/so-you-want-parallax-scrolling-in-ios-ipad-and-ipod/
只是注意到問題是要求鏈接 - 不是真的適合這個網站,但是然後... :-) – kleopatra 2013-11-13 10:43:26
看看這個網站:http://www.shindiristudio.com/demo/?item=Portal_Wordpress
它可能給你是如何做的一些見解。
One Million Square Feet of Culture在Windows Phone,帶觸摸屏的Windows,標準滾動桌面,Android和iOS上都很有魅力。
我看不到任何使用的視差在thei上r網站... – 2014-06-18 07:09:16
- 1. 如何在ios設備上顯示滾動條?
- 2. 如何構建iOS設備的JavaScriptCore?
- 3. Xcode如何構建iOS 5.0的設備?
- 4. jQuery +移動設備:我如何上下滾動? (iOS版:新iPad)
- 5. 如何禁用垂直滾動,但在iOS設備上保持水平滾動?
- 6. AppleScript在iOS設備上自動構建和運行
- 7. 視差動畫和iOS滾動
- 8. 如何定製ios設備上的滾動條
- 9. 4.3.3設備上的xcode構建/運行IOS 5.0設備
- 10. 視差滾動
- 11. 水平視差滾動UIScrollView iOS
- 12. 如何在桌面等移動設備上設置頁腳視差效果?
- 13. 滾動視圖設計的可行性 - iOS設備
- 14. 在移動設備上禁用滾動
- 15. DIV不滾動在移動設備上
- 16. 無法在移動設備上滾動
- 17. 如何爲通用ios設備構建Webrtc ios?
- 18. 視差滾動SpriteKit
- 19. 視差滾動scrollTop
- 20. 如何禁用移動設備和平板電腦視圖上的視差?
- 21. 在移動設備上禁用Jquery視差
- 22. jquery touchSwipe插件在iOs設備上滾動的頁面
- 23. 引導響應表中未在iOS設備上垂直滾動
- 24. 在ios設備手指輸入標籤上滾動
- 25. 如何在iOS設備上的Chrome移動設備上進行遠程調試
- 26. 觸控設備上的水平視差
- 27. 的iOS:如何在滾動視圖
- 28. 如何在ios中滾動視圖
- 29. 如何在移動設備上滾動到頁面頂部
- 30. 如何在移動設備上滾動頁面高度?
的定製版本下面是另一個不同的演示馬克的說的好:http://markdalgleish.com/examples/mobileparallax/ – 2014-06-18 07:08:10