JSFiddle - React, Tailwind, and code Playground

by nastya97core

HTML

<div id="root">
  <nav class="nav">
    <a href="#" class="nav__logo">
      LOGO
    </a>
  </nav>
  <main class="smooth-scroll">
    <section>
      <div class="container">
        <h1>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, maxime?
        </h1>
        <div class="text">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora omnis quasi error pariatur vel numquam,
            beatae iusto ratione eveniet corporis voluptatum ipsam eos nihil dicta sapiente voluptas inventore placeat
            quia dignissimos est repudiandae
            quas nostrum. Rerum eveniet mollitia debitis doloribus. Sapiente aspernatur quibusdam ab facilis nobis nulla
            maxime dolores voluptas? Provident, nostrum? Recusandae est sapiente adipisci itaque! Soluta, corrupti
            maxime ducimus voluptas minima
            velit magni possimus aut ex provident hic molestias amet illum. Recusandae consequuntur voluptates optio
            saepe quasi eligendi quas, alias sed repellat omnis. Voluptas reiciendis doloribus libero quasi nihil ea
            aspernatur quia odio quas hic,
            soluta veritatis saepe molestias quisquam praesentium maxime unde rerum in nobis. Inventore tempora magni
            nesciunt fugiat adipisci consectetur nisi similique quod temporibus? Eligendi vel, quia iste consequatur
            fuga rerum consequuntur aspernatur!
            Facilis deleniti voluptatum commodi animi inventore aliquid quos, assumenda quaerat sapiente quidem ipsa.
            Exercitationem, beatae! Ea accusantium dignissimos ipsum sint iusto molestiae totam eum vel placeat,
            repellendus distinctio laborum
            facere officia minus vero! Officia ducimus maxime quibusdam, quis nihil tenetur dicta accusamus totam
            commodi in dolor tempore debitis aliquid facere officiis expedita numquam error asperiores sequi cumque
            consequuntur dolorem nemo sed nam!
           ...

CSS

body {
  font-size: calc(10px + 1vw);
  font-family: Roboto, sans-serif;
  color: #fff;
  background: #0a0a0a;
  letter-spacing: 0.02em;
  line-height: 1.7;
  -ms-scroll-chaining: none;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  font-weight: 300;
}

h1 {
  font-size: calc(10px + 4vw);
  color: #fff;
  line-height: 1.2;
  margin: 2vw 0;
}
h1:first-child {
  margin-top: 0;
}

.smooth-scroll {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  will-change: transform;
  background: #0a0a0a;
  overflow: hidden;
}

.nav {
  position: fixed;
  z-index: 100;
  padding: 30px 5vw;
  right: 0;
  left: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: color-dodge;
}
.nav__logo {
  display: -webkit-box;
  display: flex;
  color: rgba(0, 0, 0, 0.8);
  text-decoration: none;
  pointer-events: all;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
}

section {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 100px 0;
  max-width: 1000px;
  margin: 0 auto;
}

.container {
  max-width: 1100px;
  padding: 1vw 5vw;
  flex-direction: column;
}

.text {
  padding: 4vw 0;
}

JavaScript

class SmoothScroll {
  constructor(options) {
    this.opt = options || {};
    this.el = this.opt.el ? this.opt.el : ".smooth-scroll";
    this.speed = this.opt.speed ? this.opt.speed : 0.4;
    this.init();
  }

  init() {
    this.scrollY = 0;
    this.smoothScroll = document.querySelectorAll(this.el)[0];
    this.events();
    this.resize();
    this.animate();
  }

  resize() {
    document.body.style.height = `${
      this.smoothScroll.getBoundingClientRect().height
    }px`;
  }

  animate() {
    this.scrollY += (window.scrollY - this.scrollY) * this.speed;
    this.smoothScroll.style.transform = `translate3d(0,${-Math.floor(
      this.scrollY
    )}px,0)`;
    this.raf = requestAnimationFrame(this.animate.bind(this));
  }

  events() {
    window.addEventListener("load", this.resize.bind(this));
    window.addEventListener("resize", this.resize.bind(this));
  }
}

const smoothScroll = new SmoothScroll({
  el: ".smooth-scroll",
  speed: 0.1
});