Update script.js
Browse files
script.js
CHANGED
@@ -1,9 +1,6 @@
|
|
1 |
document.addEventListener('DOMContentLoaded', function () {
|
2 |
-
const navbar = document.querySelector('header');
|
3 |
-
|
4 |
-
const navigation = document.querySelector('.navigation');
|
5 |
-
const closeBtn = document.querySelector('.close-btn'); // Tombol X untuk menutup menu
|
6 |
-
|
7 |
// Menambahkan kelas "scrolled" saat scroll
|
8 |
window.addEventListener('scroll', function() {
|
9 |
if (window.scrollY > 0) {
|
@@ -12,7 +9,60 @@ document.addEventListener('DOMContentLoaded', function () {
|
|
12 |
navbar.classList.remove('scrolled');
|
13 |
}
|
14 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
15 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
16 |
// Event listener untuk klik pada navbar
|
17 |
document.querySelectorAll('.navigation ul li a').forEach(anchor => {
|
18 |
anchor.addEventListener('click', function(e) {
|
@@ -29,24 +79,6 @@ document.addEventListener('DOMContentLoaded', function () {
|
|
29 |
behavior: 'smooth',
|
30 |
block: 'start'
|
31 |
});
|
32 |
-
|
33 |
-
// Menutup menu setelah memilih link (untuk tampilan mobile)
|
34 |
-
if (navigation.classList.contains('active')) {
|
35 |
-
navigation.classList.remove('active');
|
36 |
-
menuToggle.classList.remove('active');
|
37 |
-
}
|
38 |
});
|
39 |
});
|
40 |
-
|
41 |
-
// Toggle menu responsif
|
42 |
-
menuToggle.addEventListener('click', function() {
|
43 |
-
navigation.classList.toggle('active');
|
44 |
-
menuToggle.classList.toggle('active'); // Menambah/ menghapus efek toggle pada icon
|
45 |
-
});
|
46 |
-
|
47 |
-
// Menambahkan event listener pada tombol X untuk menutup menu
|
48 |
-
closeBtn.addEventListener('click', function() {
|
49 |
-
navigation.classList.remove('active');
|
50 |
-
menuToggle.classList.remove('active'); // Menghapus efek toggle pada icon
|
51 |
-
});
|
52 |
-
});
|
|
|
1 |
document.addEventListener('DOMContentLoaded', function () {
|
2 |
+
const navbar = document.querySelector('.header');
|
3 |
+
|
|
|
|
|
|
|
4 |
// Menambahkan kelas "scrolled" saat scroll
|
5 |
window.addEventListener('scroll', function() {
|
6 |
if (window.scrollY > 0) {
|
|
|
9 |
navbar.classList.remove('scrolled');
|
10 |
}
|
11 |
});
|
12 |
+
|
13 |
+
const sections = document.querySelectorAll('.section');
|
14 |
+
let currentIndex = 0;
|
15 |
+
const totalSections = sections.length;
|
16 |
+
|
17 |
+
// Fungsi untuk scroll ke section tertentu
|
18 |
+
function scrollToSection(index) {
|
19 |
+
if (index < 0 || index >= totalSections) return; // Membatasi scroll agar tidak keluar dari index
|
20 |
+
const section = sections[index];
|
21 |
+
window.scrollTo({
|
22 |
+
top: section.offsetTop,
|
23 |
+
behavior: 'smooth', // Scroll dengan smooth
|
24 |
+
});
|
25 |
+
}
|
26 |
+
|
27 |
+
// Event listener untuk scroll
|
28 |
+
let isScrolling = false; // Menghindari scroll terlalu cepat
|
29 |
+
window.addEventListener('wheel', function (e) {
|
30 |
+
if (isScrolling) return; // Menghindari scroll berulang
|
31 |
+
|
32 |
+
isScrolling = true;
|
33 |
+
|
34 |
+
if (e.deltaY > 0 && currentIndex < totalSections - 1) {
|
35 |
+
currentIndex++; // Scroll ke bawah
|
36 |
+
} else if (e.deltaY < 0 && currentIndex > 0) {
|
37 |
+
currentIndex--; // Scroll ke atas
|
38 |
+
}
|
39 |
+
|
40 |
+
// Scroll ke section yang sesuai
|
41 |
+
scrollToSection(currentIndex);
|
42 |
+
|
43 |
+
// Matikan status scrolling setelah animasi selesai
|
44 |
+
setTimeout(() => {
|
45 |
+
isScrolling = false;
|
46 |
+
}, 1000); // Durasi animasi sekitar 1 detik
|
47 |
+
});
|
48 |
|
49 |
+
// Fungsi untuk animasi muncul setiap section
|
50 |
+
function animateSections() {
|
51 |
+
sections.forEach((section) => {
|
52 |
+
// Memeriksa apakah section sudah di view port
|
53 |
+
const sectionPosition = section.getBoundingClientRect();
|
54 |
+
if (sectionPosition.top < window.innerHeight && sectionPosition.bottom >= 0) {
|
55 |
+
section.classList.add('visible');
|
56 |
+
}
|
57 |
+
});
|
58 |
+
}
|
59 |
+
|
60 |
+
// Trigger animasi ketika halaman dimuat
|
61 |
+
animateSections();
|
62 |
+
|
63 |
+
// Animasi muncul saat scroll
|
64 |
+
window.addEventListener('scroll', animateSections);
|
65 |
+
|
66 |
// Event listener untuk klik pada navbar
|
67 |
document.querySelectorAll('.navigation ul li a').forEach(anchor => {
|
68 |
anchor.addEventListener('click', function(e) {
|
|
|
79 |
behavior: 'smooth',
|
80 |
block: 'start'
|
81 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
82 |
});
|
83 |
});
|
84 |
+
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|