Custom Parallax coding

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

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.

Thanks @creedon Great point. I will start with a 7.1 site.

I'm not a developer so I am going in relatively blind on this.

I'm just not sure how to custom the sticky bottom effect.

Shane

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?

Thanks @creedon I will give it a shot!

@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

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

@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

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;
}

Hi there, I would love to know if this effect would also show on mobile view?