Parallax Implementations: Three ways to use this eye popping effect

Stephen Kennedy - Lead Web Developer
Parallax is a fairly old visual effect. The effect works like this, by varying the speed of the movement of two or more flat planes, we can simulate depth, lending the 2D elements a feeling of 3D space.

In modern web design, parallax effects are relatively common and come in a variety of flavors, most of them linked in some way to the user's mouse or scroll position.

For all of our onpage demonstrations, we'll be using a simple DIV structure:
<div id="one">
	<!-- We will place some content here -->

	<h1>This is some demonstration content</h1>
	<p>It is here only to take up space</p>
</div>

<div id="two"></div>

<div id="three">
	<!-- We will put more content here -->
	<p>We need to take up even more space</p>
</div>
Probably the most common, and by far the easiest to implement, is a two-plane static parallax. If we think of our webpage as separated into two planes: the foreground, where all of your text and content is, and the background, where we'll be placing a background pattern, what we want is to create some depth between the two. To do that we'll need some styling:
<style type="text/css">
	#one{
		padding: 40px;
		background-color: red;
		color: white;
		margin-top: 20px;
		margin-bottom: 0;
	}
	#two{
		height: 200px;
		background-image: url('/upload/image/seamless.png');
      	background-color: white;
		background-position: center;
		background-attachment: fixed;
		background-size: 100% auto;
		box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.7) inset;
	}
	#three{
		padding: 40px;
		background-color: blue;
		color: white;
		margin-top: 0;
		margin-bottom: 20px;
	}
</style>

If you are familiar with CSS, you can already see that all the interesting calls are on #two. By using some default options in CSS, we can place a background element in a div, size and position it appropriately, and then use an attachment mode called "Fixed." This works exactly the way the CSS "position: fixed;" call works, in that it positions the element relative to your screen, rather than relative to the other elements on the page. This creates a relatively simple effect where the foreground moves, but the background does not. See for yourself: this is our HTML and CSS as rendered by a browser.

This is some demonstration content

It is here only to take up space

We need to take up even more space

There are some relatively obvious downsides to this method. First of all, the simulation of depth is relatively minimal. While it does the same thing our other two methods do, the effect is rather underwhelming. At most, it looks like two flat layers separated by a few centimeters, and you are simply sliding one over the other as you scroll down the page. However, you can achieve some very memorable effects with careful design. This code pen by Shane Zents demonstrates a strong use case using several variations on the same image with some text content.
 

See the Pen RRJWAA by Shane Zentz (@szentz) on CodePen.

One thing to keep in mind is that this is the only method with almost perfect browser compatibility, so if that is one of your design concerns, this may well be the only option you have available.

For our other two demonstrations, we need to turn to the power of javascript.

Another common method, and what most people are referring to when they mention parallax web elements are multi-layered movements attached to the scroll position via javascript. There are a number of libraries that enable this kind of usage with relatively little code (one of the most popular is ScrollMagic, http://scrollmagic.io/), and they all work just about the same way. The element to the background is positioned absolutely, and then some quick math is run on the direction, scroll position, and speed of the element's planned movement to get the new position of the element. This calculation is run, if it is correctly optimized, every time the scrollbar is moved.

A good demonstration of this can be found at http://jessandruss.us, a fun website put together to celebrate a couple's relationship leading up to their engagement. As you scroll through this website, you'll notice that this method allows for far more flexibility in positioning, direction, speed, and effects. All of this creates a much more energetic and artistic final product, and when used to that end, creates a much greater sense of depth.

However, there is a large drawback to this method: optimization. My apologies if you tried to open the last link on a mobile phone. The website was never styled for cell-phone browsers, and there is a very good reason why. These kinds of effects are very intensive to run, and they don't perform very well on lower-end hardware—like you might find in a netbook or a smartphone. Because the method relies on repositioning the elements every time the scrollbar is moved, the browser has to re-render the whole page for every movement, and that can eat up a lot of resources. This creates a laggy and non-responsive experience for visitors to your website.

The best compromise, then, would be something that takes the relative simplicity and speed of the first method and combines it with the flexibility of the second method, and luckily, HTML5 has an element that can fit that bill. While most elements only have a few methods that allow GPU acceleration of the render process, HTML5's Canvas element is always GPU accelerated, offloading those calculations to a processor built to handle them. Additionally, the render process of the Canvas element is separated from the main render process. When the device is not powerful enough to do everything the canvas is asking of it, it will simply drop frames from the canvas, leaving the rest of your site responsive and usable.

The same logic as the other javascript method applies: we'll be positioning elements inside the canvas and moving them in relation to the scroll position of the page. The only real difference is that we will be running those calculations within the canvas context. And here is how that looks:

This is some demonstration content

It is here only to take up space

We need to take up even more space

In this example we've used our div structure again, with one small change:
<div id="one">
	<!-- We will place some content here -->

	<h1>This is some demonstration content</h1>
	<p>It is here only to take up space</p>
</div>

<div class="canvas" id="two">
	<!-- We will place our canvas here -->
	<img data-direction="down" data-ratio="1" src="/upload/image/layer3.jpg" />
	<img data-direction="down" data-ratio="0.5" src="/upload/image/layer1.png" />
	<img data-direction="up" data-ratio="0" src="/upload/image/layer2.png" />
</div>

<div id="three">
	<!-- We will put more content here -->
	<p>We need to take up even more space</p>
</div>
Our second div has been given a class and now contains three "img" tags. You'll also notice that we are not coding the canvas in. The javascript library I developed will create our canvas by pulling the relevant data from the img tags before swapping them out with our canvas element. The two data fields on each img tag control the speed and direction of the movement. Currently, the library only supports vertical movement (up or down) and uses a ratio system to control the speed of movement.

To create our parallax effect, we need only call our function inside a document ready call (note, this library depends on jQuery to function):
<script type="text/javascript" src="/include/js/aParallax.multi.js">
</script> <script type="text/javascript">
	$(document).ready(function(){
		var t = aPara.llax('.canvas');
	});
</script>


To prevent elements from looking wrong or unnatural when they are outside the intended movement area, I have also locked movement to the edges of the images we are using. This creates a strong effect with strong performance that will open up many new options in the near future.

A final note about this method: Canvas elements have been widely adopted by all major browsers across devices since 2016, and we will soon be in an age where all visitors to your websites will be able to enjoy canvas accelerated effects. However, a relatively strong cross-section of users may still be using older browser versions, so if you use this method, be sure to provide some graceful failure state for your users, should they fall into that group.
Thursday January 4th, 2018#JavaScript #CSS #tutorials #parallax