Vertical Scroll / Snapping Scroll

Parallax, Vertical Scroll, Snapping Scroll, jQuery

by kang cahya

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vertical Scrolling One-Page Website</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
      </ul>
    </nav>

    <section id="section1" style="background-color: #f8bbd0">
      <img
        src="https://2.bp.blogspot.com/-GU50s5Nbyfg/YFK14bvsxeI/AAAAAAAALcw/KrETjpZrYqwrRkpEaucCbDjPNeIS479hACK4BGAYYCw/s1600/fire.png"
        width="100"
      />
      <h1>Section 1 : kang-cahya.com</h1>
      <!-- Content for Section 1 -->
    </section>

    <section id="section2" style="background-color: #e1bee7">
      <img
        src="https://2.bp.blogspot.com/-GU50s5Nbyfg/YFK14bvsxeI/AAAAAAAALcw/KrETjpZrYqwrRkpEaucCbDjPNeIS479hACK4BGAYYCw/s1600/fire.png"
        width="100"
      />
      <h1>Section 2 : kang-cahya.com</h1>
      <!-- Content for Section 2 -->
    </section>

    <section id="section3" style="background-color: #bbdefb">
      <img
        src="https://2.bp.blogspot.com/-GU50s5Nbyfg/YFK14bvsxeI/AAAAAAAALcw/KrETjpZrYqwrRkpEaucCbDjPNeIS479hACK4BGAYYCw/s1600/fire.png"
        width="100"
      />
      <h1>Section 3 : kang-cahya.com</h1>
      <!-- Content for Section 3 -->
    </section>

    <!-- Add more sections as needed -->
  </body>
</html>

CSS

section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

nav {
  position: fixed;
  top: 0;
  background: #333;
  color: #fff;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  display: inline;
  margin: 0 20px;
}

nav a {
  color: #fff;
  text-decoration: none;
}

/* Additional CSS styling for sections and navigation */

JavaScript

$(document).ready(function () {
  var sections = $("section");
  var currentSection = 0;
  var animationDuration = 500; // Change this value to adjust the response speed

  // Scroll to the next or previous section when the user scrolls with the mouse wheel
  $(window).on("mousewheel DOMMouseScroll", function (e) {
    if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
      currentSection = Math.max(currentSection - 1, 0);
    } else {
      currentSection = Math.min(currentSection + 1, sections.length - 1);
    }
    scrollToSection(currentSection);
  });

  // Handle arrow key navigation
  $(document).keydown(function (e) {
    if (e.keyCode === 38) {
      // Up arrow key
      currentSection = Math.max(currentSection - 1, 0);
      scrollToSection(currentSection);
    } else if (e.keyCode === 40) {
      // Down arrow key
      currentSection = Math.min(currentSection + 1, sections.length - 1);
      scrollToSection(currentSection);
    }
  });

  // Function to scroll to a specific section
  function scrollToSection(index) {
    var target = sections.eq(index);
    $("html, body").animate(
      {
        scrollTop: target.offset().top,
      },
      animationDuration
    ); // Adjust the animation duration here
  }
});