An Introduction to Parallax Scrolling Using Stellar.js

Share this article

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?

Frequently Asked Questions (FAQs) about Parallax Scrolling Using Stellar.js

What is Stellar.js and why is it used for parallax scrolling?

Stellar.js is a jQuery plugin that provides parallax scrolling effects to any scrolling element. The main reason it is used for parallax scrolling is because it simplifies the process of creating this effect. Instead of having to manually code the effect, developers can use Stellar.js to achieve the same result with less effort and time. It also provides more control and customization options compared to traditional methods.

How do I install and use Stellar.js in my project?

To install Stellar.js, you need to include the jQuery library and the Stellar.js script in your HTML file. After that, you can initialize Stellar.js by calling the stellar function on the window object. You can then use the data attributes provided by Stellar.js to customize the parallax effect on different elements.

Can I use Stellar.js with other JavaScript libraries?

Yes, Stellar.js is a jQuery plugin, so it can be used with any project that uses jQuery. However, it may not work properly with other JavaScript libraries that manipulate the scroll position or the CSS properties of elements.

How can I customize the parallax effect with Stellar.js?

Stellar.js provides several data attributes that you can use to customize the parallax effect. For example, you can use the data-stellar-background-ratio attribute to control the scrolling speed of the background image. You can also use the data-stellar-offset-parent attribute to specify a different offset parent for an element.

Why is my parallax effect not working properly with Stellar.js?

There could be several reasons why your parallax effect is not working properly. One common issue is that the height of the scrolling element is not set correctly. Another issue could be that the data attributes are not set correctly. Make sure to check the documentation and the examples provided by Stellar.js for guidance.

How can I create a horizontal parallax effect with Stellar.js?

To create a horizontal parallax effect with Stellar.js, you need to set the horizontalScrolling option to true when initializing Stellar.js. You can then use the data-stellar-ratio attribute to control the scrolling speed of the elements.

Can I use Stellar.js for mobile development?

Yes, Stellar.js supports mobile development. However, keep in mind that the parallax effect may not work as expected on all mobile devices due to the differences in the way they handle scrolling.

How can I troubleshoot issues with Stellar.js?

If you encounter issues with Stellar.js, the first step is to check the console for any error messages. You can also use the debug option provided by Stellar.js to get more detailed information about the issue. If you still can’t solve the issue, you can ask for help on the Stellar.js GitHub page.

Can I use Stellar.js with a CMS like WordPress?

Yes, you can use Stellar.js with a CMS like WordPress. However, you may need to manually add the Stellar.js script and the initialization code to your theme’s files.

How can I optimize the performance of Stellar.js?

To optimize the performance of Stellar.js, you can use the scrollProperty and positionProperty options to control how Stellar.js updates the position of the elements. You can also use the responsive option to disable the parallax effect on smaller screens.

Aurelio De RosaAurelio De Rosa
View Author

I'm a (full-stack) web and app developer with more than 5 years' experience programming for the web using HTML, CSS, Sass, JavaScript, and PHP. I'm an expert of JavaScript and HTML5 APIs but my interests include web security, accessibility, performance, and SEO. I'm also a regular writer for several networks, speaker, and author of the books jQuery in Action, third edition and Instant jQuery Selectors.

ColinIjQuerystellar.js
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form