Everything you need to know about parallax scrolling and Squarespace

Today’s post was inspired by a recent conversation I had with a client where we discussed which Squarespace template to use for their new website in order to present their content in the best way possible. I love it when a real-life situation or question comes up as a topic that I can share with you all here on my blog!

In this post, we are going to dive DEEP into one of the hottest web design trends. You might not have heard of it but you definitely know it when you see it. That’s right, it’s parallax scrolling!

There’s a ton of information here because I want to make sure that you have everything you need to decide if parallax scrolling is a design feature that makes sense for you to use on your own website. If you decide to use it, I’m also going to show you how that works with Squarespace and walk you through you exactly how to get started with it!

Be sure to scroll down and watch the video tutorial!

Consider this your #nerdalert and keep reading if you’re ready to get technical!

What is parallax scrolling?

Even if you’ve never heard the term “parallax scrolling”, I’m almost certain that you’d recognize it when you see it because it’s all over the internet. Parallax scrolling is a subtle transition effect that started out in classic video games and then trended over to web design. Ever since it came onto the scene, parallax scrolling has had a big impact on user interface and design - for good reason!

Basically, parallax scrolling is a way to format a website so that the background content (usually an image or video) moves at a slower speed that the foreground content as you scroll down the page. People often think of it as a “digital slow reveal” because it feels like the sections are overlapping themselves. It’s used to create a 3D scrolling effect where the effect seems to pop out of the screen as you move up and down the webpage, and this feature is technically achieved through some fancy code on the backend of the website.

Web designers choose to include parallax scrolling when their goal is to have interesting transitions between content sections, all while retaining a seamless flow and uninterrupted experience for the user.

Parallax scrolling is a web design trend that is here to stay because it creates a sense of depth on a website and really captures visitors attention. That being said, it's not for everyone so be sure to consider my pros & cons before setting it up on your website!

Examples of parallax scrolling

1. 3 Phase Global

I designed 3 Phase Global's website last year and you can see parallax scrolling in action on the homepage. Click here to see the website reveal blog post and learn more about this particular site.

2. Superlime

Superlime does a great job of incorporating subtle parallax scrolling on their website.

3. Seattle Space Needle

This is definitely one of the most interactive websites out there and they do a phenomenal job of incorporating parallax scrolling into the website's design to enhance user experience.

Pros & Cons of parallax scrolling

PROS

There are loads of reasons why people love and use parallax scrolling on their websites and we’re going to kick off this comparison section with the Pros.

First of all, parallax scrolling is a quick and clear indicator of a modern website (vs. one that has been live and untouched for years without a redesign). Not only that, but it also sets a website apart from others in the industry because not every site uses this design feature. This also shows that the brand or business is willing to experiment with design and that they are embracing innovative and modern features.

There’s also a certain “wow factor” for first time visitors to a site that uses parallax scrolling so it’s great for websites that aren’t aiming for a ton of repeat visits. Parallax scrolling works well with websites that have a clean design and interface, contrasting colour palettes, and on sites that have a minimalist style yet still want customization and differentiation. As such, you’ll often see parallax scrolling accompanied by bold typography for maximum effect.

Parallax scrolling also works well on portfolio sites, landing pages and other lengthy/long scrolling websites and pages because it enhances (and even improves!) usability.

Finally, there’s an extra level of site engagement when you combine parallax scrolling with video backgrounds.

CONS

Let me start off by saying that I think that parallax scrolling is the bee’s knees but there ARE certain drawbacks and reasons why you might not want to include it on your website.

First of all, parallax scrolling list not always compatible with responsive design (for example, if you’re on Wordpress and the theme doesn’t support it, or if you’re building the site totally from scratch with your own coding) so it’s important to see how it performs on different sized devices. The website content might be presented differently on mobile vs a desktop computer if parallax scrolling is being used, and this could lead to a poor mobile experience. More info on parallax scrolling, Squarespace and responsive design below.

Parallax scrolling also is not great for sites intended to provide lots of information or sell things. This is because it can be confusing for the user when parallax scrolling is used incorrectly on business websites or blogs because the content is presented in layers or sections that are not organized or well thought out. In this case, parallax scrolling takes away from the experience because it distracts from the content.

Another drawback to parallax scrolling is that while you might end up with a snazzy aesthetic, you might also impact page load time in a negative way. This could be a problem because if the site is slow to load, visitors to you website might jump ship and exit away from the page. Even if the site looks great, they might not stick around because the user experience is bad. Remember that people’s attention spans are insanely short and your website’s goal is to keep them engaged and around as long as possible. A page or site that is slow to load could see lower traffic and even have negative effects on search ranks (more on that below).

If you want people to return to your site or your goal is repeat traffic, parallax scrolling might be a bad choice because some people find the animation distracting or even annoying. This could negatively impact your website’s conversion rates so it’s definitely worth considering before including the feature on your site.

Most of the time, however, parallax scrolling goes wrong when people forget the golden rule : less is more. Parallax scrolling is a value-add when it’s used to make important areas of your site stand out and it should NOT be added willy-nilly all over your site just because it’s a cool design feature.

Parallax scrolling and it’s impact on SEO

There's a old myth in the online world that parallax scrolling is an SEO killer but that’s not exactly true anymore. The root of this concern is because parallax scrolling doesn’t always play nicely with responsive design, meaning that the way the website scrolls might look different on a desktop/laptop vs. a mobile device (phone) or tablet (iPad). Search engines put mobile user’s requirements front and centre (because mobile browsing is increasing every day) so anything that takes away from a good mobile experience may be penalized in rankings. this is why people proceed with caution when it comes to parallax scrolling if SEO is a major concern.

The good news, however, is that if your website is built with Squarespace, this isn’t a problem and there is no negative effect on SEO because all of their templates are 100% mobile responsive!

SQUARESPACE SEO SERIES

This article is part of my series on Squarespace SEO. I have so many tips to share on the subject that it would have been crazy to put it all in one article! There are many misconceptions about Squarespace SEO which is why I’m going to dedicate a few posts to this topic.

Click to view all posts in the Squarespace SEO Series.

GRAB MY FREE SQUARESPACE SEO CHECKLIST BELOW!

Parallax scrolling and Squarespace

If you haven’t guessed by now, the answer is YES, you can include parallax scrolling on your Squarespace website. No extra coding required!

Parallax scrolling is used as a visual effect on headers in any Squarespace template in the Brine family. This means that not every Squarespace template supports parallax scrolling. As such, if you are using a Squarespace template that is NOT in the Brine family, this feature might not be available to you. If you aren’t sure if your template supports parallax, check out this list of Squarespace templates in the Brine family.

Once you’ve established that your website is running on a template within the Brine family, you can enable parallax scrolling. Just remember that when you set up parallax scrolling it will be applied to ALL banners on your site (i.e., it's a site wide feature)!

Parallax scrolling is available on all pages that support banners. This includes:

Index pages
Regular pages
Product pages
Events pages
Album pages
Blog pages
Gallery pages

Parallax scrolling is most commonly used with Index pages but as you get more familiar with the effect, you’ll see that it can be used effectively on pretty much any type of page.

And yes, to clarify, parallax scrolling through Squarespace does work on mobile devices!

How to enable and disable parallax scrolling with Squarespace

First off, make sure that you’re using a template in the Brine family that supports parallax scrolling. These instructions will not work if you aren’t. The parallax scrolling feature is enabled in the Style Editor section of Squarespace’s backend. Here’s how to get there:

From the Home menu > click Design > click Style Editor
Scroll to Main : Overlay section
Check Enable Parallax
Note: you might want to check “Parallax smart crop” to minimize cropping
Save

To disable parallax scrolling, simply follow the same steps but uncheck “Enable Parallax”

Use thumbnail images for parallax scrolling

To get the parallax scrolling effect, add a thumbnail image to a page or section.

Thumbnails added to a page create page banners
Thumbnails added to Index content sections create background images.

If you don’t see the parallax scrolling effect, make sure that it is enabled by following the steps outlined above.

Final Thoughts

As you can see, parallax scrolling is a wonderful design feature that packs a major punched when used correctly. It’s not right for every website but when it’s a good fit, there’s no doubt that it takes the design to a new level. If you choose to include parallax scrolling in your website, I encourage you to do so intentionally and only where it makes sense from a user experience point of view. If there’s any doubt, leave it out!

Squarespace does an awesome job of building parallax scrolling directly into the functionality of templates in the Brine family, which is just another reason I love using the platform. You can always play around with how it looks by setting up a demo trial site and using filler/placeholder content, and then moving forward with the effect on your live site if you like what you see. Try it out and let me know what you think!

Now it’s your turn to tell me, do you use parallax scrolling on your website? Are you familiar with this term or is it a new concept? Have you seen it in action on any of your favourite sites? Do you want to try it out on your own Squarespace site? I’d love to know so leave me a note in the comments below!