File size: 4,441 Bytes
0b35166 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
document.addEventListener("DOMContentLoaded", () => {
// 1. Smooth Scroll for Navigation
const navLinks = document.querySelectorAll("header ul li a");
navLinks.forEach(link => {
link.addEventListener("click", (e) => {
e.preventDefault();
const targetId = link.getAttribute("href").substring(1);
const targetSection = document.getElementById(targetId);
if (targetSection) {
window.scrollTo({
top: targetSection.offsetTop - 70, // Adjust for header
behavior: "smooth"
});
}
});
});
// 2. Hero Section Interactivity
const tryButton = document.querySelector(".hero-info button");
tryButton.addEventListener("click", () => {
const modal = document.createElement("div");
modal.innerHTML = `
<div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 50, 0.9); padding: 20px; border-radius: 10px; color: #fff; z-index: 1000;">
<h2>Try Keylo Now!</h2>
<p>Coming soon—stay tuned!</p>
<button onclick="this.parentElement.parentElement.remove()">Close</button>
</div>
`;
document.body.appendChild(modal);
});
window.addEventListener("scroll", () => {
const heroVid = document.querySelector(".hero-vid-box");
const scrollPos = window.scrollY;
heroVid.style.transform = `translateY(${scrollPos * 0.2}px)`;
});
// 3. Info Section Card Animations
const infoCards = document.querySelectorAll(".info-cards .card");
infoCards.forEach(card => {
card.addEventListener("mousemove", (e) => {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const tiltX = (y - centerY) / 20;
const tiltY = (centerX - x) / 20;
card.style.transform = `rotateX(${tiltX}deg) rotateY(${tiltY}deg)`;
});
card.addEventListener("mouseleave", () => {
card.style.transform = "rotateX(0) rotateY(0)";
});
const video = card.querySelector("video");
if (video) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) video.play();
else video.pause();
});
}, { threshold: 0.5 });
observer.observe(card);
}
});
// 4. Projects Section Video Controls (Your Code + Fade-In)
const v1 = document.getElementById("p1");
const v2 = document.getElementById("p2");
const v3 = document.getElementById("p3");
const v4 = document.getElementById("p4");
const videoList = [v1, v2, v3, v4];
videoList.forEach(v => {
v.addEventListener("mouseover", () => v.play());
v.addEventListener("mouseout", () => v.pause());
});
// 6. Guides Section Button Action
const guidesButton = document.querySelector(".guides-button");
guidesButton.addEventListener("click", () => {
const guidesContent = document.querySelector(".guides-content");
guidesContent.innerHTML += `
<p>Extra tip: Ask Keylo to analyze your data—just upload and say “break it down!”</p>
`;
guidesButton.style.display = "none";
});
const guideParas = document.querySelectorAll(".guides-text p");
guideParas.forEach((p, index) => {
const text = p.textContent;
p.textContent = "";
let i = 0;
const type = () => {
if (i < text.length) {
p.textContent += text.charAt(i);
i++;
setTimeout(type, 50);
}
};
setTimeout(type, index * 1000);
});
// 8. More Features Bubble Effects
const bubbles = document.querySelectorAll(".feature-bubble");
bubbles.forEach(bubble => {
const randomDelay = Math.random() * 2;
bubble.style.animationDelay = `${randomDelay}s`;
bubble.addEventListener("click", () => {
bubble.style.width = "30%";
bubble.style.height = "35vh";
bubble.style.transition = "width 0.3s ease, height 0.3s ease";
bubble.querySelector("p").textContent ;
});
});
}); |