perling/public/assets/js/frontend/home/news.js

document.addEventListener("DOMContentLoaded", function () {
    if (typeof particlesJS !== "undefined") {
        particlesJS("particles-js", {
            particles: {
                number: {
                    value: 80,
                    density: { enable: true, value_area: 1000 },
                },
                color: { value: "#ffffff" },
                shape: { type: "circle" },
                opacity: { value: 0.1, random: true },
                size: { value: 3, random: true },
                line_linked: {
                    enable: true,
                    distance: 150,
                    color: "#ffffff",
                    opacity: 0.05,
                    width: 1,
                },
                move: {
                    enable: true,
                    speed: 0.5,
                    direction: "none",
                    random: true,
                    out_mode: "out",
                    bounce: false,
                },
            },
            interactivity: {
                detect_on: "canvas",
                events: {
                    onhover: { enable: true, mode: "bubble" },
                    resize: true,
                },
                modes: {
                    bubble: {
                        distance: 200,
                        size: 4,
                        duration: 2,
                        opacity: 0.2,
                    },
                },
            },
            retina_detect: true,
        });
    }

    // Parallax effect image utama
    initParallaxEffect();

    initHoverEffects();
});

function initParallaxEffect() {
    const parallaxContainers = document.querySelectorAll(".parallax-container");

    parallaxContainers.forEach((container) => {
        const img = container.querySelector(".parallax-img");

        if (img) {
            container.addEventListener("mousemove", (e) => {
                const rect = container.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;

                const xPercent = (x / rect.width - 0.5) * 2; // -1 to 1
                const yPercent = (y / rect.height - 0.5) * 2; // -1 to 1

                img.style.transform = `translate(${xPercent * -10}px, ${
                    yPercent * -10
                }px) scale(1.1)`;
            });

            container.addEventListener("mouseleave", () => {
                img.style.transform = "translate(0, 0) scale(1.05)";
            });
        }
    });
}

function initHoverEffects() {
    const perspectiveCards = document.querySelectorAll(".perspective-card");

    perspectiveCards.forEach((card) => {
        card.addEventListener("mousemove", (e) => {
            const rect = card.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            const xPercent = (x / rect.width - 0.5) * 2; // -1 to 1
            const yPercent = (y / rect.height - 0.5) * -2; // -1 to 1

            const inner = card.querySelector(".transform-3d");
            if (inner) {
                inner.style.transform = `rotateY(${xPercent * 5}deg) rotateX(${
                    yPercent * 5
                }deg)`;
            }
        });

        card.addEventListener("mouseleave", () => {
            const inner = card.querySelector(".transform-3d");
            if (inner) {
                inner.style.transform = "rotateY(0) rotateX(0)";
            }
        });
    });
}

function switchTab(tabName) {
    const beritaContent = document.getElementById("beritaContent");
    const videoContent = document.getElementById("videoContent");
    const beritaTab = document.getElementById("beritaTab");
    const videoTab = document.getElementById("videoTab");

    if (tabName === "berita") {
        // Update tab styles
        beritaTab.classList.add(
            "bg-gradient-to-r",
            "from-[#00c950]/80",
            "to-[#00c950]/80",
            "text-white"
        );
        beritaTab.classList.remove("bg-white/5", "text-white/80");
        videoTab.classList.remove(
            "bg-gradient-to-r",
            "from-[#487fff]/80",
            "to-[#487fff]/80",
            "text-white"
        );
        videoTab.classList.add("bg-white/5", "text-white/80");

        // Enhanced transition effects
        beritaContent.style.transform = "translateX(20px)";
        beritaContent.style.opacity = "0";

        setTimeout(() => {
            videoContent.classList.add("hidden");
            beritaContent.classList.remove("hidden");

            requestAnimationFrame(() => {
                beritaContent.style.transform = "translateX(0)";
                beritaContent.style.opacity = "1";
            });
        }, 300);
    } else {
        videoTab.classList.add(
            "bg-gradient-to-r",
            "from-[#487fff]/80",
            "to-[#487fff]/80",
            "text-white"
        );
        videoTab.classList.remove("bg-white/5", "text-white/80");
        beritaTab.classList.remove(
            "bg-gradient-to-r",
            "from-[#00c950]/80",
            "to-[#00c950]/80",
            "text-white"
        );
        beritaTab.classList.add("bg-white/5", "text-white/80");

        videoContent.style.transform = "translateX(20px)";
        videoContent.style.opacity = "0";
        beritaContent.style.opacity = "0";
        beritaContent.style.transform = "translateX(-20px)";

        setTimeout(() => {
            beritaContent.classList.add("hidden");
            videoContent.classList.remove("hidden");

            requestAnimationFrame(() => {
                videoContent.style.transform = "translateX(0)";
                videoContent.style.opacity = "1";
            });
        }, 300);
    }
}