使用HTML5/CSS3而不是JavaScript滾動滾動/羊皮紙

Question

有沒有辦法創建一個僅使用HTML5和CSS3可視化爲scroll/parchment的框架？現在我已經通過使用JavaScript實現了它，但是滾動事件不會經常在移動設備上觸發，這使得滾動口吃的頁眉和頁腳成爲可能。

http://magia-game.com/scroll.html 如果您的瀏覽器沒有平滑滾動，我知道如何查看滾動動畫的最佳方式是在內容上使用鼠標中鍵，然後上下移動鼠標。

所以滾動的行爲如下。向上或向下滾動內容時，頁眉和頁腳滾動到相反的方向。頁眉和頁腳展示了將要發生什麼或之前發生什麼的顛倒圖像。 JavaScript版本使用簡單的原始複製和反轉的背景圖像，而CSS3變換矩陣只需要一個圖像。

我認爲這可能是使用顯示'絕對'或'固定'元素在溢出'滾動'元素內，但都不會使元素留在他們的位置，因爲內容滾動。

HTML5 Canvas是另一種選擇，但它可能仍然和JavaScript一樣慢。

Answer 1

您的滾動圖像大小超過了半兆字節。

對於移動瀏覽器來說，這個尺寸可能太大而無法處理。

（特別是因爲它繪製的3倍。）

嘗試使用您的滾動的這種下采樣版本，在56K重量在：

如果你不能得到移動觸發滾動事件足夠你的設計，那麼你可以使用HTML5畫布，這將使您更好地控制重繪速度。但首先嚐試使用較小的圖像，看看是否能解決您的手機口吃。

祝您好運與您的遊戲！