How to Add Parallax to Squarespace 7.1

In this tutorial, I show you how to add a parallax scroll effect to Squarespace 7.1. You, like I, were probably disappointed that it does not come standard as a style editor feature in the new version of Squarespace. But with a little bit of code we can easily implement it!

Implementing Parallax on Squarespace 7.1 Using the Simple Parallax Library

Custom Javascript:

<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.0.2/dist/simpleParallax.min.js"></script>
<script>
  var images = document.querySelectorAll('.section-background img');
  new simpleParallax(images, {
    scale: 1.3,
    delay: .4
});
</script>
<style>
.simpleParallax {height: 100%;}
</style>

If you have any questions or need help implementing this on your site, please feel free to shoot me an email or leave me a comment on YouTube.

Cheers!
Chris