FULL PAGE PARALLAX SCROLLING

Hello,

We are looking for people who were tried or successfully achieved parallax effect as per below or something similar:
https://codepen.io/eehayman/pen/qdGZJr
 

We would love to hear if it's possible to adapt this in Squarespace desktop and mobile in the first place. So if someone can give a hint were to start, or any developers interested in this, we can discuss this privately as well.

Thanks!

https://www.ugnesstory.com/

If you add a background image you can add a parallax effect to it in the settings. 

That code pen also has snap-scrolling which can be added with a code snippet.

Hi @Ziggy,

Thank you for looking into this.

I am aware about parallax picture settings in Squarespace. The main thing what I want to achieve is to change section with one scroll, just as per example in codepen.

Maybe you can help me to found/achieve that snap-scrolling from codepen?

Thank you in advance!

Try this in page header code injection:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script>
<script>
        $(function() {
          $.scrollify({
            section : ".page-section",
          });
        });
</script>

Hi,

I tried to add additional section, made height - Large which took each section per screen and put a code in Code injection - Header, but there is no changes after all when I try to scroll.

Why this do not work? Is it depends on height of the pictures, or there should be different type of sections?

Thank you again in advance.

Sorry, what are you asking?

Hi again,

I am saying that this "snap-scrolling" code do not work for me. I tried to make two sections as a try, but there is no effect when scrolling in mobile and desktop. So, I am wondering does sections should be specific height, or I need to change something in Squarespace sections settings as well in order to make this code work.

Please see what results I had with code and two sections and footer.

Thank you!

It may not be working because you simply don't have any appropriate pages for it, the product pages don't lend themselves to this effect and the homepage only has one section.

FULL PAGE PARALLAX SCROLLING

CODE LINK: https://www.patreon.com/posts/how-to-add-to-in-109132362

☕ Did I help? Buy me a coffee?

Can you post the code for public ? Or if you need to be hired leave a link or proper way to reach you out