Cara mudah membuat vertical scroll atau snappping scoll dengan Jquery

 Cara mudah membuat vertical scroll atau snappping scoll dengan Jquery


Pada pembahasan kali ini saya akan sedikit membahas cara mudah membuat vertical scroll atau mungkin yang disebut snapping scroll dengan jquery. Cara ini biasanya digunakan saat ingin membuat website dengan konsep one page atau parallax, website seperti ini biasanya hanya mempunyai  satu halaman dan dalam satu halaman itu memuat beberapa informasi yang di bagi jadi beberapa section, kurang lebih ilustrasi struktur web-nya seperti dibawah ini :

Cara mudah membuat vertical scroll atau snappping scoll dengan Jquery

Gambar di atas hanya contoh saja, untuk section-nya sendiri tergantung requrement masing-masing project. Tapi secara garis besar kurang lebih seperti itu bentuknya.

Pada kasus ini saya akan menggunakan jQuery, kodenya sangat sederhana, mungkin nanti kamu bisa modifikasi kebentuk yang lebih advance jika memang dibutuhkan. Pada case ini hanya ada 3 file, yakni index.html, style.css dan script.js

index.html

<!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>
    <link rel="stylesheet" href="styles.css" />
  </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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-7WJnJCSPHRyABLts6odsdGSB6l2hM-GM45epRDxIFGO6PXkrln6qzM1-I6jzInenwkDYeLT4_CtpNB1-Dix9wczkb_y7UDbnW-4oacwBeWlwjGrwFYjRDojOrJAet1pmVVX41_LB7As/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-7WJnJCSPHRyABLts6odsdGSB6l2hM-GM45epRDxIFGO6PXkrln6qzM1-I6jzInenwkDYeLT4_CtpNB1-Dix9wczkb_y7UDbnW-4oacwBeWlwjGrwFYjRDojOrJAet1pmVVX41_LB7As/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-7WJnJCSPHRyABLts6odsdGSB6l2hM-GM45epRDxIFGO6PXkrln6qzM1-I6jzInenwkDYeLT4_CtpNB1-Dix9wczkb_y7UDbnW-4oacwBeWlwjGrwFYjRDojOrJAet1pmVVX41_LB7As/s1600/fire.png"
        width="100"
      />
      <h1>Section 3 : kang-cahya.com</h1>
      <!-- Content for Section 3 -->
    </section>

    <!-- Add more sections as needed -->

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

style.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 */

script.js

$(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
  }
});


Agar lebih memudahkan, kamu dapat melihatnya di jsfiddle berikut ini :

Bisa juga mampir ke repositori github-nya : https://github.com/k4ng/example-vertical-scroll-jquery

Kurang lebih sekian dulu untuk artikel ini, semoga bermanfaat, terimakasih :)


0/Post a Comment/Comments

Lebih baru Lebih lama