2012-02-23 124 views
2

這是我第一篇貼子,如果它不完美。滾動時沿路徑移動背景圖像的位置

基本上我想實現的已經出色地利用飛行的紅牛藝術電影網站上的相同或類似的效果:即背景圖像一起合作的路徑移動

http://artofflightmovie.com/

隨着用戶向下滾動頁面而下屬。我現在不擔心背景動畫的內容動畫。

我能夠做的基本,從移動背景到B的動畫,但我stauck上,該怎麼辦時,我想去從B到C C到d等等等等

我曾嘗試使用公開可用:

​​

這樣我就可以設置背景位置變化當用戶滾動,但我不知道我怎麼會再設置下一個動畫。我最初的想法是使用其他的,但如果這不成功。

artofflightmovie.com示例設置了一個背景位置px測量數組,然後像時間軸一樣讀取。

我很滿意我想要的CSS,但是我的jQuery知識達不到我可以克服的問題。

我也採取了飛行的藝術頁面的來源,並試圖創建一個簡化的版本來建立,但再次沒有太大的好處。

任何幫助,將不勝感激

+0

你有什麼嘗試?你爲什麼卡住了?到目前爲止你的代碼是什麼?質疑問題。 – 2012-02-23 13:23:33

+0

可能的重複[他們是如何在http://artofflightmovie.com/?](http://stackoverflow.com/questions/8923136/how-did-they-do-those-effects-in-http -artofflightmovie-com) – 2012-02-23 13:27:13

+0

你是如何確定它是一張背景圖像,而不是一些絕對定位的元素,包括一張非常大的圖像?似乎你可以通過一組x,y對來完成這個任務。一旦達到目的地,x,y對將移動到陣列的末端,然後移向下一個。理論上可能比應用簡單。 – buck54321 2012-02-28 04:13:59

回答

2

感謝您的輸入傢伙。

我居然發現諸如此類的事情,我在這裏後:http://joelb.me/scrollpath/使用canvas元素來渲染路徑和jQuery控制滾動沿着它

大的jQuery插件。事件/功能也可以在每個方向點觸發。