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 post
  • Answers 21
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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

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?

Posted Images

21 answers to this question

Recommended Posts

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

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!

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

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

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

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

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

Edited by IXStudio

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to post
  • 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 post
  • 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 post
  • 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 post

Create an account or sign in to comment

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


×
×
  • Create New...