How to add Parallax in Squarespace 7.1 (and other fun background animations!)
The Parallax Scrolling feature is when the background image moves at a different speed than the content on top.
Image sourced from Squarespace via their Parallax Scrolling help guide
The Parallax Scrolling feature is when the background image moves at a different speed than the content on top.
This feature is really popular on modern websites because, well, it's beautiful! It was a huge hit in the Squarespace 7.0 Brine templates, but when Squarespace rolled out 7.1 they retired this feature.
Ever since Squarespace removed this feature in 7.1, there has been noise in the Squarespace community on how to achieve the Parallax Scrolling effect without having it as an option in the platform.
Our previous post on this topic ran through a few different workarounds to create a banner animation that was similar to the Parallax feature, but the day has finally come for Squarespace 7.1 users... the Parallax Scrolling feature is back!
So if you're looking to add some subtle movement to your website banners, Parallax might be a great option!
Not only do we have the newly-added built-in Parallax effect, but Squarespace has added a bunch of fun banner animations that we'll show you too, so let's dive in!
Option 1: Built-in Parallax Background Image Effect
Now that the Parallax feature is available in Squarespace 7.1, let's walk through how to add it to your banner images.
In your Squarespace 7.1 site:
Click EDIT on your page
Navigate to the section that you want to edit
Click the EDIT (pencil) icon on the section
Click Background
Upload an image
Click Image Effect underneath the images you've uploaded
This will open up a menu with a few animations to play with! Select the 4th option (highlighted in the image below) to achieve the Parallax effect.
You can customize the Parallax effect by clicking on the Settings icon and playing around with the intensity and angle levels.
While Parallax is our favorite image effect, Squarespace currently has 5 different image effects to choose from: Liquid, Film Grain, Parallax, Refracted Circles, and Refracted Lines.
Play around with each to see what might work best for your site!
Option 2: Custom Coded Parallax Scrolling
When the Parallax feature wasn't available on 7.1, the amazing Chris from Schwartz-Edmisten Web Design developed free custom copy + paste code to implement a similar effect on your website.
This still works great if you'd prefer to test out this route for a slightly different Parallax effect.
We promise it's not as hard as it sounds! Well, it would be if we didn't have Chris!
Check out the video tutorial and grab the copy and paste code from here.
We used this code for a long time on our site when we wanted Parallax images, and it worked pretty well.
If you are scared of custom code, this one is pretty simple, copy and paste. Though if you want to customize it at all, e.g. make some images parallax and some not, you may need some custom coding knowledge and this might be a little complicated for you to DIY.
There's no harm in giving it a go!
Option 3: Banner Art
This one's a little bit different, but still, a fun way to animate section backgrounds that you may not know about! This option doesn't use images, it's actually just plain color animations (or "art"), but I still recommend checking it out as an alternative!
In your Squarespace 7.1 site:
Click EDIT on your page
Navigate to the section that you want to edit
Click the EDIT (pencil) icon on the section
Click Background
For this one, you don't need a background image uploaded
In the options across the top, click ART
This will reveal a list of Art Backgrounds to play with
When you click on Art, it will give you some extra Art options
It will also reveal a little button (top right) that will take you to a panel where you can adjust the Art even further and change things like colors, motion, sizing, elements, etc. There are SO many options with this!
That's it! I hope you've learned a few new techniques to add animations, art and effects to your sections to liven up your Squarespace 7.1 site. These are great alternatives to Parallax Scrolling, and while it's definitely missed, Squarespace is making it up to us by giving us some fun new features to experiment with.
For more Squarespace design tips be sure to explore our other blogs below!
How to use Squarespace's NEW Shape Block (Fluid Engine update)
How to create a vertical line in Squarespace (7.0 & 7.1)
How to animate your links on hover in Squarespace 7.0 & 7.1
How to create rounded corners & unique shapes for your images in Squarespace (no coding!)
How to create a full width Instagram feed in Squarespace 7.1
If you liked this post, Pin it to Pinterest! 👇🏻
