CSS Only Scroll Snapping – snapy_scroll

Category: CSS & CSS3 | October 9, 2018
Author: lathindu1
Views Total: 998
Official Page: Go to website
Last Update: October 9, 2018
License: MIT

Preview:

CSS Only Scroll Snapping – snapy_scroll

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

You Might Be Interested In:


Leave a Reply