var _nyan = 0; var __nyan = [["+ o + o "," + o + + ","o + "," o + + + ","+ o o + o ","-_-_-_-_-_-_-_,------, o ","_-_-_-_-_-_-_-| /\\_/\\ ","-_-_-_-_-_-_-~|__( ^ .^) + + ","_-_-_-_-_-_-_-\"\" \"\" ","+ o o + o "," + + ","o o o o + "," o + ","+ + o o + "], ["+ o + + "," o o o + ","o + "," + o + o ","o o o + o ","_-_-_-_-_-_-_-,------, + ","-_-_-_-_-_-_-_| /\\_/\\ ","_-_-_-_-_-_-_-|__( ^ .^) o + ","-_-_-_-_-_-_-_ \"\" \"\" ","+ + o + o "," o + ","+ + + + o "," + o ","+ o o o + "]] function nyan(){ console.clear(); console.log(__nyan[_nyan].join("\n")) if(_nyan == 0){ _nyan = 1; } else { _nyan = 0; } } window.setInterval(nyan, 300); $(document).ready(function () { jQuery.easing['jswing'] = jQuery.easing['swing']; jQuery.extend( jQuery.easing, { easeOutCirc: function (x, t, b, c, d) { return c * Math.sqrt(1 - (t=t/d-1)*t) + b; } }); $('header, main').fadeOut(0); $(window).load(function () { setTimeout(function () { $('#loader').fadeOut(2000); $('#pixel-grid').animate({ opacity: 0 }, 2000, function() { $('header, main').fadeIn(2000); }); setTimeout(function () { var $target = $('#container'); var middle = 60-(window.innerHeight/2); $target.scrollTo($('.active'), 1500,{ easing:'easeOutCirc', offset:{ top:middle, left:0 } }); $('#pixel-grid').hide(); }, 4000); }, 4000); }); $('#container').scroll(function(){ lastTimeMouseMoved = new Date().getTime(); var t=setTimeout(function(){ var currentTime = new Date().getTime(); if(currentTime - lastTimeMouseMoved > 4000){ var $target = $('#container'); var middle = 60-(window.innerHeight/2); $target.scrollTo($('.active'), 1500,{ easing:'easeOutCirc', offset:{ top:middle, left:0 } }); } },4000); }); $(function () { var $pixelGrid = $('#pixel-grid'); var pixelGrid = { canvas: null, c2d: null, canvasW: window.innerWidth, canvasH: window.innerHeight, bgColor: 'black', pixelColor: '#ffffff', numPixelsX: window.innerWidth/12, numPixelsY: window.innerHeight/12, pixelSize: 8, pixelSpacing: 4, pixelDeathFade: 100, pixelBornFade: 50, pixelMaxLife: 50, pixelMinLife: 25, pixelMaxOffLife: 50, pixelMinOffLife: 25, pixels: [], init: function () { var canvas = document.createElement('canvas'); canvas.width = this.canvasW; canvas.height = this.canvasH; $pixelGrid.append(canvas); this.canvas = canvas; this.c2d = canvas.getContext('2d'); this.initPixels(); this.renderLoop(); $pixelGrid.addClass('appear'); }, initPixels: function () { for (var y = 0; y < this.numPixelsY; y++) { for (var x = 0; x < this.numPixelsX; x++) { var pixel = this.randomizePixelAttrs(x, y); this.pixels.push(pixel); } } }, randomizePixelAttrs: function (x, y) { var alpha = this.randomAlpha(), self = this; var lit = true; if (alpha === 0.1) { lit = false; } return { xPos: x * this.pixelSize + (x * this.pixelSpacing), yPos: y * this.pixelSize + (y * this.pixelSpacing), alpha: 0, maxAlpha: alpha, life: Math.floor(Math.random() * self.pixelMaxLife - self.pixelMinLife + 1) + self.pixelMinLife, offLife: Math.floor(Math.random() * self.pixelMaxOffLife - self.pixelMinOffLife + 1) + self.pixelMinOffLife, isLit: lit, dying: false, deathFade: this.pixelDeathFade, bornFade: this.pixelBornFade, randomizeSelf: function () { var alpha = self.randomAlpha(); var lit = true; if (alpha === 0.1) { lit = false; } this.alpha = 0; this.maxAlpha = alpha; this.life = Math.floor(Math.random() * self.pixelMaxLife - self.pixelMinLife + 1) + self.pixelMinLife; this.offLife = Math.floor(Math.random() * self.pixelMaxOffLife - self.pixelMinOffLife + 1) + self.pixelMinOffLife; this.isLit = lit; this.dying = false; this.deathFade = self.pixelDeathFade; this.bornFade = self.pixelBornFade; } }; }, randomAlpha: function () { var randStartAlpha = Math.floor(Math.random() * 101); // Fully lit (1) if (randStartAlpha > 90) { return 1; } // Halt lit (0.5) else if (randStartAlpha > 80) { return 0.5; } else { return 0.1; } }, renderLoop: function () { this.clearCanvas(); this.renderPixels(); window.requestAnimationFrame(function () { this.renderLoop(); }.bind(this)); }, renderPixels: function () { for (var i = 0; i < this.pixels.length; i++) { this.drawPixel(this.pixels[i]); } }, drawPixel: function (pixel) { if (pixel.alpha < 0.1) { pixel.alpha = 0.1; } else if (pixel.alpha > pixel.maxAlpha) { pixel.alpha = pixel.maxAlpha; } this.c2d.fillStyle = 'rgba(255, 255, 255, ' + pixel.alpha + ')'; this.c2d.fillRect(pixel.xPos, pixel.yPos, this.pixelSize, this.pixelSize); if (pixel.isLit) { if (pixel.bornFade <= 0) { // Update pixel attributes if (pixel.life <= 0) { pixel.dying = true; if (pixel.deathFade <= 0) { pixel.randomizeSelf(); } else { var divisor = 1; if (pixel.maxAlpha === 0.5 && pixel.alpha > 0.5) { divisor = 2; } pixel.alpha = (pixel.deathFade / this.pixelDeathFade) / divisor; pixel.deathFade--; } } else { pixel.life--; } } else { pixel.alpha = pixel.maxAlpha - pixel.bornFade / this.pixelBornFade; pixel.bornFade--; } } else { if (pixel.offLife <= 0) { pixel.isLit = true; } pixel.offLife--; } }, clearCanvas: function () { this.c2d.fillStyle = this.bgColor; this.c2d.fillRect(0, 0, this.canvasW, this.canvasH); } }; // Init pixel grid animation pixelGrid.init(); }); });