GarGerry commited on
Commit
39eff7e
·
verified ·
1 Parent(s): 89c84bc

Update script.js

Browse files
Files changed (1) hide show
  1. script.js +56 -24
script.js CHANGED
@@ -1,9 +1,6 @@
1
  document.addEventListener('DOMContentLoaded', function () {
2
- const navbar = document.querySelector('header'); // Pastikan selector ini sesuai dengan elemen header
3
- const menuToggle = document.querySelector('.menu-toggle');
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
+ });