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 :
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
Posting Komentar