How to disable parallax scrolling on one page

Hi guys!

I've seen a few websites with parallax scrolling on one of their pages and then the next page below is enabled. I think that's such a cool feature that I would love to implement. I searched the web for a long time to try to find the code for this but I just got this link https://blog.alexgittings.com/disable-parallax-on-one-squarespace-page/ with a code, but I have no idea where to put the code as it's poorly described.

THIS IS WHAT THE ARTICLE SAID:

To do this you will need to inject a script into the page.

Navigate to the page cog and select advanced and enter the following:

<script>
   Static.SQUARESPACE_CONTEXT.tweakJSON["tweak-overlay-parallax-enabled"] = false;
 </script>

Once saved the parallax feature for that page should be disabled.

But I have no idea where to put this code. Do any of you have any suggestions or know of another way?

Thank you! Eager to hear back 🙂

Also looking for how to do this (sorry to not be responding with a helpful reply!)... Did you find a solution?

The solution above doesn't work. The script would go in the Advanced section of your page settings. Perhaps it works for certain template families, but not on Brine (Basil specifically). 

Yes! I have been searching the web too and just found code to do this. First you need parallax enabled in the Site Design. This code will disable it on any standalone or index page you specify.

You first need to look up the data-parallax-id that is specific to the background image. Then just replace it in the code below, and add to your custom CSS. 

[data-parallax-id="PLACE ID HERE"] figure {
transform: none !important;
top: 0 !important;
bottom: 0 !important;
will-change: auto !important;
}

@kali-creative thank you so much!

How do I find the data-parallax-id ???

Hi, @Nondys

I just found out how to find the data-parallax-id from this post.   https://www.squarestylist.com/blog/overlay-color

I then tried the above code, and it works!!!!!  But at first I tried putting it in the (page>settings>advanced) area.  But then I read the instructions again, and realized that the code goes here--Home>Design>Custom CSS

Hope this helps!

And thank you, @kali-creative!

TeresaH

On 2/22/2020 at 9:56 AM, kali-creative said:

Yes! I have been searching the web too and just found code to do this. First you need parallax enabled in the Site Design. This code will disable it on any standalone or index page you specify.

You first need to look up the data-parallax-id that is specific to the background image. Then just replace it in the code below, and add to your custom CSS. 

[data-parallax-id="PLACE ID HERE"] figure {
transform: none !important;
top: 0 !important;
bottom: 0 !important;
will-change: auto !important;
}

 

This is great!! Worked for me also. 

Anyone have any modifications to this code so that the parallax effect can be disabled on standalone pages for JUST mobile?

OMG IT WORKED! I think I've been searching for this answer for over a year lol thank you guys sooooo much I am beyond ecstatic!

11 hours ago, jaguiar said:

This is great!! Worked for me also. 

Anyone have any modifications to this code so that the parallax effect can be disabled on standalone pages for JUST mobile?

If you use Business Plan, Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:640px) {
  [data-parallax-id="PLACE ID HERE"] figure {
transform: none !important;
top: 0 !important;
bottom: 0 !important;
will-change: auto !important;
}
  }
</style>

If you use Personal Plan, add this to Home > Design > Custom CSS

Replace with Page ID. See How to find Page ID. 

  @media screen and (max-width:640px) {
  #page-ID [data-parallax-id="PLACE ID HERE"] figure {
transform: none !important;
top: 0 !important;
bottom: 0 !important;
will-change: auto !important;
}
  }

7 hours ago, tuanphan said:

If you use Business Plan, Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:640px) {
  [data-parallax-id="PLACE ID HERE"] figure {
transform: none !important;
top: 0 !important;
bottom: 0 !important;
will-change: auto !important;
}
  }
</style>

If you use Personal Plan, add this to Home > Design > Custom CSS

Replace with Page ID. See How to find Page ID. 

  @media screen and (max-width:640px) {
  #page-ID [data-parallax-id="PLACE ID HERE"] figure {
transform: none !important;
top: 0 !important;
bottom: 0 !important;
will-change: auto !important;
}
  }

 

@tuanphan Awesome! Thanks so much this is perfect!

I've tried these and it looks like it works initially, but as soon as the page is refreshed the parallax continues. Any tips on this? I have the advanced commerce plan as well. 

Thanks!

8 hours ago, Ellavator said:

I've tried these and it looks like it works initially, but as soon as the page is refreshed the parallax continues. Any tips on this? I have the advanced commerce plan as well. 

Thanks!

Which template do you use?

@tuanphan I use Brine

3 hours ago, Ellavator said:

@tuanphan I use Brine

Try disable Ajax Loading. https://support.squarespace.com/hc/en-us/articles/115000253288-Ajax-loading

20 minutes ago, tuanphan said:

Try disable Ajax Loading. https://support.squarespace.com/hc/en-us/articles/115000253288-Ajax-loading

ok just tried this and it's still not working...maybe i'm using the wrong code. This is what I have entered...and its for my gallery page. https.ellafriberg.com/gallery

[data-parallax-id="5f4d20aef1e66322e30a7c80"
] figure {
transform: none !important;
top: 0 !important;
bottom: 0 !important;
will-change: auto !important;
}

Hi @Ellavator

Use this code in Design -> Custom CSS

figure.Index-page-image.loaded {
    transform: none !important;
}

.Parallax-item {
    transform: none !important;
    position: absolute !important;
}

Please use the like button if it helps you!

Best,
Leopold

2 minutes ago, IXStudio said:

Hi @Ellavator

Use this code in Design -> Custom CSS

figure.Index-page-image.loaded {
    transform: none !important;
}

.Parallax-item {
    transform: none !important;
    position: absolute !important;
}

Please use the like button if it helps you!

Best,
Leopold

do i enter the page id anywhere? will this code apply to all index pages?

This code works for all of your index pages. If you got a problem on that let me know to check it please.

Please use the like button if it helps you!

Best,
Leopold

2 minutes ago, IXStudio said:

This code works for all of your index pages. If you got a problem on that let me know to check it please.

Please use the like button if it helps you!

Best,
Leopold

ok, I just need to target specific section on certain index pages. I don't want to disable parallax on all pages.

Use this code @Ellavator

Just change the ID with target parallax section ID.

.Parallax-item[data-parallax-id="5f4d20aef1e66322e30a7c80"] figure.Index-page-image.loaded {
    transform: none !important;
    bottom: 0 !important;
}

.Parallax-item[data-parallax-id="5f4d20aef1e66322e30a7c80"] {
    transform: none !important;
    position: absolute !important;
}

.Parallax-item[data-parallax-id="5f4d20aef1e66322e30a7c80"] figure.Index-page-image img {
    bottom: 0% !important;
    top: -50% !important;
}

Please use the like button if it helps you!

Best,
Leopold

13 minutes ago, IXStudio said:

Use this code @Ellavator

Just change the ID with target parallax section ID.

.Parallax-item[data-parallax-id="5f4d20aef1e66322e30a7c80"] figure.Index-page-image.loaded {
    transform: none !important;
    bottom: 0 !important;
}

.Parallax-item[data-parallax-id="5f4d20aef1e66322e30a7c80"] {
    transform: none !important;
    position: absolute !important;
}

.Parallax-item[data-parallax-id="5f4d20aef1e66322e30a7c80"] figure.Index-page-image img {
    bottom: 0% !important;
    top: -50% !important;
}

Please use the like button if it helps you!

Best,
Leopold

Thanks for trying this but it's still not working. I appreciate the help though.

I used this code. Working for me for this page. @Ellavator

ellafriberg.com/gallery

Please use the like button if it helps you!

Best,
Leopold

@IXStudio this is how my page looks when I add that code. 

This is a good fix 
https://blog.alexgittings.com/disable-parallax-on-one-squarespace-page/

While designing a website recently I needed to disable the parallax feature on one page. As I still wanted it to function on other pages.

To do this you will need to inject a script into the page.

Navigate to the page cog and select advanced and enter the following:

<script>
   Static.SQUARESPACE_CONTEXT.tweakJSON["tweak-overlay-parallax-enabled"] = false;
 </script>

ALEX GITTINGS
30 NOV 2017 

Hi,

does this code work for 7.1? I need to disable it for 1 page too but I'm not able to find the data parallax id anywhere! 

On 9/20/2021 at 9:55 PM, Namrata said:

Hi,

does this code work for 7.1? I need to disable it for 1 page too but I'm not able to find the data parallax id anywhere! 

Hi,

Can you share link to page where you want to disable parallax? We can take a look