<script id="shader-fs" type="x-shader/x-fragment">
				#ifdef GL_ES
				  precision highp float;
				  #endif
    		void main(void) {
    		 gl_FragColor = vec4(0.2, 0.3, 0.4, 1.0);
    		}

</script>

<script id="shader-vs" type="x-shader/x-vertex">
    	attribute vec3 vertexPosition;

  	uniform mat4 modelViewMatrix;
  	uniform mat4 perspectiveMatrix;

   	void main(void) {
  		gl_Position = perspectiveMatrix * modelViewMatrix * vec4(  vertexPosition, 1.0);
  	}

</script>

<canvas id="c"></canvas>

  <h1 style="color: #fff; ">Scroll or Click on the window!</h1>
<footer id="main-footer">
  <div><span id="follow-text">Follow me on</span>
    <div class="footer-wrapper">
      <div id="footer-container">
        <div id="box_top"><a href="" id="box_top_text" target='_blank'>sample3</a></div>
        <div id="box_front"><a href="" id="box_front_text" target='_blank'>sample2</a></div>
        <div id="box_bottom"><a href="" id="box_bottom_text" target='_blank'>sample1</a></div>
      </div>
    </div>
  </div>

</footer>
@import "compass/css3";

/* Component styles */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after {display: table;  content: ''; }
.clearfix:after { clear: both; }

body {
  cursor : pointer;
	background: #000;
	color: #333;
	font-weight: 500;
	font-size: 1em;
	font-family: 'Roboto', sans-serif;
  
	width: 100%;
	height: 100%;
	overflow: hidden;
}

h1 {
	margin: 0;
	font-weight: 800;
	letter-spacing: 1px;
	font-size: 1em;
	line-height: 3em;
  text-align: center;
}

canvas{
	width: 100%;
	height: 100%;
	z-index: -1;
	position: absolute;
}

#main-footer{
	position: absolute;
	bottom: 10px;
	width: 100%;
	text-align: center;
	display: none;
}

.footer-wrapper{
	display: inline-block;
	perspective: 800px;
  margin: auto 0;
	margin-left: -8px;

	-webkit-transform:  translateY(15px) scale(0.8);
  -moz-transform:  		translateY(15px) scale(0.8);
  -ms-transform:  		translateY(15px) scale(0.8);
  -o-transform: 		  translateY(15px) scale(0.8);
  transform:  				translateY(15px) scale(0.8);
}

#follow-text{
	display: inline-block;
	height: 30px;
	-webkit-transform:  translateY(5px);
  -moz-transform:  translateY(5px);
  -ms-transform:  translateY(5px);
  -o-transform:  translateY(5px);
  transform:  translateY(5px);
}

#footer-container {
  display: block;
  width: 120px;
  height: 30px;
  margin: 0px auto;
  text-align: center;
  position: relative;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: rotateX(0deg) translateZ(15px);
  -moz-transform: rotateX(0deg) translateZ(15px);
  -ms-transform: rotateX(0deg) translateZ(15px);
  -o-transform: rotateX(0deg) translateZ(15px);
  transform: rotateX(0deg);
  /* -webkit-transition: all 0.4s cubic-bezier(0.29, 1.53, 0.33, 1.01); */
  /* -moz-transition: all 0.4s cubic-bezier(0.29, 1.53, 0.33, 1.01); */
  /* transition: all 0.4s cubic-bezier(0.29, 1.53, 0.33, 1.01); */
}

#box_front, #box_top, #box_bottom {
	font-size: 18px;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
	padding-top: 3px;
  top: 0;
	color: #fff;

	background: #000;
	border: solid 1px white;
}



#footer-container a:hover {
	color: white;
}

#box_front {

}

#box_bottom {
  /* background-color: #C4C7CC; */
  transform: translate3D(0, 15px, -15px) rotateX(-90deg);
}

#box_top {
	/* height: 30px; */
	/* z-index: 100; */
  /* background-color: #C4C7ff; */
  transform: translate3D(0, -15px, -15px) rotateX(90deg);
}

a {
	outline: none;
	color: #aaa;
	text-decoration: none;
}

a:hover, a:focus {
	color: #333;
}
View Compiled
window.cancelRequestAnimFrame = (function () {
    return window.cancelAnimationFrame ||
        window.webkitCancelRequestAnimationFrame ||
        window.mozCancelRequestAnimationFrame ||
        window.oCancelRequestAnimationFrame ||
        window.msCancelRequestAnimationFrame ||
        clearTimeout
})();



var canvas, gl,
    ratio,
    cw,
    ch,
    colorLoc,
    drawType,
    numLines = 100000;
var target = [];
var id;
var isScroll = false;

var imageURLArr = ["https://s3-us-west-2.amazonaws.com/s.cdpn.io/13842/facebook.png",
                   "https://s3-us-west-2.amazonaws.com/s.cdpn.io/13842/google.png",
                   "https://s3-us-west-2.amazonaws.com/s.cdpn.io/13842/instgram.png",
                    "https://s3-us-west-2.amazonaws.com/s.cdpn.io/13842/pinterest.png",
                   "https://s3-us-west-2.amazonaws.com/s.cdpn.io/13842/twitter.png", 
                   "https://s3-us-west-2.amazonaws.com/s.cdpn.io/13842/github.png",

                   ]
var snsNameArr  = ["Facebook", "Google+", "Instagram", "Pinterest", "Twitter", "GitHub"];
var myLinkAccount = ['https://www.facebook.com/kenjiSpecial', 'https://plus.google.com/u/1/109436453854978092848/about', 'https://instagram.com/kenji_special/', 'https://www.pinterest.com/kenjispecial/', 'https://twitter.com/kenji_special', 'https://github.com/kenjiSpecial']

var perspectiveMatrix
var randomTargetXArr = [], randomTargetYArr = [];
drawType = 0;
var count = 0;

var footerDom    = document.getElementById("main-footer");
var footerContainer = document.getElementById('footer-container');
var boxTopDom    = document.getElementById('box_top_text');
var boxFrontDom  = document.getElementById('box_front_text');
var boxBottomDom = document.getElementById('box_bottom_text');

window.onload = init();


function init() {
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext('2d');

    for (var ii = 0; ii < imageURLArr.length; ii++) {
        var image = new Image();
      	image.crossOrigin = "Anonymous";
        image.src = imageURLArr[ii];

        image.onload = onLoadImageHandler.bind(this, image, canvas, ctx, ii);
    }
};

function onLoadImageHandler(image, canvas, ctx, number) {
    //console.log(image);
    var size = image.width;
    canvas.width = size;
    canvas.height = size;

    ctx.drawImage(image, 0, 0)
    var imageData = ctx.getImageData(0, 0, size, size);

    var data = imageData.data;
    target[number] = [];

    for (var ii = 0; ii < data.length; ii += 4) {
        if (data[ii] == 0) {
            var pixNumber = ii / 4;
            var xPos = pixNumber % size;
            var yPos = parseInt(pixNumber / size);
            var pos = {x: xPos / size - .5, y: -yPos / size + 0.5};
            target[number].push(pos);
        }

    }

    count++;

    if(count == imageURLArr.length){
        setText();
        footerDom.style.display = "block";

        loadScene();
    }
    //
    //loadScene();

}

function setText () {
  var topDrawType = drawType - 1 < 0 ? snsNameArr.length - 1 : drawType - 1;
  var botDrawType = drawType + 1 > snsNameArr.length - 1 ? 0 : drawType + 1;

  boxTopDom.innerHTML = snsNameArr[topDrawType];
  boxTopDom.href = myLinkAccount[topDrawType];

  boxFrontDom.innerHTML = snsNameArr[drawType];
  boxFrontDom.href = myLinkAccount[drawType];

  boxBottomDom.innerHTML = snsNameArr[botDrawType];
  boxBottomDom.href = myLinkAccount[botDrawType];
}


/**
 * Initialises WebGL and creates the 3D scene.
 */
function loadScene() {
    canvas = document.getElementById("c");
    gl = canvas.getContext("experimental-webgl");

    if (!gl) {
        alert("There's no WebGL context available.");
        return;
    }

    cw = window.innerWidth;
    ch = window.innerHeight;
    canvas.width = cw;
    canvas.height = ch;
    gl.viewport(0, 0, canvas.width, canvas.height);

    var vertexShaderScript = document.getElementById("shader-vs");
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, vertexShaderScript.text);
    gl.compileShader(vertexShader);
    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
        alert("Couldn't compile the vertex shader");
        gl.deleteShader(vertexShader);
        return;
    }

    var fragmentShaderScript = document.getElementById("shader-fs");
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, fragmentShaderScript.text);
    gl.compileShader(fragmentShader);
    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
        alert("Couldn't compile the fragment shader");
        gl.deleteShader(fragmentShader);
        return;
    }

    gl.program = gl.createProgram();
    gl.attachShader(gl.program, vertexShader);
    gl.attachShader(gl.program, fragmentShader);
    gl.linkProgram(gl.program);
    if (!gl.getProgramParameter(gl.program, gl.LINK_STATUS)) {
        alert("Unable to initialise shaders");
        gl.deleteProgram(gl.program);
        gl.deleteProgram(vertexShader);
        gl.deleteProgram(fragmentShader);
        return;
    }
    gl.useProgram(gl.program);
    var vertexPosition = gl.getAttribLocation(gl.program, "vertexPosition");
    gl.enableVertexAttribArray(vertexPosition);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clearDepth(1.0);

    gl.enable(gl.BLEND);
    gl.disable(gl.DEPTH_TEST);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE);

    var vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

    // ------------------

    setup();

    // ------------------

    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    var fieldOfView = 30.0;
    var aspectRatio = canvas.width / canvas.height;
    var nearPlane = 1.0;
    var farPlane = 10000.0;
    var top = nearPlane * Math.tan(fieldOfView * Math.PI / 360.0);
    var bottom = -top;
    var right = top * aspectRatio;
    var left = -right;

    var a = (right + left) / (right - left);
    var b = (top + bottom) / (top - bottom);
    var c = (farPlane + nearPlane) / (farPlane - nearPlane);
    var d = (2 * farPlane * nearPlane) / (farPlane - nearPlane);
    var x = (2 * nearPlane) / (right - left);
    var y = (2 * nearPlane) / (top - bottom);
    perspectiveMatrix = [
        x, 0, a, 0,
        0, y, b, 0,
        0, 0, c, d,
        0, 0, -1, 0
    ];

    var modelViewMatrix = [
        1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1
    ];
    var vertexPosAttribLocation = gl.getAttribLocation(gl.program, "vertexPosition");
    gl.vertexAttribPointer(vertexPosAttribLocation, 3.0, gl.FLOAT, false, 0, 0);
    var uModelViewMatrix = gl.getUniformLocation(gl.program, "modelViewMatrix");
    var uPerspectiveMatrix = gl.getUniformLocation(gl.program, "perspectiveMatrix");
    gl.uniformMatrix4fv(uModelViewMatrix, false, new Float32Array(perspectiveMatrix));
    gl.uniformMatrix4fv(uPerspectiveMatrix, false, new Float32Array(modelViewMatrix));
    animate();

    window.addEventListener("mousewheel", onScrollEventHandler);
    window.addEventListener("DOMMouseScroll", onScrollEventHandler);

    window.addEventListener("resize", onResizeHandler);
}
var count = 0;
var cn = 0;

function animate() {

    id = requestAnimationFrame(animate);
    drawScene();
}


function drawScene() {
    draw();

    gl.lineWidth(1);
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    gl.drawArrays(gl.LINES, 0, numLines);

    gl.flush();
}

// ===================================
var coefficient = .4;
var targetCoefficient = .01;



var vertices,
    velocities,
    freqArr,
    thetaArr,
    velThetaArr,
    velRadArr,
    boldRateArr;

// -------------------------------

function setup() {

    vertices = [];

    // -------------------------------

    for (var ii = 0; ii < numLines; ii++) {
        vertices.push(0, 0, 1.83);
        vertices.push(0, 0, 1.83);

        var randomPos = target[drawType][parseInt(target[drawType].length * Math.random())];
        randomTargetXArr.push(randomPos.x);
        randomTargetYArr.push(randomPos.y);
    }

    vertices = new Float32Array(vertices);
    randomTargetXArr = new Float32Array(randomTargetXArr);
    randomTargetYArr = new Float32Array(randomTargetYArr);

}

// -------------------------------

// -------------------------------

function draw() {
    cn += .1;

    var i, n = vertices.length, p, bp;
    var px, py;
    var pTheta;
    var rad;
    var num;

    coefficient += (targetCoefficient - coefficient) * .1;


    for (i = 0; i < numLines * 2; i += 2) {
        count += .3;
        bp = i * 3;
        // copy old positions

        vertices[bp] = vertices[bp + 3];
        vertices[bp + 1] = vertices[bp + 4];

        num = parseInt(i / 2);
        //pTheta = thetaArr[num];

        //rad = velRadArr[num];// + Math.cos(pTheta + i * freqArr[i]) *  boldRateArr[num];

        //pTheta = pTheta + velThetaArr[num];
        //thetaArr[num] = pTheta;
        //var pos = target[parseInt(target.length * Math.random())];
        var targetPosX = randomTargetXArr[num];
        var targetPosY = randomTargetYArr[num];
        //va
        px = vertices[bp + 3];
        px += (targetPosX - px) * coefficient + (Math.random() - .5) * coefficient;
        vertices[bp + 3] = px;


        py = vertices[bp + 4];
        py += (targetPosY - py) * coefficient + (Math.random() - .5) * coefficient;
        vertices[bp + 4] = py;
    }
}

// -------------------------------


function onScrollEventHandler(event) {
    if(isScroll) return;
    var delta = event.wheelDelta;
    var rotate;
    var tansY;

    isScroll = true;
    if(delta < 0){
        drawType -= 1;
        if(drawType < 0) drawType += imageURLArr.length;
        rotate = -90;
        transY = 15;
    }else{
       drawType = (drawType + 1) % imageURLArr.length;
       rotate = 90;
       transY = -15;
     }

    coefficient = .3;
    randomTargetXArr = [];
    randomTargetYArr = [];

    // -------------------------------

    for (var ii = 0; ii < numLines; ii++) {
        var randomPos = target[drawType][parseInt(target[drawType].length * Math.random())];
        randomTargetXArr.push(randomPos.x);
        randomTargetYArr.push(randomPos.y);
    }

    vertices = new Float32Array(vertices);
    randomTargetXArr = new Float32Array(randomTargetXArr);
    randomTargetYArr = new Float32Array(randomTargetYArr);

    TweenLite.to(footerContainer, .3, {rotationX: rotate, y: transY, ease: Back.easeOut, onComplete: onTweenCompleteHandler});


    setTimeout(function(){
        isScroll = false;
    }, 600);
}

function onTweenCompleteHandler (arguments) {
    setText();

    TweenLite.set(footerContainer, {rotationX: 0, y: 0});
}

function onResizeHandler(event){
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

}

window.addEventListener("keypress", function (event) {
    if (event.charCode == 99) {
        cancelRequestAnimFrame(id);
    }
});

window.addEventListener("click", function (event) {
if(isScroll) return;
    var rotate;
    var tansY;

    isScroll = true;
       drawType = (drawType + 1) % imageURLArr.length;
       rotate = 90;
       transY = -15;
     

    coefficient = .3;
    randomTargetXArr = [];
    randomTargetYArr = [];

    // -------------------------------

    for (var ii = 0; ii < numLines; ii++) {
        var randomPos = target[drawType][parseInt(target[drawType].length * Math.random())];
        randomTargetXArr.push(randomPos.x);
        randomTargetYArr.push(randomPos.y);
    }

    vertices = new Float32Array(vertices);
    randomTargetXArr = new Float32Array(randomTargetXArr);
    randomTargetYArr = new Float32Array(randomTargetYArr);

    TweenLite.to(footerContainer, .3, {rotationX: rotate, y: transY, ease: Back.easeOut, onComplete: onTweenCompleteHandler});


    setTimeout(function(){
        isScroll = false;
    }, 600);
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.