/* ----------------------------------------------------------------------- */ /* 1. STATE AWAL GLOBAL (Default: Zoom Out & Transparan) */ /* ----------------------------------------------------------------------- */ [id^="sequence"] { transform: scale(1.5); /* Default untuk seq 1-5 */ opacity: 0; transition: transform 1.5s ease, opacity 1.5s ease !important; pointer-events: none; will-change: transform, opacity; } /* ----------------------------------------------------------------------- */ /* [REVISI] KHUSUS SEQUENCE 6: FADE UP (MUNCUL DARI BAWAH) */ /* ----------------------------------------------------------------------- */ /* Override transform default (scale) menjadi translateY (posisi bawah) */ #sequence6 { transform: translateY(100px) !important; /* Opacity tetap 0 mewarisi rule di atas */ } /* ----------------------------------------------------------------------- */ /* 2. STATE AKHIR GLOBAL (Aktif/Muncul) */ /* ----------------------------------------------------------------------- */ .mc-active { transform: scale(1) !important; /* Default reset scale */ opacity: 1 !important; pointer-events: auto; } /* [REVISI] KHUSUS SEQUENCE 6 ACTIVE */ /* Saat aktif, kembalikan posisi Y ke 0 (posisi asli) */ #sequence6.mc-active { transform: translateY(0) !important; } /* ----------------------------------------------------------------------- */ /* 3. UTILITAS: SCROLL LOCK (KUNCI GULIR) */ /* ----------------------------------------------------------------------- */ body.no-scroll { overflow: hidden !important; height: 100vh !important; } /* ----------------------------------------------------------------------- */ /* 4. KOMPATIBILITAS EDITOR ELEMENTOR */ /* ----------------------------------------------------------------------- */ .elementor-editor-active [id^="sequence"] { opacity: 1 !important; transform: none !important; visibility: visible !important; } .elementor-editor-active body.no-scroll { overflow: visible !important; height: auto !important; } (function () { "use strict"; /* ===================================================================== */ /* [REVISI] 0. PAKSA RESET SCROLL (KHUSUS DESKTOP > 1024px) */ /* ===================================================================== */ if (window.innerWidth >= 1024) { if ('scrollRestoration' in history) { history.scrollRestoration = 'manual'; } window.scrollTo(0, 0); window.onbeforeunload = function () { window.scrollTo(0, 0); }; } /* ===================================================================== */ /* A. KONFIGURASI PENGGUNA (USER CONFIG) */ /* ===================================================================== */ const USER_CONFIG = { containerID: "home", btnClass: "wdp-button-wrapper", videoFit: "cover", // Waktu kunci scroll dalam milidetik (5 Detik) lockDuration: 5000, sequences: { sequence1: { time: 11.00 }, sequence2: { time: 11.75 }, sequence3: { time: 12.50 }, sequence4: { time: 13.25 }, sequence5: { time: 14.00 }, sequence6: { time: 14.75 }, }, }; /* ===================================================================== */ /* B. VARIABEL SISTEM */ /* ===================================================================== */ let video, started = false, shown = {}, raf, frozen = false; /* ===================================================================== */ /* C. FUNGSI INISIALISASI (SETUP) */ /* ===================================================================== */ function init() { // Reset container scroll (Hanya Desktop) if (window.innerWidth >= 1024) { const section = document.getElementById(USER_CONFIG.containerID); if (section && section.parentElement) { section.parentElement.scrollTop = 0; } } // Setup Video const section = document.getElementById(USER_CONFIG.containerID); if(!section) { console.warn('Motion Control: Container ID tidak ditemukan.'); return; } video = section.querySelector("video"); if (!video) { console.warn("Motion Control: Video background tidak ditemukan."); return; } video.pause(); video.currentTime = 0; video.muted = true; video.playsInline = true; video.removeAttribute("autoplay"); video.removeAttribute("loop"); // LOGIKA SCROLL LOCK INITIAL const isEditor = document.body.classList.contains("elementor-editor-active"); if (!isEditor) { document.body.classList.add("no-scroll"); } // Setup CSS Video if (USER_CONFIG.videoFit) { video.style.objectFit = USER_CONFIG.videoFit; if (USER_CONFIG.videoFit === "contain") { video.style.width = "100%"; video.style.height = "100%"; video.style.position = "absolute"; video.style.top = "50%"; video.style.left = "50%"; video.style.transform = "translate(-50%, -50%)"; } } // Setup Tombol const btn = document.querySelector("." + USER_CONFIG.btnClass); if (btn) { btn.addEventListener("click", start, { once: true }); btn.style.cursor = "pointer"; } raf = requestAnimationFrame(tick); } /* ===================================================================== */ /* D. FUNGSI LOGIKA UTAMA */ /* ===================================================================== */ function start() { if (started) return; started = true; // 1. Play Video video.play().catch((err) => console.error("Error Play:", err)); // 2. Timer Unlock Scroll (5 Detik dari klik) setTimeout(function() { document.body.classList.remove("no-scroll"); }, USER_CONFIG.lockDuration); } function show(id) { if (shown[id]) return; const el = document.getElementById(id); if (!el) return; el.classList.add("mc-active"); shown[id] = true; } function tick() { if (!video || frozen) return; const t = video.currentTime; const d = video.duration || 0; // 1. Cek Sequence Object.keys(USER_CONFIG.sequences).forEach((id) => { const cfg = USER_CONFIG.sequences[id]; if (t >= cfg.time) show(id); }); // 2. Logika Freeze Akhir Video if (d && t >= d - 0.12) { frozen = true; video.pause(); video.currentTime = d - 0.12; // Tampilkan semua sequence (fallback safety) Object.keys(USER_CONFIG.sequences).forEach((id) => show(id)); cancelAnimationFrame(raf); return; } raf = requestAnimationFrame(tick); } /* ===================================================================== */ /* E. EKSEKUSI */ /* ===================================================================== */ if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", init); } else { init(); } })();