Matrix Loading Screen

Are you a fan of Matrix? Then you must have loved the effect of falling threads of green lines.

Today, I am gonna show you how to build the same effect in your website. Pretty awesome right?

Setting up HTML

If you have ever build any loader before, you must know that a loader is just a div element that covers up the entire document until your website is fully loaded.
After which, it is removed to show the underlying website.

So our HTML document is just made of a single DIV element.
Let’s give it an id of “loader” so we can reference it later in javascript.





<div id='loader'></div>




That’s it.

Now we want the string of unknown characters of fall out of the sky.
So, lets build these characters.

First of all, we want the font of these characters.

http://www.fontspace.com/norfok-incredible-font-design/matrix-code-nfi

Special thanks to Norfok Incredible Font Design for making this font available.

So go ahead and download it.

It might be a good time to have a specified directory tree. It’s always good to have a clean directory tree of your website.

root
-> style
-> script
-> assests
-> index.html

I will be using this directory tree through out this tutorial.

Styling the CSS

Now that we have the fonts, extract them in assests directory. We will only be needing “matrix code nfi.ttf” so rename it as “matrix.ttf“.

Next we will create a CSS file in style directory. Let’s name it matrix.css.
Add a link to your stylesheet in index.html


	<link href='style/matrix.css' rel='stylesheet' />

First of all, we need to create a font face for the font we just downloaded.


	@font-face {
	    font-family: matrix;
	    src: url(../assests/matrix.ttf);
	}

Now the loader supposed to cover up the entire document, so we will force the div on top of the website. Also, the font family we created above needs to be set.


	#loader {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;

		z-index:20;
		background-color: #111;
		font-family: matrix;
		overflow: hidden;
	}

With background set, we will set up the styles of the random strings, let’s call it a thread for obvious reasons.

First, set the postion of thread above the document so that it’s not visible.


	.thread {
		position:absolute;
		top: -2000px;
		...

Adding the width to keep it light and thin


		...
		width: 1px;
		...

The thread is still in horizontal. We need each chacter of the thread to fall below the other.


		...
		word-wrap:break-word;
		word-break:break-all;
		...

Finally, Add the color and shadow to the thread


		...
		font-size: 12px;
		color: #1ec503;
		text-shadow: 0 0 40px #EEE;
		...

Add a transition for smooth fall of the thread


		...
		-webkit-transition: all .4s linear;
		-ms-transition: all .4s linear;
		-o-transition: all .4s linear;
		-moz-transition: all .4s linear;
	}

Now to make it much more beautiful, we will make the first character to be white.


	.thread:first-letter {
		color: #FFF;
		text-shadow: 0 0 40px #CCC;
	}

That’s it. We done with the styling part. The complete matrix.css is given below


	@font-face {
	    font-family: matrix;
	    src: url(matrix.ttf);
	}

	#loader {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;

		z-index:20;
		background-color: #111;
		font-family: matrix;
		overflow: hidden;
	}

	.thread {
		width: 1px;
		word-wrap:break-word;
		word-break:break-all;
		height: auto;

		position:absolute;
		top: -2000px;

		font-size: 12px;
		color: #1ec503;

		text-shadow: 0 0 40px #EEE;

		-webkit-transition: all .4s;
	}

	.thread:first-letter, .light {
		color: #FFF;
		text-shadow: 0 0 40px #CCC;
	}

Scripting it away

Now comes the final part.

We need our website to make random text at random positions.
Let’s create a matrix.js file in Script directory and add a reference to it in index.html.


	<script type='text/javascript' src='Script/matrix.js' ></script>
	

Now open matrix.js.

It’s always good practice to set your variables first and that’s what we are gonna do.


	var width = 1500,
		height = 1000,
		increment = 40,
		maxSpeed = 100,
		minSpeed = 40,
		maxLength = 200, 
		minLength = 50
		font_size = 12;

	var holder, 
		lock = false,
		loading_time = 5000;

Also to get random characters, we will set up an array of all the possible characters.


	var characters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];

For random positions and random strings, we will define a method to return a random value.


	function getRandomInt(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}

Now, to get Random characters from the variable we defined above.


	var randomText = function() {
		return characters[getRandomInt(0, characters.length-1)];
	}

Let’s build a method to create the threads.


	var thread = function() {
		var div = document.createElement('div');
		div.className = "thread";

		var msg = "", 
			len = getRandomInt(minLength, maxLength-1);

		for(i = 0; i < len; i++) {
			msg += randomText();
		}

		div.innerHTML = msg;

		return div;
	}

THis method will create a DIV with class of “thread”. Using the getRandomInt() we defined earlier, we will create a thread of random characters of random length.

Now comes the fun part. We want the thread to fall from the top of the document to the bottom. This requires changing the top property of the thread. We will increase the top property from -100px, which was set in CSS, to the height of the document.


	var matrix = function() {
		var div = thread();
		holder.appendChild(div);
		div.style.left = getRandomInt(0, width) + "px";
		div.style.top =  (-maxLength * font_size - 100) + "px";

		var speed = getRandomInt(minSpeed, maxSpeed);

		setTimeout(function() {
			animate(div, speed);
		}, speed);
		if(!lock) {
			setTimeout(matrix, getRandomInt(minSpeed, maxSpeed));
		}
	}

Since, we want the thread to appear from a random position, we will give the left property of the div a random value. Now we made two setTimeout() calls. First one to make the thread animate from top of the document to the bottom and Second one to create new Threads.

Let’s create the animate method.

	
	var animate = function(div, speed) {
		var topVal = parseInt(div.style.top, 10);
		if(topVal > height) {
			holder.removeChild(div);
		} else {
			div.style.top = parseInt(topVal + increment) + "px";
			setTimeout(function() {
				animate(div, speed);
			}, speed);
		}
	}

This method repeaditely increase the top property of the thread until height of the document id reached. Each call to the method increase the top property by an increment.

Add a stop method to stop the matrix animation after page load or in our case after loading_time


	var stop = function() {
		lock = true;
	}

Now we need to set up the onload method.


	window.onload = function() {
		holder = document.getElementById('loader');
		matrix();

		setTimeout(stop, loading_time);
	}

The complete matrix.js looks like this


	var width = 1500,
		height = 1000,
		increment = 40,
		maxSpeed = 100,
		minSpeed = 40,
		maxLength = 200, 
		minLength = 50
		font_size = 12;

	var holder, 
		lock = false,
		loading_time = 5000;

	var characters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];

	function getRandomInt(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}

	var randomText = function() {
		return characters[getRandomInt(0, characters.length-1)];
	}

	var thread = function() {
		var div = document.createElement('div');
		div.className = "thread";

		var msg = "", 
			len = getRandomInt(minLength, maxLength-1);

		for(i = 0; i < len; i++) { msg += randomText(); } div.innerHTML = msg; return div; } var animate = function(div, speed) { var topVal = parseInt(div.style.top, 10); if(topVal > height) {
			holder.removeChild(div);
		} else {
			div.style.top = parseInt(topVal + increment) + "px";
			setTimeout(function() {
				animate(div, speed);
			}, speed);
		}
	}

	var matrix = function() {
		var div = thread();
		holder.appendChild(div);
		div.style.left = getRandomInt(0, width) + "px";
		div.style.top =  (-maxLength * font_size - 100) + "px";
		console.log(div.style.top);

		var speed = getRandomInt(minSpeed, maxSpeed);

		setTimeout(function() {
			animate(div, speed);
		}, speed);
		if(!lock) {
			setTimeout(matrix, getRandomInt(minSpeed, maxSpeed));
		}
	}

	var stop = function() {
		lock = true;
	}

	window.onload = function() {
		holder = document.getElementById('loader');
		matrix();

		setTimeout(stop, loading_time);
	}

Congratulations. We have done it.

Download the source code from github or see it in action

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s