Разработка - Один из вариантов оформления страницы правил

Пишем разметку:

HTML:

<div class="scrolls">
  <div class="up"><span>↑</span>
    <div class="center"><span>mouse <br> scrolling</span></div>
  </div>
  <div class="down"><span>↓</span></div>
</div>
<div class="smooth">
  <div class="header">
    <ul>
      <li><a href="#home">home</a></li>
      <li><a href="#about">about</a></li>
      <li><a href="#price">price</a></li>
      <li><a href="#contact">contact</a></li>
    </ul>
  </div>
  <section id="home">
    <h2>Section home</h2>
  </section>
  <section id="about">
    <h2>Section about</h2>
  </section>
  <section id="price">
    <h2>Section price</h2>
  </section>
  <section id="contact">
    <h2>Section contact</h2>
  </section>
</div>

Пишем наш стиль:

SCSS:

$colone: #312d3c;
$coltwo: #1d1e22;
$colthr: #f4f4f4;

*,
::before,
::after {
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  overflow: hidden;
  display: flex;
  height: 100vh;
  flex-direction: column;
  line-height: 1.5;
  font-family: "Montserrat", sans-serif;
  font-size: 62.5%;
  color: $colthr;
  background-color: $coltwo;
}

.scrolls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1.25em;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 2rem;
  color: $colthr;

  .center {
    font-size: 0.825rem;
  }
}

.smooth {
  position: relative;
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
  overflow-y: scroll;

  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
  // scroll-padding: 5vh 0;
}

.header {
  position: fixed;
  top: 0;
  z-index: 1;
  display: flex;
  width: 100%;
  min-height: 60px;
  font-size: 1rem;
  // background-color: $coltwo;
  background-image: linear-gradient(
    180deg,
    $coltwo,
    rgba($coltwo, 0.1),
    transparent
  );

  mix-blend-mode: luminosity;

  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    width: 100%;
    justify-content: center;

    li {
      margin: 0 1em;
      padding: 1em;

      a {
        position: relative;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 600;
        color: $colthr;
        
        &::after {         
          position: absolute;
          bottom: -3px;
          left: 0;
          content:'';
          width: 0;
          height: 3px;
          transition: all 0.2s linear;
        }
        
        &:hover {
          &::after {
            width: 100%;
            background-color: $colthr;
          }
        }
      }
    }
  }
}

section {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 100vh;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background-color: $colthr;
  background-image: url(http://www.ochevidets.ru/userfiles/2018/02/25/c6f0cb9b67_large.jpg);
  background-size: cover;

  scroll-snap-align: center;

  h2 {
    text-transform: uppercase;
    font-size: 2.25rem;
    font-weight: 900;

    padding: 0.5em 1em;

    color: $coltwo;
    background-color: $colthr;
    mix-blend-mode: screen;

    border-radius: 0.25em;
    pointer-events: none;
    user-select: none;
  }

  &:nth-child(2) {
    background-image: url(https://cdn.shopify.com/s/files/1/3026/6974/files/happy-alpacas-landscape_1024x1024.jpg?v=1532619630);
  }
  &:nth-child(3) {
    background-image: url(https://mymodernmet.com/wp/wp-content/uploads/2018/08/albert-dros-kyrgyzstan-1.jpg);
  }
  &:nth-child(4) {
    background-image: url(https://cdn.fstoppers.com/styles/large-16-9/s3/lead/2018/05/editors-block-lead-image.jpg);
  }
}

// #cursor {
//   position: fixed;
//   left: 50%;
//   top: 50%;
//   transform: translate(-50%, -50%);
//   z-index: 100;
//   pointer-events: none;
// }

Смотрим результат:

Разработка Один из вариантов оформления страницы правил

Ещё ресурсы от baltun