Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to disable parallax scrolling on one page


Nondys

Question

 

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 🙂

 

 

Link to comment

22 answers to this question

Recommended Posts

  • 1

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;
}

 

Edited by kali-creative
clarity
Link to comment
  • 0

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). 

Link to comment
  • 0

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

Edited by TeresaH
Link to comment
  • 0
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?

Link to comment
  • 0
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;
}
  }

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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!

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
3 hours ago, Ellavator said:

@tuanphan I use Brine

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
20 minutes ago, tuanphan said:

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;
}

Link to comment
  • 0
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?

Link to comment
  • 0
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.

 

Link to comment
  • 0

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

Edited by IXStudio

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
  • 0
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.

Link to comment
  • 0

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 

Your Martin

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...