Jump to content

parallax scrolling

Recommended Posts

Hello,

I have a problem with parallax scrolling on my website.

Since I don't like Squarespace's integrated Parallax effect on images because it cuts off the images and changes the quality, I created it with extra code in the Website Fooder.

For some reason, the second image in my slider is always cut off on my homepage. As soon as you move the mouse just a little, the image adjusts and it works again. If you reload the page, the error is there again.

I use the following code.

<!--Parallax Scrolling-->
<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>
<style>
  .has-background {overflow: hidden;}
</style>

If I take out the code, you can see the entire image, but of course the effect is missing. Maybe someone knows what it is?

Link to comment
  • Replies 0
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

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.