WebMe-1

Running

WebMe-1 / script.js

Update script.js

39eff7e verified almost 2 years ago

2.85 kB

document.addEventListener('DOMContentLoaded', function () {
    const navbar = document.querySelector('.header');
    
    // Menambahkan kelas "scrolled" saat scroll
    window.addEventListener('scroll', function() {
        if (window.scrollY > 0) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    });
    
    const sections = document.querySelectorAll('.section');
    let currentIndex = 0;
    const totalSections = sections.length;

    // Fungsi untuk scroll ke section tertentu
    function scrollToSection(index) {
        if (index < 0 || index >= totalSections) return;  // Membatasi scroll agar tidak keluar dari index
        const section = sections[index];
        window.scrollTo({
            top: section.offsetTop,
            behavior: 'smooth',  // Scroll dengan smooth
        });
    }

    // Event listener untuk scroll
    let isScrolling = false;  // Menghindari scroll terlalu cepat
    window.addEventListener('wheel', function (e) {
        if (isScrolling) return;  // Menghindari scroll berulang

        isScrolling = true;

        if (e.deltaY > 0 && currentIndex < totalSections - 1) {
            currentIndex++;  // Scroll ke bawah
        } else if (e.deltaY < 0 && currentIndex > 0) {
            currentIndex--;  // Scroll ke atas
        }

        // Scroll ke section yang sesuai
        scrollToSection(currentIndex);

        // Matikan status scrolling setelah animasi selesai
        setTimeout(() => {
            isScrolling = false;
        }, 1000);  // Durasi animasi sekitar 1 detik
    });

    // Fungsi untuk animasi muncul setiap section
    function animateSections() {
        sections.forEach((section) => {
            // Memeriksa apakah section sudah di view port
            const sectionPosition = section.getBoundingClientRect();
            if (sectionPosition.top < window.innerHeight && sectionPosition.bottom >= 0) {
                section.classList.add('visible');
            }
        });
    }

    // Trigger animasi ketika halaman dimuat
    animateSections();

    // Animasi muncul saat scroll
    window.addEventListener('scroll', animateSections);
    
    // Event listener untuk klik pada navbar
    document.querySelectorAll('.navigation ul li a').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();

            // Ambil id dari link
            const targetId = this.getAttribute('href').substring(1);

            // Temukan section yang sesuai
            const targetSection = document.getElementById(targetId);

            // Scroll ke section tersebut dengan transisi halus
            targetSection.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        });
    });
});

	document.addEventListener('DOMContentLoaded', function () {
	const navbar = document.querySelector('.header');

	// Menambahkan kelas "scrolled" saat scroll
	window.addEventListener('scroll', function() {
	if (window.scrollY > 0) {
	navbar.classList.add('scrolled');
	} else {
	navbar.classList.remove('scrolled');
	}
	});

	const sections = document.querySelectorAll('.section');
	let currentIndex = 0;
	const totalSections = sections.length;

	// Fungsi untuk scroll ke section tertentu
	function scrollToSection(index) {
	if (index < 0 \|\| index >= totalSections) return; // Membatasi scroll agar tidak keluar dari index
	const section = sections[index];
	window.scrollTo({
	top: section.offsetTop,
	behavior: 'smooth', // Scroll dengan smooth
	});
	}

	// Event listener untuk scroll
	let isScrolling = false; // Menghindari scroll terlalu cepat
	window.addEventListener('wheel', function (e) {
	if (isScrolling) return; // Menghindari scroll berulang

	isScrolling = true;

	if (e.deltaY > 0 && currentIndex < totalSections - 1) {
	currentIndex++; // Scroll ke bawah
	} else if (e.deltaY < 0 && currentIndex > 0) {
	currentIndex--; // Scroll ke atas
	}

	// Scroll ke section yang sesuai
	scrollToSection(currentIndex);

	// Matikan status scrolling setelah animasi selesai
	setTimeout(() => {
	isScrolling = false;
	}, 1000); // Durasi animasi sekitar 1 detik
	});

	// Fungsi untuk animasi muncul setiap section
	function animateSections() {
	sections.forEach((section) => {
	// Memeriksa apakah section sudah di view port
	const sectionPosition = section.getBoundingClientRect();
	if (sectionPosition.top < window.innerHeight && sectionPosition.bottom >= 0) {
	section.classList.add('visible');
	}
	});
	}

	// Trigger animasi ketika halaman dimuat
	animateSections();

	// Animasi muncul saat scroll
	window.addEventListener('scroll', animateSections);

	// Event listener untuk klik pada navbar
	document.querySelectorAll('.navigation ul li a').forEach(anchor => {
	anchor.addEventListener('click', function(e) {
	e.preventDefault();

	// Ambil id dari link
	const targetId = this.getAttribute('href').substring(1);

	// Temukan section yang sesuai
	const targetSection = document.getElementById(targetId);

	// Scroll ke section tersebut dengan transisi halus
	targetSection.scrollIntoView({
	behavior: 'smooth',
	block: 'start'
	});
	});
	});
	});