Jump to content

Squarespace 7.1 Parallax - omit specific section

Go to solution Solved by creedon,

Recommended Posts

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?

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

Edited by salondaome
Link to comment
  • Solution
3 hours ago, salondaome said:

I'm not a developer so could you show how to incorporate the :not selector/method?

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>

 

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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

Link to comment
  • 4 weeks later...

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!

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.