An Introduction to Parallax Scrolling Using Stellar.js

November 10, 2014

One of the most discussed web design trends of the last few years is the parallax scrolling effect. Whether you like it or not, it is used by a lot of websites. In this tutorial I’ll give you a brief introduction to parallax scrolling and show how we can reproduce it in a website using a jQuery plugin called Stellar.js.

What’s Parallax Scrolling?

Parallax scrolling involves the background moving at a different rate than the foreground, creating a 3D effect as you scroll down the page. This effect can be a nice addition to any website, but unfortunately if abused it can be quite annoying. From time to time you’ll find websites completely powered by this effect and your experience won’t be graceful. Because this effect usually animates images in the background, the total weight of the website is heavily increased, resulting in a very slow load.

Some examples of such abuse, in my opinion, are the Saukoni website that presented the Kinvara 3, and the well-known Oakley – I am invincible website whose weight is ~20Mb (previously it was ~50Mb!).

Now that you have an idea of what this effect looks like, let’s see how we can employ Stellar.js to create it.

What is Stellar.js?

Stellar.js is a jQuery plugin that allows you to easily add a parallax scrolling effect to your website. Despite the fact that it’s no longer maintained, it’s still very stable, compatible with the latest versions of jQuery, and a lot of developers employ it in their websites. This jQuery plugin is popular on the jQuery plugin registry, so you may have already heard of it.

Now that I’ve described what this plugin does, let’s see how you can use it in your website.

Getting Started with Stellar.js

Getting started with Stellar.js is very easy. The first step is to download the plugin and include it in your page. You can obtain Stellar.js by visiting its GitHub repository or through Bower. If you want to employ Bower, you have to type the command:

bower install jquery.stellar

Once you have downloaded it, you have to include Stellar.js in your page using the usual script element after you have included jQuery as shown below:

<script src="path/to/jquery/jquery.min.js"></script>
<script src="path/to/jquery.stellar.min.js"></script>

After completing this step you’re all set up to adopt a parallax scrolling effect in your pages. This plugin allows you to apply the effect to any scrolling element, for example the window object or any other element you may have. To do that you have to select the element using jQuery’s constructor and then invoke the stellar() method on it.

A minimal example that employs this library upon the window object is shown below:

$('#someElement').stellar();

For the window object, the library also provides a nice shorthand, shown below:

$.stellar();

At this point the library will search for any parallax backgrounds or elements within the specified element and reposition them when the element scrolls.

If you want an example of a page that uses Stellar.js to create a parallax scrolling effect you can take a look at this one.

Options

Stellar.js, like many other plugins out there, has a certain degree of flexibility. In fact, it allows you to set several parameters and tweak how the plugin works to fit your needs. Stellar.js allows you to define general options, which are options used for every element, and per-element options. The general configuration you want to set must be passed to the stellar() method when you invoke it, while the options on a per-element basis are set through the use of some data-* attributes. In this section I won’t cover all of the options available, so if you’re curious to investigate further, you can read this specific section of the repository.

The first general options you can define is to decide the direction you want the effect to be allowed. The classic scroll effect is from the top to bottom and vice versa, but you can also specify a left to right effect and vice versa, or even both. To do that you can adjust the two Boolean properties horizontalScrolling and verticalScrolling. Their default value is true.

Another interesting option is responsive. It’s used to specify if the parallax content must be refreshed when the load and the resize event are fired on the window object. Its default value is false.

The last general option I want to discuss is hideDistantElements. The default value of this property is true and specify that you want to hide parallax elements that move outside the viewport. If you don’t want such behavior you have to set this option to false.

The only per-element option I want to cover, because it’s used often, is data-stellar-background-ratio. The latter accepts a positive number as its value and allows you to change the speed of the effect on the element it is applied to. For example data-stellar-background-ratio="0.5" means change the speed to a value which is half the natural scroll speed. If you want to use this attribute with values lower than 1, the documentation suggests to set background-attachment: fixed; in the style of the element.

Now that you know what this plugin does and how you can configure it, it’s time to see it in action again.

Demo

In this section we’ll develop a demo that use the Stellar.js plugin and some of the options we’ve discussed in the previous section. First, we need to set up the markup. In the following code we’ll create six divs that contain some text:

<div class="content" id="content1">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content2">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content3" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content4" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content5" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content6" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>

With this HTML in place, we need to write some CSS to define the background images used. In our demo we’ll use three images that are repeated two times each. Because we’ll use the data-stellar-background-ratio attributes on the last three divs, we’ll also add background-attachment: fixed; in the CSS.

The final CSS code is shown below:

body {
    font-size: 20px;
    color: white;
    text-shadow: 0 1px 0 black, 0 0 5px black;
}
p {
    padding: 0 0.5em;
    margin: 0;
}
.content {
    background-attachment: fixed;
    height: 400px;
}
#content1 {
    background-image: url("http://www.tamperlock.com/blog/wp-content/uploads/2014/08/london-england.jpg");
}
#content2 {
    background-image: url("http://ocdn.eu/images/pulscms/ZjU7MDQsMCwzMiwzODQsMWZhOzA2LDMyMCwxYzI_/1eb29a70dabd0994cdefaad01ca3c884.jpg");
}
#content3 {
    background-image: url("http://www.zeus.aegee.org/magazine/wp-content/uploads/napoli-golfo-vesuvio.jpg");
}
#content4 {
    background-image: url("http://www.tamperlock.com/blog/wp-content/uploads/2014/08/london-england.jpg");
}
#content5 {
    background-image: url("http://ocdn.eu/images/pulscms/ZjU7MDQsMCwzMiwzODQsMWZhOzA2LDMyMCwxYzI_/1eb29a70dabd0994cdefaad01ca3c884.jpg");
}
#content6 {
    background-image: url("http://www.zeus.aegee.org/magazine/wp-content/uploads/napoli-golfo-vesuvio.jpg");
}

Finally, we need to kick start the effect by invoking stellar(). In this demo we’ll also set a few general options:

$.stellar({
    horizontalScrolling: false,
    responsive: true
});

A live demo of the previous code is shown below and also available as a JSFiddle.

Conclusion

In this article I introduced you to Stellar.js, a jQuery plugin that allows you to create a parallax scrolling effect on the pages of a website. I haven’t covered all the options and the effects available, but this tutorial should have interested you enough to learn more about it.

What do you think about Stellar.js? Have you ever heard of or used it?

JavaScript: Novice to Ninja, 2nd Edition