Jump to content

FULL PAGE PARALLAX SCROLLING

Recommended Posts

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/

Edited by Mindzek
Link to comment

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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!

 

 

Link to comment

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>

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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.

 

Link to comment

Sorry, what are you asking?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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!

Link to comment

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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.