<div id="initial-loader" class="padded"><span id="loader-text"></span></div>

<div id="main-body">
<section id="page-structure" class="ajax">
<header class="eliza height-95 black back-block-green-bottom-right">
    <nav class="padded">
    <a href="http://nclud.com" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/141552/logo.svg" id="nclud-logo"></a>
    </nav>
    <div class="header-text grid_row padded-horizontal">
      <h2 class="grid2">Revolutionary is our baseline. Different is our first step. And radical means we’re just getting started.</h2>
      <h1 class="grid3">We are nclud.</h1>
    </div>

    <div id="canvas">
      <img id="image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/141552/header-home-fallback.jpg" data-fallback="https://s3-us-west-2.amazonaws.com/s.cdpn.io/141552/header-home-fallback.jpg">
    </div>
</header>
	</section>
</footer>
#page-structure{
  height: 100vh;
}

.header-text {
  h2, h1{
   font-family: HelveticaNeue, Helvetica, Arial, "Lucida Grande", sans-serif !important;
   font-weight: 900 !important;
  }
}
$(document).ready(function() {

	// CANVAS & MOBILE TEST
	var windowWidth = $(window).width(),
		windowHeight = $(window).height();
	var isMobile = navigator.userAgent.match(/mobile/i);
	var webGLTrue = false;

	if (window.WebGLRenderingContext) {
		webGLTrue = true;
	}

	// CLASSES
	if (isMobile) {
		$('body').addClass('mobile');
	}
	else if (!isMobile) {
		$('body').addClass('desktop');
	}

	// GLOBAL VARIABLES
	var img,
		canvas,
		container,
		imgRatio,
		containerRatio;
	var screenShotCanvas,
		canvasDataURL,
		canvasImage,
		screenCaptured = false,
		animateable = true,
		popstate = false,
		isFourOhFour = false,
		inputReady = true;

	var seriously,
	    sourceImage,
	    layers,
	    edge,
	    blend1,
	    linearGreen,
	    scale1,
	    blend2,
	    linearPurple,
	    scale2,
	    blend3,
	    blend4,
	    blend5,
	    target;

	// INITIAL LOAD FUNCTIONS
	startupFunctions();

	$(window).load(function(){
		if (webGLTrue) {
			captureScreen();
		}
		initialLoader();
	});

	function startupFunctions() {
		if (isMobile) {
			$('body').removeClass('noscroll');
		}

		widowControl();
	}

	// IMAGE FUNCTIONS
	function imageFunctions() {

		var slickDrag = false;
		if (isMobile) {
			slickDrag = true; 
		}
	}

	// DEBOUNCE FUNCTION
	function debounce(func, wait, immediate) {
		var timeout;

		return function() {
			var context = this, args = arguments;
			var later = function() {
				timeout = null;
				if (!immediate) func.apply(context, args);
			}; 
			var callNow = immediate && !timeout;
			clearTimeout(timeout);
			timeout = setTimeout(later, wait);
			if (callNow) func.apply(context, args);
		};
	};

	var debounceAdjust = debounce(function() {
		widowControl();
	}, 50);
  
	window.addEventListener('resize', debounceAdjust);

	// WIDOW CONTROL
	function widowControl() {
		windowWidth = $(window).width();
		var widowElements = $('h1, h2, h3, h4, h5, h6, li, p, figcaption, .case-study-tagline, .large-cta').not('.discovery_cell p, #site-nav li, footer li');


		widowElements.each(function() {
			$(this).html($(this).html().replace(/&nbsp;/g, ' '));
		});

		if (windowWidth > 640) {
			widowElements.each(function() {
			    $(this).html($(this).html().replace(/\s((?=(([^\s<>]|<[^>]*>)+))\2)\s*$/,'&nbsp;$1'));
			});
		}
	};

	// HTML CANVAS & INITIAL LOAD FUNCTIONS
	function captureScreen() {
		html2canvas($('.ajax'), {
			letterRendering: true,
			allowTaint: true,
      onrendered: function(canvas){
        screenShotCanvas = canvas;
				canvasDataURL = screenShotCanvas.toDataURL();
        canvasImage = new Image();
        canvasImage.src = canvasDataURL;
        screenCaptured = true;
        console.log(canvas);
      }
    });
	}

	function initialLoader() {
		$('body').removeClass('noscroll');

		var loadText = 'Warning: Intrusion detected.';
		var loaderDone = false;
		$.each(loadText.split(''), function(i, letter){
			setTimeout(function(){
				$('#loader-text').html($('#loader-text').html() + letter);
			}, 60*i);
		});

		setTimeout(function(){
			loaderDone = true;
		}, 1700);


		//check to make sure the document has been fully loaded before removing loader
		var readyStateCheckInterval = setInterval(function() {
		    if (document.readyState === "complete" && loaderDone ) {
		        clearInterval(readyStateCheckInterval);
				$('#initial-loader').velocity({
					translateZ: 0,
				    opacity: 0
				}, {
					display: 'none',
					delay: 0,
					duration: 800
				});

				if (webGLTrue) {
		        	loadPageCanvas();

			        setTimeout(function(){
			        	removePageCanvas();
			        	$('#initial-loader').remove();
			        }, 500);
				}
				else {
					setTimeout(function(){
			        	$('#initial-loader').remove();
			        }, 1001);
				}
		    }
		}, 10);
	}



	// GLITCHING
	function initializeGlitch(image, height) {
		var container,
			stats;

		var camera,
			scene,
			sceneBG,
			renderer,
			composer,
			composerScene;

		var mesh,
			light,
			dotEffect,
			shiftEffect,
			sepiaEffect;

		var glitchDtSize = 100,
			glitchDelay = 1,
			glitchAmplification = .5;

		var fps = 20;
		if (isFourOhFour) {
			fps = 5;
		}

		var SCREEN_WIDTH = window.innerWidth;
		var SCREEN_HEIGHT = height;
		var ratio = SCREEN_WIDTH / SCREEN_HEIGHT;

		if (height > 4096){
			SCREEN_HEIGHT = 4096;
		}

		var windowHalfX = window.innerWidth / 2;
		var windowHalfY = height / 2;

		var delta = 0.1;

		function init(){
			scene = new THREE.Scene();
			sceneBG = new THREE.Scene();

			camera = new THREE.OrthographicCamera( -windowHalfX, windowHalfX, windowHalfY, -windowHalfY, 1, 10000 );
		    camera.position.z = 100;

			//background
			background = new THREE.MeshBasicMaterial({
			  map: THREE.ImageUtils.loadTexture(image),
			  depthTest: false
			});

			background.map.needsUpdate = true;
			var plane = new THREE.PlaneBufferGeometry(1, 1);

			var bgMesh = new THREE.Mesh(plane, background);
			bgMesh.position.z = 1;
			bgMesh.scale.set( SCREEN_WIDTH, height, 1 );
			sceneBG.add(bgMesh);

			bgMesh.material.map.needsUpdate = true;



			var sceneMask = new THREE.Scene();

			renderer = new THREE.WebGLRenderer();
			renderer.setClearColor( 0xffffff );
			renderer.setSize( window.innerWidth, window.innerHeight );
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.autoClear = false;

			renderer.gammaInput = true;
			renderer.gammaOutput = true;

			renderBackground = new THREE.RenderPass( sceneBG, camera);

			$(renderer.domElement).attr('id', 'loader').css('height', height);
			$('#main-body').append( renderer.domElement );
			
			var rtParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: true };

			var clearMask = new THREE.ClearMaskPass();

			composer = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, rtParameters ) );
			renderScene = new THREE.TexturePass( composer.renderTarget2 );
			composer.addPass(renderBackground);
			composer.addPass(clearMask);

			composer1 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, rtParameters ) );

			var glitch = new THREE.GlitchPass(glitchDtSize, glitchDelay, glitchAmplification);
			glitch.renderToScreen = true;
			
			composer1.addPass(renderScene);
			composer1.addPass(glitch);

			renderScene.uniforms[ 'tDiffuse' ].value = composer.renderTarget2;
		}

		function render() {
			renderer.clear();
			composer.render(delta);
			composer1.render(delta);
		}

		function animate() {
			if (animateable){
				setTimeout(function(){
					render();
					requestAnimationFrame( animate );
				}, 1000 / fps);
			}
		}

		init();
		animate();
	}

	function loadPageCanvas() {
		$('html').velocity('scroll', {
			axis: 'y',
			duration: 1000,
			mobileHA: false
		});

		animateable = true;

		initializeGlitch(canvasDataURL, screenShotCanvas.height);

		$('#loader').velocity({
		    opacity: [1, 0]
		}, {
			duration: 1000
		});
	}


	function removePageCanvas() {
		$('#loader').velocity({
		    opacity: 0
		}, {
			delay: 500,
			duration: 1000
		});

		setTimeout(function(){
			animateable = false;
			$('#loader').remove();
		}, 1600);
	}

	function loadPageStatic() {
		$('body').prepend('<div id="initial-loader" class="padded" style="opacity: 0;"><span id="loader-text"></span></div>');

		$('#initial-loader').velocity({
			translateZ: 0,
		    opacity: 1
		}, {
			duration: 150
		});
	}

	function removePageStatic() {
		var loadText = 'Loaded';
		$.each(loadText.split(''), function(i, letter){
			setTimeout(function(){
				$('#loader-text').html($('#loader-text').html() + letter);
			}, 60*i);
		});

		$('#initial-loader').velocity({
			translateZ: 0,
		    opacity: 0
		}, {
			display: 'none',
			delay: 900,
			duration: 500
		});

		setTimeout(function(){
			$('#initialLoader').remove();
		}, 1401);
	}    
});

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/141552/style.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-18/CopyShader.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/141552/03_glitch.js
  5. https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-18/EffectComposer.js
  6. https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-18/RenderPass.js
  7. https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-18/ShaderPass.js
  8. https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-18/MaskPass.js
  9. https://s3-us-west-2.amazonaws.com/s.cdpn.io/141552/08_texturepass.js
  10. https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js
  11. //cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js
  12. https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-18/GlitchPass.js