Question

所以这就是想法，从JS创建一个侧面滚动游戏，并在环境中工作。前景元素设置为正常滚动，背景元素是固定的（天空，太阳）。我有一个中间元素，我想与前景一起滚动，但我希望它在较小的'porportion'中移动到前景。它是页面的固定元素，所以我想我可能需要访问图层并调整背景位置，但我不确定如何在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>

您可以看到实际页面的示例并发出http://thomasrcheney.com/games/wasteland-perspective.html

和jsfiddle http://jsfiddle.net/K5f7b/

在思考之后，我唯一能想到的是附加到arrowkey的事件监听器，但如果用户要抓住并拖动滚动条，这将是无用的。只是不确定如何最好地编写函数来处理这个问题。

CSS Javascript在游戏的侧滚动的伪透视背景运动

0 个答案: