Rellax~

The page you see on this screen is pretty simple, it’s in 2D. When you scroll down the page, the words and the background all move at the same time. It’s nice, easy to read, but it’s not really tangible. Wouldn’t it be more interesting to have certain things POP out of the screen? Hmm? Hmmm.

Parallax Scrolling allows developers to create websites that are more immersive for the users’ experience. There are a lot of ways to integrate this technique into a website, but the easiest way would be by adding this code to an HTML file:

.parallax {
/* The image used */
background-image: url(‘http://r.ddmcdn.com/s_f/o_1/cx_462/cy_245/cw_1349/ch_1349/w_720/APL/uploads/2015/06/caturday-shutterstock_149320799.jpg');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}
Then by adding the over-laying image:
<div class=”parallax”>
<img src=”
http://vignette2.wikia.nocookie.net/runescape2/images/e/e9/Pekin.png/revision/latest?cb=20161011161422"><br>
</div>

This technique doesn’t really allow for much creativity. No worries, just Rellax……

Rellax is a lightweight, vanilla javascript parallax library that offers so many goodies for you to be as creative as you want! You can easily add Rellax to any project by adding this line of code to your CLI:

npm install rellax —-save

There are many other libraries out there, but this one proved to be a great one. Since Rellax uses javascript to render the parallax actions, you can change the speed at which items move on the page as a user scrolls, and you can also animate items.