Skip to content

Instantly share code, notes, and snippets.

@michaelcurry

michaelcurry/jQuery Diagonal Grid Fill

Last active December 11, 2015 23:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save michaelcurry/4680892 to your computer and use it in GitHub Desktop.
Save michaelcurry/4680892 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Diagonal Grid Fill Algorithm used to slide animations and menus. This code is NOT commented right now, but will be edited in the future.
Raw
jQuery Diagonal Grid Fill
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
body{
padding:0;
margin:0;
}
.screen{
width: 600px;
height: 400px;
color: #000000;
background:#000000;
position: relative;
display: block;
overflow; hidden;
}
.screen .block{
position: absolute;
z-index: 100;
top: 0;
display: none;
}
.pixel{
width: 40px;
height: 40px;
z-index: 0;
position: absolute;
background-color: #AA0000;
}
</style>
<script type="text/javascript">
function vuurrPixel(arg) {
var size = 40;
var h = $('.screen').height() / size;
var w = $('.screen').width() / size;
var count = 1;
for(i = 1; i <= (w + h); i++) {
var index = Math.min( i , w );
var row = Math.max(1,(i - ( w + 1 ) + 2 ) );
while (index != 0 && row <= h) {
if (arg == 'show') {
$('.screen').append('<div style="display: none;" id="block-'+index+'-'+row+'" class="pixel"></div>');
$('#block-'+index+'-'+row).css('top', (row-1)*size).css('left', (index-1)*size).delay(i*(size*.75)).fadeIn();
$('.block').animate({opacity:"show"}, 1500);
}else if (arg == 'hide') {
$('#block-'+Math.abs(index-(w+1))+'-'+Math.abs(row-(h+1))).delay(i*(size*.75)).fadeOut();
$('.block').animate({opacity:"hide"}, 1500);
}
count++;
index--;
row++;
}
}
}
</script>
</head>
<body>
<div class="screen">
<div class="block"></div>
</div>
<button onclick="vuurrPixel('show')">Show</button>
<button onclick="vuurrPixel('hide')">hide</button>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment