Last active
December 11, 2015 23:59
-
-
Save michaelcurry/4680892 to your computer and use it in GitHub Desktop.
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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