Tutorial Tuesdays: Design a Star Wars Background, We Must

We're obsessed with Star Wars: The Last Jedi. A LEGO Darth Vader hangs out between desks; we play the soundtrack over our office speakers; and for our Christmas party, we saw The Last Jedi in theaters. We're also obsessed enough to write a Star Wars-themed post on adding parallax with multiple backgrounds to your website using jQuery Parallax. Instead of your run of the mill stock photos, our example is filled with BB-8, X-Wings, ATT Walkers, and Master Luke Skywalker as backgrounds. And don't worry: this tutorial is free of spoilers!

Despite our Star Wars theme, there is value in using parallax and in using parallax with multiple backgrounds. Parallax makes scrolling through your website seamless by creating a depth and transition effect when scrolling down, thus enhancing the user experience (UX).  Parallax helps further branding by keeping even the backgrounds cohesive. Although parallax is a definite value-add when implemented appropriately, it's important not to use it too much as it deflates the effect the more it is used on your website.

Below is the HTML, CSS, and JavaScript required.

HTML

You can create individual sections to house the parallax container. The HTML is fairly straight forward as the CSS and JS are the prime drivers of the underlying code's features.

CSS

For each section's parent container, you will need to specify the background image you want to include. The key is setting the background position to fixed.

JavaScript

Using the "jquery-parallax" extension by Ian Lunn, we can then use the parallax() function to create our intended effects. You can adjust the parallax settings of each background image (and any overlay elements) simply by modifying the configurations for that specific element.

Parallax scrolling allows your users to engage with your organization in a unique way. Rather than a boring static image gallery, you control the rate at which your users are exposed to visuals. And, much like a good Star Wars subplot, parallax scrolling can contribute to the overall storytelling of your website. This tutorial allows you to take your users on a journey, as once they've started scrolling, they're too visually engaged to stop. 

Feel free to swap out the images in our tutorial with those appropriate to your website (or the fandom of your choice).