Squarespace 7.1
Parallax Effect

Squarespace 7.1 hasn’t added the ability to add a parallax effect to an image in Squarespace 7.1. In this tutorial, I’ll teach you how to add this effect to any section background on your website.

Update 3/21/2022

There is a bug that prevents this code from working on Chrome and Firefox browsers now. I’ve removed the transform property in the CSS below which fixes the issue, but you aren’t able to edit the parallax amount anymore.

Note: this code uses the background-attachment:fixed property, which Apple removed from WebKit in iOS. So the parallax effect will not work on mobile.

 

Psst: as a challenge, try to combine this css with sliding banner images.

Squarespace 7.1 hasn’t added the ability to add a parallax effect to an image in Squarespace 7.1. In this tutorial, I’ll teach you how to add it to any section background on your website.

The core of this code snippet involves adding a background image element on the page using the ::after pseudo-element and giving that element a property background-attachment:fixed. If you’re interested in learning more about improving your overall coding skillset, and specifically with Squarespace, signup for my free newsletter.

Steps:

  1. Build Out Webpage Without the Image

    We want to create the structure that we will apply the CSS to first.

  2. Add Image to Your Website

    We’ll need to use the URL of the image source. There are a couple different ways you can do this. I’ve found it easiest to add the image in an image block on my website, then inspecting that block and copying the src url of image, but you can also just upload the image in the Design » Custom CSS » Manage Custom Files area.

  3. Paste Code Snippet in Design Tab

    Code is below.

  4. Adjust Section ID & Image URL in CSS

    Always be sure to apply the css selectors and image url to your specific website.

Code Snippet

CSS - Put this code in your Design » Custom CSS area to apply this across your entire website.

[data-section-id="123"]{
  .section-background{
    &::after {
    /*creating the element*/      
      content: "";
      width:100%;
      height:100%;
      position: absolute;
      
      /*adding the image*/  
      background-image:url(image.jpeg);
      background-repeat:no-repeat;
      
      /*positioning the image*/  
      background-size:cover;
      background-position:center center;
      background-attachment: fixed;
      
      /*mobile*/  
      @media(max-width:787px){
        background-position:center center;
        background-attachment: scroll !important;
      }
    } 
  }
}

Adding Multiple Parallax Images To Your Website

so that’s a lot of code to add to your website for each parallax image. If you want add the parallax effect to multiple images, I suggest creating a mix-in and then applying that mix-in to each section that you want the parallax effect to work with.

  1. Create the Mix-in

/*create the mix-in once*/
.parallax(){
/*creating the element */     
      content: "";
      width:100%;
      height:100%;
      position: absolute;

      /*adding the image properties - don't add the image*/
      background-repeat:no-repeat;

      /*positioning the image*/
      background-size:cover;
      background-position:center center;
      background-attachment: fixed;

      /*mobile*/
      @media(max-width:787px){
        background-position:center center;
        background-attachment: scroll !important;
      }
}

2. Apply the mix-in to as many sections as you need - be sure to add in the image here. 

/*add mix-in to section for parallax*/
[data-section-id="123"]{
  .section-background{
    &::after {
    /* this will apply all the properties in the parallax mixin here */
      .parallax(); 
      /*This is the specific image for this section*/
      background-image:url(image1.jpeg);
    } 
  }
}

[data-section-id="456"]{
  .section-background{
    &::after {
      .parallax();
      background-image:url(image2.jpeg);
    } 
  }
}

[data-section-id="789"]{
  .section-background{
    &::after {
      .parallax();
      background-image:url(image3.jpeg);
    } 
  }
}