parallax scrolling

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?