Author: | lathindu1 |
---|---|
Views Total: | 691 views |
Official Page: | Go to website |
Last Update: | October 9, 2018 |
License: | MIT |
Preview:

Description:
snapy_scroll is a pure CSS scroll snipping library which automatically snaps your page section to the top when most part of the section is visible within the viewport.
Based on the CSS scroll-snap-align property.
Ideal for providing a smooth and user-friendly scroll experience on your one-page scrolling website.
How to use it:
Create page sections as follows:
<section id="section-one"> <h1>This Is Section One</h1> </section> <section id="section-two"> <h1>This Is Section Two</h1> </section> <section id="section-three"> <h1>This Is Section Three</h1> </section> <section id="section-four"> <h1>This Is Section Four</h1> </section> <section id="section-five"> <h1>This Is Section five</h1> </section>
The CSS tricks to make the page sections fullscreen and apply the scroll snapping functionality to the page sections while scrolling.
body{ scroll-snap-type: y mandatory; overflow-y: scroll; } #section-one{ background-color:#24fe53; text-align: center; height: 100vh; scroll-snap-align:start; } #section-two { background-color: #fe3324; text-align: center; height: 100vh; scroll-snap-align:start; } #section-three { background-color: #7824fe; text-align: center; height: 100vh; scroll-snap-align:start; } #section-four { background-color: #2433fe; text-align: center; height: 100vh; scroll-snap-align:start; } #section-five { background-color: #fecb24; text-align: center; height: 100vh; scroll-snap-align:start; }