/*========================================================= ABHI.ABSOHAPPYS.COM UNIVERSAL HEADER PART 3 : JAVASCRIPT =========================================================*/ /*============================== STICKY HEADER ==============================*/ const header = document.querySelector(".main-header"); window.addEventListener("scroll", () => { if (window.scrollY > 80) { header.style.background = "rgba(5,18,50,.92)"; header.style.backdropFilter = "blur(22px)"; header.style.boxShadow = "0 10px 30px rgba(0,0,0,.35)"; header.style.padding = "14px 60px"; } else { header.style.background = "rgba(8,24,61,.70)"; header.style.boxShadow = "none"; header.style.padding = "20px 60px"; } }); /*============================== SMOOTH SCROLL ==============================*/ document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener("click", function(e) { e.preventDefault(); const target = document.querySelector(this.getAttribute("href")); if(target){ target.scrollIntoView({ behavior:"smooth" }); } }); }); /*============================== ACTIVE MENU DOT ==============================*/ const menuLinks = document.querySelectorAll(".circle-nav a"); menuLinks.forEach(link=>{ link.addEventListener("click",function(){ document.querySelectorAll(".dot").forEach(dot=>{ dot.classList.remove("active"); }); this.querySelector(".dot").classList.add("active"); }); }); /*============================== BUTTON RIPPLE EFFECT ==============================*/ const buttons = document.querySelectorAll(".gold-btn,.wa-btn,.hero-button"); buttons.forEach(button=>{ button.addEventListener("mouseenter",()=>{ button.style.transform="translateY(-4px) scale(1.03)"; }); button.addEventListener("mouseleave",()=>{ button.style.transform="translateY(0px) scale(1)"; }); }); /*============================== HERO FADE-IN ==============================*/ window.addEventListener("load",()=>{ const hero=document.querySelector(".hero-overlay"); hero.style.opacity="0"; hero.style.transform="translateY(40px)"; setTimeout(()=>{ hero.style.transition="all 1.4s ease"; hero.style.opacity="1"; hero.style.transform="translateY(0px)"; },300); }); /*============================== FLOATING STARS ==============================*/ function createStar(){ const star=document.createElement("div"); star.className="floating-star"; star.style.left=Math.random()*window.innerWidth+"px"; star.style.animationDuration=(5+Math.random()*10)+"s"; star.style.opacity=Math.random(); document.body.appendChild(star); setTimeout(()=>{ star.remove(); },15000); } setInterval(createStar,1200); /*============================== SEARCH SHORTCUT ==============================*/ document.addEventListener("keydown",function(e){ if(e.ctrlKey && e.key==="k"){ e.preventDefault(); alert("Search feature coming soon."); } }); /*============================== MOBILE MENU ==============================*/ const menuToggle=document.querySelector(".menu-toggle"); const nav=document.querySelector(".circle-nav"); if(menuToggle){ menuToggle.addEventListener("click",()=>{ nav.classList.toggle("mobile-open"); }); } /*============================== LAZY IMAGE ANIMATION ==============================*/ const images=document.querySelectorAll("img"); const observer=new IntersectionObserver((entries)=>{ entries.forEach(entry=>{ if(entry.isIntersecting){ entry.target.style.opacity="1"; entry.target.style.transform="translateY(0px)"; } }); }); images.forEach(img=>{ img.style.opacity="0"; img.style.transform="translateY(30px)"; img.style.transition="all .8s ease"; observer.observe(img); }); /*============================== WELCOME MESSAGE ==============================*/ setTimeout(()=>{ console.log( "Welcome to ABHI.ABSOHAPPYS.COM - Astrologer of the Psyche" ); },1500); /*============================== END ==============================*/