Skip to content

Instantly share code, notes, and snippets.

@mjumbewu

mjumbewu/index.html

Created January 25, 2012 21:59
Show Gist options
  • Save mjumbewu/1679059 to your computer and use it in GitHub Desktop.
Save mjumbewu/1679059 to your computer and use it in GitHub Desktop.
Download ZIP
Isometric Z-Scrolling
Raw
index.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
body {
background-color: SkyBlue;
margin: 0px;
padding: 0px;
}
#isometric-scene {
position: relative;
width: 100%;
height: 2000px;
overflow: hidden;
}
#isometric-scene > div {
position: fixed;
width: 300px;
border: 1px solid black;
display: none;
}
</style>
</head>
<html>
<div id="isometric-scene">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script>
$(document).ready(function() {
var $layers = $('#isometric-scene > div');
function setRandomHeight(elem) {
$(elem).height(300);
}
function setRandomColor(elem) {
var colors = ['red','green','blue','yellow','purple','grey','orange','brown']
, i = Math.floor(Math.random() * colors.length);
$(elem).css('background-color', colors[i]);
}
/**
* Set the position (and visibility) of the layer.
*
* s - The scroll offset of the window
* i - The index of the layer (greater is closer to the front)
*/
function setLayerPosition(s, i, layer) {
var xoffset = 300
, yoffset = 100
, xspacing = 75.0
, yspacing = 30.0
, x = xoffset + i*xspacing - (xspacing/yspacing)*s
, y = yoffset + i*yspacing - s
, n = x-xoffset
, o = Math.min(1.0, Math.max(0.0, -(n*(n-400))/20000.0))
// To see what the above opacity function looks like, graph it in
// a graphing calculator. It should ascend from 0 until somewhere
// before n=200, and then descend back to 0 around n=400. It is
// upper-bounded by 1.0 and lower-bounded by 0.0
, $layer = $(layer);
if (x > xoffset && x < xoffset + 400) {
$layer.show();
} else {
$layer.hide();
}
$layer.css({
position: 'fixed',
left: x+'px',
top: y+'px',
opacity: o
});
}
$.each($layers, function(i, layer) {
setRandomHeight(layer);
setRandomColor(layer);
setLayerPosition(i, layer);
});
$(window).scroll(function() {
var s = $(window).scrollTop();
console.log(s);
$.each($layers, function(i, layer) {
setLayerPosition(s, i, layer);
});
});
});
</script>
</html>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment