CSS Javascript虚拟透视背景运动侧滚游戏

这里是一个想法，从JS创建一个侧滚游戏，并在环境中工作。前景元素设置为正常滚动，背景元素固定（天空、太阳）。我有一个中间地带的元素，我想沿着前景滚动，但我希望它移动到前景较小的“部分”。它是页面的一个固定元素，因此我想我可能需要访问该层并调整背景位置，但我不确定如何在javascript中实现这一点。我真的不想使用jquery，只使用JS和CSS

CSS代码：

<style>
body{ background: #5993fc; text-align: center; height:100%; width:100%;
  padding: 0; margin: 0; overflow-x: auto; overflow-y: hidden; }
.sun{ position:fixed;     height: 320px;   width: 320px;     z-index: 10;  
  background-image: url('wasteland/wasteland_sun.png'); opacity: .9;}
.cloud{ position:absolute;  height: 160px;   width: 800px;     z-index: 30;  
  background-image: url('wasteland/wasteland_cloud.png'); }
#ground{ position:absolute;  height: 169px;   width: 10000px;   z-index: 130; 
  background-image: url('wasteland/wasteland_foreground.png');bottom: 0px;left: 0px; }
#middleground   { position:fixed; height: 244px; width: 100%; z-index: 129; 
  background-image: url('wasteland/wasteland_middleground.png');bottom:80px;left:0px; }
</style>

正文{背景：#5993fc；文本对齐：中心；高度：100%；宽度：100%；
填充：0；边距：0；溢出-x:自动；溢出-y:隐藏；}
.太阳{位置：固定；高度：320px；宽度：320px；z指数：10；
背景图像：url（'wasteland/wasteland_sun.png'）；不透明度：.9；}
.云{位置：绝对；高度：160像素；宽度：800像素；z指数：30；
背景图像：url（'wasteland/wasteland_cloud.png'）；}
#地面{位置：绝对；高度：169px；宽度：10000px；z指数：130；
背景图像：url（'wasteland/wasteland_foreground.png'）；底部：0px；左侧：0px；}
#中间地带{位置：固定；高度：244px；宽度：100%；z指数：129；
背景图片：url（'wasteland/wasteland_middleground.png'）；底部：80px；左侧：0px；}

您可以看到实际页面和问题的示例

这里有一个小洞

---

思考之后，我唯一能想到的是一个连接到箭头键的事件监听器，但如果用户抓取并拖动滚动条，这将是无用的。只是不知道如何最好地编写函数来处理这个问题

您正在寻找的滚动类型的术语是“paralax”。也许谷歌会帮你找到一个好的教程，甚至是带有双L的“视差”或“横向视差滚动”。如果你能使用HTML5，那就更好了——看看啊哈。。。在查找资料时，了解适当的术语是很有帮助的。已经找到了一些很好的例子。非常感谢。这属于gamedev，但它似乎更关注编程语言而不是浏览器脚本。将记住以备将来参考。