Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Custom Parallax coding


ShaneE

Question

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

9 answers to this question

Recommended Posts

  • 1
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

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 best , and see my profile. Thanks for your support!

Link to comment
  • 0

@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
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

@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

 

Link to comment
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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...