Tutorials
Tutorials

Creative 404 Error Page With Parallax Effect

Tutorial on designing and developing a creative 404 error page with cool parallax effect using parallax.js


View Demo Download

So many times we come across 404 error page on many websites some of them are as usual boring and some of them are really creative and pleasant. And today in our first tutorial we will be creating one cool 404 error page using a really cool JavaScript plugin parallax.js. So let’s get our hands dirty!

Writing Markup (HTML)

As you can see, there are very few and simple lines of HTML. You just have to update the path of your images in the markup.

data-depth attribute specifying its depth within the scene. You can vary the value of it in between 0 to 1. A depth of 0 will cause the layer to remain stationary, and a depth of 1 will cause the layer to move by the total effect of the calculated motion.

<div id="container" class="container">
	<ul id="scene" class="scene">
		<li class="layer" data-depth="1.00"><img src="images/404-01.png"></li>
		<li class="layer" data-depth="0.60"><img src="images/shadows-01.png"></li>
		<li class="layer" data-depth="0.20"><img src="images/monster-01.png"></li>
		<li class="layer" data-depth="0.40"><img src="images/text-01.png"></li>
		<li class="layer" data-depth="0.10"><img src="images/monster-eyes-01.png"></li>
	</ul>
	<h1>Opps! Seems like this monster ate your page.</h1>
	<input type="text"><a href="#" class="btn search">Search</a>
	<span>or</span>
	<a href="#" class="btn">Back to home</a>
</div>

Adding Style (CSS)

img {
display: block;
width: 100%;
}

.container {
position: relative;
max-width: 800px;
margin: 0 auto 5%;
padding: 5%;
text-align: center;
color: #fff;
}
.container h1 {
font-weight: normal;
font-size: 24px;
margin-bottom: 2em;
}
.container a.btn {
border: 3px solid #fff;
border-radius: 2em;
padding: 10px 30px;
color: #fff;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
}
.container a.btn.search {
border-radius: 0 2em 2em 0;
}
.container a.btn:hover {
background-color: #fff;
color: #d88705;
}
input[type="text"] {
border: 3px solid #fff;
border-right: none;
border-radius: 2em 0 0 2em;
padding: 10px 30px;
color: #fff;
background-color: transparent;
display: inline-block;
outline: none;
font-size: inherit;
font-family: inherit;
}
.scene {
padding: 0;
margin: 0;
}

JavaScript

To trigger a Parallax scene, we need to select parent DOM Element and pass it to the Parallax constructor.

<!-- Scripts -->
<script src="js/parallax.js"></script>
<script>
     // Pretty simple huh?
     var scene = document.getElementById('scene');
     var parallax = new Parallax(scene);
</script>

And now we are good to go! You can use this page in your next project and don’t forget to do good deed by giving credits to the author of parallax.js by Matthew Wagerfield and a beautiful illustration by freepik.com

PS: It looks cool on your mobile or tablet equipped with a gyroscope and responds as you tilt your device! Use this link http://bit.ly/1N2dyUk

View Demo Download


A Product Designer. Currently designing and developing digital products for founders and startups. Can speak HTML5, CSS3 and JavaScript (sometimes English too).

View Comments
There are currently no comments.