Jump to content

Custom Parallax coding

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://clar.dev/fr

Hi! I am about to jump in to create a site, but I am not sure if a parallax effect I want to do is even possible.

I want to create sections that "roll" on to each other like the blue and green section in the example site: https://clar.dev/fr

My site is a background and text-based site, so there is no imagery. I was looking at something like the Brine template, but it seems as though the parallax relies on imagery in the BG.

Any help is much appreciated! @creedon, maybe you know?

-Shane

Screen Shot 2021-06-24 at 4.01.07 PM.png

Edited by ShaneE
Directing to a specific user
Link to comment

I don't recall seeing that exact effect on an SS site. Technically I don't think it is a parallax effect.

It is more of a sticky bottom section and the next section scrolls up and over it.

If I were to attempt this effect from scratch I think I'd prefer to start with a v7.1 site. It has page sections which I think would be easier to manipulate.

Of course v7.0 using a template that supports index pages might also work.

I wouldn't recommend choosing a template based on a particular effect you want. Unless that effect is your primary goal.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

You might look around in sites like codepen to see if you can find a similar effect there. Finding example code and being able to use it in an SS site are two different things but at least you'd be a step closer.

@tuanphan have you seen an effect like this on an SS site?

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • Solution
13 hours ago, ShaneE said:

Thanks @creedon I will give it a shot!

You can position:sticky to the section to achieve this

Parallax Overlapping Sections Using Sticky Positioning - SuperLibrary – SuperHi

image.thumb.png.ad22da7b70c26dc95aaab28a74bbebf0.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@bangank36 Thank you. Where in SS do I out this code once I designed my sections? In the advanced>code injection>header? Or in custom CSS?

 

Also I love your portfolio hover effect. I'll be sure to purchase that!

Shane

Link to comment
5 hours ago, ShaneE said:

@bangank36 Thank you. Where in SS do I out this code once I designed my sections? In the advanced>code injection>header? Or in custom CSS?

 

Also I love your portfolio hover effect. I'll be sure to purchase that!

Shane

If you familiar with css only then custom css

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
3 hours ago, ShaneE said:

@bangank36 do you recommend I start with a specific template?

I am not sure how to approach this and where to put the custom code:

position: sticky;

position: -webkit-sticky;

top: 0;

Sorry, I am not a developer so any additional help is much appreciated!

Shane

 

I think you are using 7.1 template, then all template are same no matter what.

1. install this plugin to find section unique id

Chrome Web Store - Extensions (google.com)

2. Find the section id like below and replace to the code accordingly, repeat with other section if you wish and place code into custom css

section-id-is-found {
	position: sticky;
  	position: -webkit-sticky;
  	top: 0;
}

 

image.thumb.png.e99907ab2257270ed4f9c3c7b41ab590.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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