In today’s tutorial we will learn how to do a simple parallax effect with as little code as possible. With the effect we accomplish 3d feel of the webpage by controlling the movement of the layers of the webpage. Basic knowledge of html, css and jquery is recommended.

2gika-paralax-940x460

View the Parallax demo

We created more advanced and fun parallax demo here – View the Parallax demo V2

1. For the first step, we create an index.html file with basic a html5 page structure. Different speed of the moving background is achieved with data-speed attribute and it is called by custom.js

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>2GIKA paralax test</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<link rel="stylesheet" href="css/style.css">
		<script type="text/javascript" src="js/custom.js"></script>
	</head>

	<body>
		<div class="section first parallax" data-speed="3">
			<h1>This is <strong>Paralax</strong> test page</h1>
			<h2>Lorem ipsum dolor sit amet.</h2>
		</div>

		<div class="section second parallax" data-speed="10">
			<h2>Second Slide</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, sint earum officiis quo? Voluptatem, omnis, doloribus, alias corporis est qui quidem deserunt suscipit id nobis at assumenda labore. Inventore expedita suscipit commodi totam maiores? Autem, accusamus sapiente adipisci quis tempora deserunt odio voluptates tempore itaque fugit commodi illo expedita id numquam in excepturi non doloribus consequatur nihil odit. Illum, quae, explicabo, error necessitatibus sunt eos impedit praesentium dolorem exercitationem tempora maxime rem aspernatur adipisci amet vitae distinctio possimus sit quo repudiandae odit saepe ullam libero! Nisi, soluta, est assumenda quo cumque dolore sapiente vel doloribus repellendus totam animi quos reprehenderit!</p>
		</div>
		<div class="section third parallax" data-speed="3">
			<h2>Third Slide</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, omnis, cumque, provident, praesentium numquam ab velit maiores labore incidunt debitis amet libero obcaecati quasi nihil nemo a sequi impedit consequuntur id vel. Recusandae, enim est tenetur aliquam excepturi sint vel!</p>
		</div>

		<div class="section fourth parallax" data-speed="5">
			<h2>Forth Slide</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, quos.</p>
		</div>
	</body>
</html>

2. Here we write some basic CSS with added Mayer Reset CSS, which can be pasted before body tag.

body {
	margin: 0;
	padding: 0;
	line-height: 1.6;
	font-family: Georgia, Arial, sans-serif;
	font-size: 12px;
	color:#666;
	font-weight: normal;
}

strong, b {
	font-weight: bold;
}

.section {
    background-size: cover;
    width: 100%;
    min-height: 600px;
    position: relative;
    z-index: 0;
}

.first {
   background: url('../img/pat2.png') 0 0 repeat fixed;
   min-height: 700px;
}

.second {
   background: url('../img/pat1.png') 0 0 repeat fixed;
    -webkit-box-shadow: 0px 0px 60px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 0px 60px rgba(0,0,0,0.4);
    box-shadow: 0px 0px 60px rgba(0,0,0,0.4);
}

.third {
   background: url('../img/bg1.jpg') 0 50% no-repeat fixed;
}

.fourth {
    background: url('../img/pat2.png') 0 0 repeat fixed;
}

h1,h2 {
	text-align: center;
	color: #666;
	font-size: 60px;
	font-size: 5.4rem;
	line-height: 1.2;
	width: 100%;
}

h1 {
	padding-top: 200px;
	padding-bottom: 100px;
	color: #fff;
	color: rgba(0,0,0,0);
	text-shadow:
	0px -1px 0px rgba(255,255,255,0.3),
	0px 0px 3px rgba(0,0,0,0.15),
	0px 2px 1px rgba(0,0,0,0.25),
	0px 1px 0px rgba(0,0,0,0.2),
	0px 3px 4px rgba(0,0,0,0.2),
	0px 4px 8px rgba(0,0,0,0.1);
}

h2 {
	font-size: 40px;
	font-size: 3.5em;
	padding-top: 50px;
	padding-bottom: 50px;
}

p {
	margin: 0 auto;
	min-width: 500px;
	max-width:800px;
	line-height: 2;
	padding:0 10px;
}

p:first-letter {
	font-size: 30px;
	font-weight: bold;
	color:#888;
	line-height: 19px;
	text-align: center;
}

3. Custom.js – horizontal position of the background is set on 50%, x position is set by equation with a data-speed variable.

$(document).ready(function(){

	$('.parallax').each(function(){
	    var $bgobj = $(this);

	    $(window).scroll(function() {
	        var yPos = -(($(window).scrollTop() - $bgobj.offset().top) / $bgobj.data('speed'));

	        var coords = '50% '+ yPos + 'px';

	        $bgobj.css({ backgroundPosition: coords});
	    });
	});
});

4. Conclusion – Parallax effect can be useful in landing pages for adding more engaging content, so that the user is more likely to scroll the whole page. A similar effect is used on our homepage 2gika