Squarespace 7.1 Parallax - omit specific section

I have the following code in my code injection footer to add parallax effect to all banner background images:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/scrollax@1.0.0/scrollax.min.js"></script>
<script>
  $('.has-background').attr('data-scrollax-parent', 'true');
  $('.has-background .section-background').attr('data-scrollax', 'properties: { translateY: "30%" }');
  $.Scrollax();
</script>

However, I want to disable the effect for one specific section. Is this possible? How would I do it - use data-section-id in some way?

Please post the URL for the page where you want to achieve this effect.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

10 hours ago, creedon said:

Please post the URL for the page where you want to achieve this effect.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

URL is https://hyperboloid-finch-3kll.squarespace.com/ - password is "preview". Thanks!

I'm not seeing a Parallax effect so I'll give you some general info.

Yes you can exclude elements either through a jQuery :not selector or the not method.

1 hour ago, creedon said:

I'm not seeing a Parallax effect so I'll give you some general info.

Yes you can exclude elements either through a jQuery :not selector or the not method.

Ah yes my apologies, I had removed the code temporarily since I couldn't figure out the workaround. I've put it back in now.

I'm not a developer so could you show how to incorporate the :not selector/method? The block I want to exempt is the "why we're different" illustration of the people on the stairs, on the About page.

14 minutes ago, creedon said:

Give this a go and let us know.

<script>

  $( '.has-background:not( [ data-section-id="5f971514248b194b3492db26" ] )' ).attr ( 'data-scrollax-parent', 'true' );
  
  $( '.has-background:not( [ data-section-id="5f971514248b194b3492db26" ] ) .section-background' ).attr ( 'data-scrollax', 'properties: { translateY: "30%" }' );
  
  $.Scrollax ( );
  
  </script>

 

Perfection - this worked! Thanks so much!!

Hey! I'm attempting to do that same thing as the OP asked. I've tried this code, but can't seem to get it to you.

<script>
$( '.has-background:not( [ data-section-id="5f9c896941ab74478c7a8a97" ] )' ).attr ( 'data-scrollax-parent', 'true' );

$( '.has-background:not( [ data-section-id="5f9c896941ab74478c7a8a97" ] ) .section-background' ).attr ( 'data-scrollax', 'properties: { translateY: "100%" }' );

$.Scrollax ( );
</script>

We're using the Impact template.
The ID that I tried using is the data-parallax-id, which is different than what was suggested, but it's the only one that I can find.

I've tried using the "inject custom code" in section itself. Maybe I'm doing something wrong there.

Any help would be greatly appreciated!

@81monkeys

Please post the URL to the page where you are trying to achieve this effect.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

@creedon

Sorry! The password is 'merlin'. The sections are using a placeholder, paper-like texture. We would like to freeze/stop their parallaxing without stopping the other sections. I really hope you can help us!

Thanks for taking the time to reply.

@81monkeys

URL to the page where you are trying to achieve this effect?

On 11/24/2020 at 6:17 PM, creedon said:

@81monkeys

URL to the page where you are trying to achieve this effect?

@creedon

 https://www.anterrarpg.com/
password is 'merlin'

@81monkeys

Your site is not using the Scrollax plug-in to achieve parallax so my code won't help you.

I figured it out! You just need to assign an external image using CSS as the BG, then there's no parallax!

#sectionName {
  background-position: center top;
  
  background-image: url(https://images.squarespace-cdn.com/content/...)

}

DONE!