Achieve an Extensible, Multilayered Scrolling Parallax Effect in Minutes

Share this article

Key Takeaways

  • The tutorial explains how to create a multilayered scrolling parallax effect using HTML, CSS, and jQuery, which involves adding background, midground, and foreground images and adjusting their positions in the CSS file.
  • The parallax effect creates a sense of depth by moving background images slower than foreground images, enhancing user engagement and providing a dynamic interaction with the website.
  • Implementing parallax scrolling requires careful optimization and testing to ensure it works smoothly across different devices and browsers, and does not slow down page load times, which could potentially affect SEO.
I’ve been wanting to implement a Parallax effect for awhile, but I couldn’t find an “easy” technique anywhere. True to form, this tutorial isn’t easy for those who do not have any experience with modifying JavaScript or CSS. But this is as easy as it gets, and the steps I’ve broken this tutorial down into should be simple enough for even a novice to follow. Here’s the final version of what you’ll be creating and the resource files for it: Demo: Download (ZIP – 700k)
This Parallax effect was initially developed by Jonathan Nicol over at Pixel Acres/F6 Design. I couldn’t have put this together without his work and want to make sure to acknowledge his hard work.
The rest of this tutorial will focus on walking you through how to slowly build up this effect so that you can modify it to suite your specific needs. Too many other tutorials throw you right into the fray, leaving out a lot of the details that you’ll need for editing the design. I like this Parallax version (and I tried dozens), because it has three independent layers that you can easily adjust. You can add text or use images easily, although this tutorial will use images as background, floating elements. If you want to use your own images, make sure they are transparent PNG files. I have not tested the GIF format, and JPG files will not be transparent. Unless you are using perfect squares in your background images, you’re going to want the transparent PNG format. So, hold on and have some fun as we scroll into the interesting rabbit hole of Parallax effects.

Step 1: Download Files

To get started, download the resources needed to complete the tutorial. You’re going to need four pre-built files:
  1. jQuery 1.6 – the jQuery engine that makes all things work
  2. Modernizr.js – a jQuery effect that gives us a nice smooth scrolling effect if navigation elements are clicked
  3. Parallax.js – the jQuery effect that makes the Parallax effect work
  4. Main.css – my CSS file
Other files include the images that I used for this tutorial that you will (hopefully) replace later. Download the full assembly of files using the link above.

Step 2: Head Content

Open up a new HTML document in your favorite HTML or text editor. You’re going to copy and paste the following code: <html> <head> <title>Parallax Tutorial - Start Here</title> <meta name="description" content="Parallax Tutorial" /> <link rel="stylesheet" media="all" href="css/main.css" /> <script src="js/modernizr.custom.37797.js"></script> <script src="js/jquery-1.6.1.min.js"></script> <script src="js/parallax.js"></script> </head> <body> </body> </html>
This won’t get you much, but it’s a critical start. In the head section of the HTML, we have the links to our files, so make sure you save this HTML file in the main folder with the CSS file in a sub-folder called “css” and the JavaScript in a folder called “js”, or this won’t work. Open up the “01-start-here.html” file from the download to double check your work.

Step 3: Adding Content

Now, we can start to add content to the HTML. This code goes between the <body> tags: <div id="wrapper"> <div id="content"> <!-- Page #1 --> <article id="page-number-1"> <header> <h1>Parallax Demo</h1> </header> <p>This is a sample Parallax scrolling site with three pages. You can add all kinds of extra navigation elements on your own time, but I just wanted a simple, ready to rollout, vertical parallax system that I could easily implement and edit later.</p> <nav class="next-prev"> <hr /> <a class="next page-number-2" href="#page-number-2">Next</a> </nav> </article> <!-- Page #2 --> <article id="page-number-2"> <header> <h1>Wow!</h1> </header> <p>Did you like that nice, smooth movement? Pretty slick, eh? You can either scroll or click on the navigation elements below. It's your decision. You're an adult. I'll leave that up to you. </p> <nav class="next-prev"> <a class="prev page-number-1" href="#page-number-1">Prev</a> <hr /> <a class="next page-number-3" href="#page-number-3">Next</a> </nav> </article> <!-- Page #3 --> <article id="page-number-3"> <header> <h1>More stuff...</h1> </header> <p>You can add as many pages as you want, but it takes some work to get all the CSS, and JS working together. Just remember that each page you add needs to have this HTML, the CSS, and the parallax.js file updated with the new page. Don't worry, you'll be a pro before you know it!</p> <nav class="next-prev"> <a class="prev page-number-2" href="#page-number-2">Prev</a> <hr /> <a class="next page-number-4" href="#page-number-4">Next</a> </nav> </article> <!-- Page #4 --> <article id="page-number-4"> <header> <h1>Last page!</h1> </header> <p>Of course, there are all kinds of HTML and JS additions you can make. From navigation bars to the Lettering.js jQuery plugin, there's no limit. This parallax technique only relies upon the basic CSS and lightweight jQuery plugins to create the effect. Time for you tweak it and make it your own!</p> <nav class="next-prev"> <a class="prev page-number-3" href="#page-number-3">Prev</a> <hr /> </nav> </article> </div> Now, we need slow way down and look at what we’ve just done. There are a couple of predefined elements I’m using that we need to examine.
  • Each page of your site will need to start with <article> to designate the content properly.
  • The title section of each page is designated by the <header> tag. This is where the page will rest when scrolling after clicking one of the navigation buttons.
  • <nav> is where to put the navigation links. You can create your own of course, but these are the pre-built versions.
To add a new page, you will have to edit three files:
  • HTML document
    • Add a new page that includes the <article> and unique ID – id=”page-number-5″, for example.
    • Update the navigation element of the previous page to include your new page. Reference the ID name you gave it.
  • CSS document
    • Under the “content article” section, add your page ID to the list
    • Add a new #page-number-5 tag (or whatever you called your page) under the “content article” tag. Make the position absolute and the height in increments of 1090 px – so page five will be height:4360px; as an example.
  • Parallax.js
    • Add a new function for the new page (don’t freak out! This is easier than it sounds!)
    • Just copy and paste the “page-number-4” function and rename the ID inside it
Check out the finished version of this step in the “02-add-content.html” file from the downloadable resources.

Step 4: Adding Background Images

Below your content and above your closing </body> tag, add this code: <div id="parallax-bg1"> <img id="bg1-1" src="img/cloud1.png" alt="cloud"/> <img id="bg1-2" src="img/cloud2.png" alt="cloud"/> <img id="bg1-3" src="img/cloud1.png" alt="cloud"/> <img id="bg1-4" src="img/cloud2.png" alt="cloud"/> <img id="bg1-5" src="img/cloud1.png" alt="cloud"/> </div> This adds the images in the background or the “farthest” layer. In other words, these images move the least. You can individually position each image using the CSS document. Just open the CSS doc and search for “background image” and you will see how each is positioned. To add a new image, you will need to duplicate and rename the a new CSS attribute for each image. See the “03-background-images.html”  file within the download for the finished step.

Step 5: Adding Midground Images

This is just like the previous step, so paste this code under the code for the background images: <div id="parallax-bg2"> <img id="mg2-1" src="img/cloud3.png" alt="cloud"/> <img id="mg2-2" src="img/cloud3.png" alt="cloud"/> <img id="mg2-3" src="img/cloud3.png" alt="cloud"/> <img id="mg2-4" src="img/cloud3.png" alt="cloud"/> <img id="mg2-5" src="img/cloud3.png" alt="cloud"/> <img id="mg2-6" src="img/cloud3.png" alt="cloud"/> <img id="mg2-7" src="img/cloud3.png" alt="cloud"/> </div>
Notice that I used the same image over and over again and I used several more than the background image. This is the beauty of this effect, as it allows you to reuse elements if you want or add lots of different images or text. Just make a new CSS attribute for each new image that you want to add and position it as needed. You can edit the position of each element in the CSS file under the “midground image” section. See the final piece in the “04-midground-images.html” file within the download.

Step 6: Adding Foreground Images

You should be a champ at this by now. Same thing as Steps 5 and 6: <div id="parallax-bg3"> <img id="fg3-1" src="img/twitter.png" width="529" height="386" alt="Big freaking Twitter bird"/> <img id="fg3-2" src="img/facebook.png" width="603" height="603" alt="Facebook in your face!"/> <img id="fg3-3" src="img/linkedin.png" width="446" height="446" alt="LinkedIn logo"/> <img id="fg3-4" src="img/landscape.png" width="1104" height="592" alt="Landscape foreground"/> <img id="fg3-5" src="img/design-festival-logo.png" width="135" height="136" alt="Bluified Design Festival logo"/> </div> Once again, the position can be easily edited for these images in the CSS document under “foreground images”. See the finished step in the file “05-foreground-image.html” with the files.

Step 7: Adding Navigation Elements (Optional)

I’m only adding this step because Johnathan Nicol did such a great job that I thought it was worth keeping his idea in this tutorial. You can place this code anywhere within the <body>, but I like to keep it at the top (but below the opening content div): <nav id="primary"> <ul> <li> <h1>Intro</h1> <a class="page-number-1" href="#page-number-1">View</a> </li> <li> <h1>Wow!</h1> <a class="page-number-2" href="#page-number-2">View</a> </li> <li> <h1>More stuff...</h1> <a class="page-number-3" href="#page-number-3">View</a> </li> <li> <h1>Last page!</h1> <a class="page-number-4" href="#page-number-4">View</a> </li> </ul> </nav> If you want more pages, it’s as easy as adding another <li> and your content. Make sure to update the anchor text properly and you’re all set. The version with nav code is “06-navigation.html” in the resource files.

Conclusion

Adding impressive effects doesn’t have to take third-party browser plugins or a lot of expertise. You can create scrolling effects with standardized technologies and widely-used script libraries. After that, it’s up to the designer to add their own flair. I hope you liked the scrolling effect! Feel free to share your implementations (or other’s) in the comments.

Frequently Asked Questions about Vertical Scrolling Parallax Effect

What is the difference between parallax scrolling and regular scrolling?

Parallax scrolling is a special scrolling technique used in web design where background images move slower than foreground images, creating an illusion of depth and immersion. This is different from regular scrolling where all elements on the page move at the same speed, maintaining the same relationship with each other.

How does parallax scrolling enhance the user experience?

Parallax scrolling can make a website more engaging and visually appealing. It creates a sense of depth and movement, which can make the user feel like they are interacting with the website in a more dynamic way. This can lead to increased user engagement and time spent on the site.

Is parallax scrolling suitable for all types of websites?

While parallax scrolling can add a unique and engaging element to a website, it may not be suitable for all types of websites. For instance, websites that require fast load times or are heavy on text content may not benefit from parallax scrolling. It’s best used on websites that aim to tell a visual story or showcase a product or service in a visually engaging way.

Does parallax scrolling affect website performance?

Parallax scrolling can potentially affect website performance, especially if not implemented correctly. It can slow down page load times and may not work smoothly on all devices or browsers. However, with proper optimization and testing, these issues can be minimized.

How can I implement parallax scrolling on my website?

Parallax scrolling can be implemented using CSS, JavaScript, or a combination of both. There are also various libraries and plugins available that can simplify the process. However, it requires a good understanding of web design and coding to implement effectively.

Can parallax scrolling affect SEO?

If not implemented correctly, parallax scrolling can potentially affect SEO. This is because it can slow down page load times, which is a factor that search engines consider when ranking websites. However, with proper optimization, this impact can be minimized.

Is parallax scrolling mobile-friendly?

Parallax scrolling can be mobile-friendly, but it requires careful implementation and testing. Some mobile devices or browsers may not support parallax scrolling, or it may not work as smoothly as on desktop. Therefore, it’s important to ensure your website is responsive and works well on all devices.

What are some examples of websites with effective parallax scrolling?

There are many websites that use parallax scrolling effectively to create a unique and engaging user experience. Some examples include the Firewatch game website, the Apple Mac Pro website, and the Spotify “Year in Music” website.

What are some best practices for implementing parallax scrolling?

Some best practices for implementing parallax scrolling include keeping it simple, testing on multiple devices and browsers, optimizing for performance, and ensuring it enhances rather than detracts from the user experience.

Can I use parallax scrolling with other web design techniques?

Yes, parallax scrolling can be used in conjunction with other web design techniques. For instance, it can be combined with responsive design, animation, or interactive elements to create a more dynamic and engaging website. However, it’s important to ensure these elements work together seamlessly and don’t detract from the user experience.

Tara HornorTara Hornor
View Author

Tara Hornor has a degree in English and has found her niche writing about marketing, advertising, branding, graphic design, and desktop publishing. She is a Senior Editor for Creative Content Experts, a company that specializes in guest blogging and building backlinks. In addition to her writing career, Tara also enjoys spending time with her husband and two children.

scrolling parallaxtutorialvertical scrolling parallax
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week