Snap Scroll bric custom classes

I Need Help
1

I am testing out Snap Scroll bric. Do anyone know how to do any of the following?

How can make the page transitions smooth?

How can the scroll stop and start on each blocs?

Is there a custom class I could add to hide or changes the dots, dashes and or backround?

Is there a way to change the size and, or color of the indicators, like dots or dashes and their background?

Are there custom classes that can control the height or placement, settings: mandatory or any other ways to manipulate the settings?

Thanks so much for anyone’s willingness to help.

2

Browser inspector reveals all.

Make it as awful or as nice as you like

Screenshot 2023-03-24 at 3.52.05 PM

3

I tried to identify the classes in the inspector, but I am not how to recognize them or what they control.

5

Did you style the text?

7

Dinner time here.

1 Like
8

I will give you a nice trophy, when you name the custom class that control that area. :slight_smile:

9

Like Pete said, it’s all in the code. Check the classes below in the code to see what gets applied. You can even use the inspector to change the css values and see how it affects the look.

snap-scroll-pagination
snap-scroll-paginate-bg
snap-scroll-pagination a .hover-text
snap-scroll-pagination a:after
snap-scroll-pagination a.active:after

Example: to change the look from circles to squares, just remove set the border radius on this class to zero:

Screenshot 2023-03-24 at 22.11.41

You can of course just add those classes to the class manager and poke their settings randomly, but without knowing what each class really does, that’s prone to annoy you.

Snap Scroll works best if you have a page with full height blocs.

1 Like
10

Wow, Fynn that was really cool of you to share, what I could not find. Actually, I did .snap-scroll-pagination. :slight_smile: I click on the snap scroll bric and applied it. I tried to change various thing, but it did nothing. That is why I started this post.
Thanks to you, I am going to play around with the info you so kindly shared.

1 Like
11

You’re welcome. Enjoy :slight_smile:

12

I don’t see this one in the list scroll-snap-type: y mandatory; is that a class or part of the CSS

13

Where do you see that?

It’s a CSS property. But I do not think Snap Scroll uses it.

14
15

I was talking about in your project.

Lots of ways to make stuff. Snap Scroll doesn’t use it.

16

Thanks, Pete.
I was just trying to figure out a way to stop and start the transition from one bloc to the next. I thought this might work.

17

instead of creating a new topic I just continue on this one…

SO I use this bric but some troubles:
I use inspector to see values and modified to see how it behaves
thx to @pumpkin for this

but if after changing something and being ok with it, how to keep it recorded as a modified behavior (for example background colors of dots etc etc)?

another tiny pb

it is for a landing page (with 4 full blocs)
with a nav on top with contact, SNS etc etc as icons

I tried many things but this bric considers the NAV as a bloc then it moves tiny bit (height of the nav) before to behave I would like for the rest

is there a way to exclude the ID BLOC of the nav?

thank you

18

The problem of Snap Scroll showing all blocs, nav and footer included is still alive.
The workaround which is no ideal but works for me is to add a snap-scroll-pagination class with display:none important!.
The mouse still scroll to the next bloc but the pagination is hidden.

1 Like