File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090021/69319090021/script.js

Back
// ===== PREMIUM LOADER SCREEN & INTRO TRANSITION SYSTEM ===== (function () { const loaderScreen = document.getElementById('loader-screen'); const introScreen = document.getElementById('intro-screen'); const mainContent = document.getElementById('main-content'); const video = document.getElementById('intro-video'); const skipBtn = document.getElementById('intro-skip'); const percentNum = document.getElementById('loader-percent-num'); const progressFill = document.getElementById('loader-progress-fill'); const statusText = document.getElementById('loader-status-text'); const dotFills = [ document.getElementById('dot-fill-0'), document.getElementById('dot-fill-1'), document.getElementById('dot-fill-2') ]; let dismissed = false; let dotTimer = null; // Status messages for cyber tech feel const statusMessages = [ "INITIALIZING COGNITIVE INTERFACE...", "CONNECTING TO PORTFOLIO SERVER...", "LOADING FUTURISTIC DESIGN SCHEMES...", "COMPILING CYBERPUNK VARIABLES...", "CALIBRATING NEON GLOW CHANNELS...", "SYNCING HOLOGRAPHIC OVERLAYS...", "READY TO ENGAGE" ]; // 1. Simulate Loading Screen Percentage let currentProgress = 0; const loadDuration = 2200; // 2.2 seconds total load const intervalTime = 30; const stepCount = loadDuration / intervalTime; const loadingInterval = setInterval(() => { currentProgress += (100 / stepCount) * (1 + Math.random() * 0.5); if (currentProgress >= 100) { currentProgress = 100; clearInterval(loadingInterval); finishLoading(); } // Update percentage and loader bar const roundedProgress = Math.floor(currentProgress); if (percentNum) percentNum.innerText = roundedProgress; if (progressFill) progressFill.style.width = roundedProgress + "%"; // Dynamic status text update const messageIndex = Math.min( Math.floor((roundedProgress / 100) * statusMessages.length), statusMessages.length - 1 ); if (statusText) statusText.innerText = statusMessages[messageIndex]; }, intervalTime); function finishLoading() { // Fade out loader screen if (loaderScreen) { loaderScreen.style.opacity = '0'; loaderScreen.style.pointerEvents = 'none'; setTimeout(() => { loaderScreen.style.display = 'none'; }, 1200); } // Show and transition to video intro screen if (introScreen) { introScreen.style.display = 'block'; // Force repaint void introScreen.offsetWidth; introScreen.style.opacity = '1'; } // Try playing intro video if (video) { function onCanPlay() { if (dismissed) return; video.classList.add('video-ready'); if (introScreen) introScreen.classList.add('bars-open'); var dur = (video.duration && isFinite(video.duration)) ? video.duration : 8; startDots(dur); video.play().catch(function() {}); } if (video.readyState >= 3) { onCanPlay(); } else { video.addEventListener('canplay', onCanPlay, { once: true }); video.addEventListener('error', function() { startDots(4); }, { once: true }); } video.addEventListener('ended', dismissIntro); } // Auto dismiss video intro after 4.5 seconds setTimeout(dismissIntro, 4500); } /* ---- dismiss intro and transition to homepage with premium zoom ---- / function dismissIntro() { if (dismissed) return; dismissed = true; if (dotTimer) clearInterval(dotTimer); if (video) { try { video.pause(); } catch(e) {} } if (introScreen) { introScreen.style.transition = 'opacity 1s ease, visibility 0s ease 1s'; introScreen.style.opacity = '0'; introScreen.style.visibility = 'hidden'; introScreen.style.pointerEvents = 'none'; } // Enable scroll document.body.classList.remove('intro-active'); document.body.style.overflow = ''; // Trigger homepage premium scale zoom in reveal if (mainContent) { mainContent.classList.add('content-revealed'); } // Initialize Lenis smooth scroll and scroll-triggered animations after intro setTimeout(() => { initScrollEffects(); if (introScreen) introScreen.style.display = 'none'; }, 300); } / ---- progress dots ---- / function startDots(duration) { var segMs = Math.max((duration / 3) 1000, 900); var seg = 0; dotFills.forEach(function(d) { if (d) { d.style.transition = 'none'; d.style.width = '0%'; } }); function fill(s) { if (s > 2 \|\| !dotFills[s]) return; setTimeout(function() { dotFills[s].style.transition = 'width ' + segMs + 'ms linear'; dotFills[s].style.width = '100%'; }, 30); } fill(0); dotTimer = setInterval(function() { seg++; if (seg <= 2) fill(seg); else clearInterval(dotTimer); }, segMs); } if (skipBtn) { skipBtn.addEventListener('click', dismissIntro); } }()); // ===== INITIALIZE ALL SCROLL & MOUSE INTERACTIVE EFFECTS ===== function initScrollEffects() { // 1. Initialize Lenis Smooth Scroll if (typeof Lenis !== 'undefined') { const lenis = new Lenis({ duration: 1.2, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), direction: 'vertical', smooth: true, mouseMultiplier: 1.05 }); function raf(time) { lenis.raf(time); requestAnimationFrame(raf); } requestAnimationFrame(raf); // Integration with GSAP ScrollTrigger if (typeof gsap !== 'undefined') { lenis.on('scroll', ScrollTrigger.update); gsap.ticker.add((time) => { lenis.raf(time * 1000); }); gsap.ticker.lagSmoothing(0); } } // 2. Initialize GSAP ScrollTrigger animations if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') { gsap.registerPlugin(ScrollTrigger); // Fade & slide in cards/elements gsap.utils.toArray('section').forEach((sec) => { gsap.fromTo(sec, { opacity: 0, y: 40 }, { opacity: 1, y: 0, duration: 1.2, ease: 'power3.out', scrollTrigger: { trigger: sec, start: 'top 82%', toggleActions: 'play none none none' } } ); }); // Parallax image scrolling gsap.utils.toArray('.parallax-img').forEach((img) => { gsap.to(img, { yPercent: -15, ease: 'none', scrollTrigger: { trigger: img, start: 'top bottom', end: 'bottom top', scrub: true } }); }); // Animate circular and horizontal skill progress bars when entering viewport document.querySelectorAll('.glass').forEach((card) => { const progressBars = card.querySelectorAll('[style="width"]'); if (progressBars.length > 0) { ScrollTrigger.create({ trigger: card, start: 'top 85%', onEnter: () => { progressBars.forEach((bar) => { // Extract target width percentage const targetWidth = bar.getAttribute('style').match(/width:\s(\d+)%/)[1] + '%'; // Reset to 0 first bar.style.width = '0%'; // Animate using GSAP gsap.to(bar, { width: targetWidth, duration: 1.5, ease: 'power2.out' }); }); } }); } }); } // 3. Initialize Interactive 3D Card Tilting (Mouse coordinate reactive) document.querySelectorAll('.glass').forEach(card => { card.addEventListener('mousemove', (e) => { const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const xc = rect.width / 2; const yc = rect.height / 2; const dx = x - xc; const dy = y - yc; // Limit degree rotation const rotateY = dx / 15; const rotateX = -dy / 15; card.style.transform = `perspective(1000px) rotateY(${rotateY}deg) rotateX(${rotateX}deg) translateY(-4px) scale(1.02)`; card.style.boxShadow = `0 15px 45px rgba(255, 45, 85, 0.22)`; card.style.borderColor = `rgba(255, 45, 85, 0.45)`; }); card.style.transition = 'transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease'; card.addEventListener('mouseleave', () => { card.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(0px) scale(1)'; card.style.boxShadow = ''; card.style.borderColor = ''; }); }); } // ===== UNIVERSAL PREMIUM INTERACTIONS (MOUSE CURSOR & RIPPLES) ===== (function () { // 1. Holographic Cursor Glow Follower const cursorGlow = document.createElement('div'); cursorGlow.className = 'mouse-cursor-glow'; document.body.appendChild(cursorGlow); document.addEventListener('mousemove', (e) => { cursorGlow.style.display = 'block'; cursorGlow.style.left = e.clientX + 'px'; cursorGlow.style.top = e.clientY + 'px'; }); document.addEventListener('mouseleave', () => { cursorGlow.style.display = 'none'; }); // Make cursor scale larger when hovering interactive elements function addHoverEvents() { document.querySelectorAll('a, button, [role="button"], input, textarea, .glass').forEach(el => { el.addEventListener('mouseenter', () => cursorGlow.classList.add('hovering')); el.addEventListener('mouseleave', () => cursorGlow.classList.remove('hovering')); }); } addHoverEvents(); // Observe body mutations to bind new elements automatically const observer = new MutationObserver(addHoverEvents); observer.observe(document.body, { childList: true, subtree: true }); // 2. Click Ripple Effect document.addEventListener('click', (e) => { const ripple = document.createElement('div'); ripple.className = 'click-ripple'; ripple.style.left = e.clientX + 'px'; ripple.style.top = e.clientY + 'px'; document.body.appendChild(ripple); // Remove after animation finishes setTimeout(() => { ripple.remove(); }, 600); }); }()); // ===== TRADITIONAL MENU & THEMING SUPPORT (FALLBACK SAFE) ===== try { lucide.createIcons(); } catch(e) { console.warn('Lucide not ready:', e); } // Mobile Hamburger Menu Toggle const menuBtn = document.getElementById('menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); const menuIcon = document.getElementById('menu-icon'); if (menuBtn && mobileMenu) { menuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); mobileMenu.classList.toggle('flex'); // Update menu icon const isMenuOpen = !mobileMenu.classList.contains('hidden'); if (isMenuOpen) { menuIcon.setAttribute('data-lucide', 'x'); } else { menuIcon.setAttribute('data-lucide', 'menu'); } try { lucide.createIcons(); } catch(e) {} }); // Close mobile menu when a link is clicked const mobileLinks = document.querySelectorAll('.mobile-link'); mobileLinks.forEach(link => { link.addEventListener('click', () => { mobileMenu.classList.add('hidden'); mobileMenu.classList.remove('flex'); menuIcon.setAttribute('data-lucide', 'menu'); try { lucide.createIcons(); } catch(e) {} }); }); } // Navbar Scroll Glassmorphism Effect const navbar = document.getElementById('navbar'); window.addEventListener('scroll', () => { if (window.scrollY > 40) { navbar.classList.add('glass', 'shadow-lg'); navbar.classList.remove('border-transparent'); navbar.classList.add('border-slate-800/80'); } else { navbar.classList.remove('glass', 'shadow-lg'); navbar.classList.add('border-transparent'); navbar.classList.remove('border-slate-800/80'); } }); // Active Nav highlight on Scroll const sections = document.querySelectorAll('section'); const navLinks = document.querySelectorAll('nav a'); window.addEventListener('scroll', () => { let current = ''; sections.forEach(section => { const sectionTop = section.offsetTop; if (pageYOffset >= (sectionTop - 160)) { current = section.getAttribute('id'); } }); navLinks.forEach(link => { link.classList.remove('text-rose-500'); link.classList.add('text-slate-300'); if (link.getAttribute('href') === `#${current}`) { link.classList.add('text-rose-500'); link.classList.remove('text-slate-300'); } }); }); // Light/Dark Theme Switcher const themeToggleBtn = document.getElementById('theme-toggle'); const themeToggleMobileBtn = document.getElementById('theme-toggle-mobile'); function toggleTheme() { const isDark = document.documentElement.classList.contains('dark'); if (isDark) { document.documentElement.classList.remove('dark'); localStorage.setItem('theme', 'light'); } else { document.documentElement.classList.add('dark'); localStorage.setItem('theme', 'dark'); } } if (themeToggleBtn) themeToggleBtn.addEventListener('click', toggleTheme); if (themeToggleMobileBtn) themeToggleMobileBtn.addEventListener('click', toggleTheme);

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.33 | proxy | phpinfo | Settings