// Navigation functionality
document.addEventListener('DOMContentLoaded', function() {
const navbar = document.querySelector('.navbar');
const navToggle = document.querySelector('.nav-toggle');
const navMenu = document.querySelector('.nav-menu');
const navLinks = document.querySelectorAll('.nav-link');
// Smooth scrolling for navigation links
navLinks.forEach(link => {
link.addEventListener('click', function(e) {
const href = this.getAttribute('href');
if (href.startsWith('#')) {
e.preventDefault();
const target = document.querySelector(href);
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}
});
});
// Navbar scroll effect
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
// Mobile menu toggle
if (navToggle) {
navToggle.addEventListener('click', function() {
navMenu.classList.toggle('active');
this.classList.toggle('active');
});
}
// Copy to clipboard functionality
const copyButtons = document.querySelectorAll('.copy-btn');
copyButtons.forEach(button => {
button.addEventListener('click', function() {
const textToCopy = this.getAttribute('data-copy');
navigator.clipboard.writeText(textToCopy).then(() => {
const originalIcon = this.innerHTML;
this.innerHTML = '<i class="fas fa-check"></i>';
setTimeout(() => {
this.innerHTML = originalIcon;
}, 2000);
});
});
});
// Animated code particles
createCodeParticles();
// Intersection Observer for animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-in');
}
});
}, observerOptions);
// Observe elements for animation
const animatedElements = document.querySelectorAll('.feature-card, .benefit-card, .step');
animatedElements.forEach(el => observer.observe(el));
// Hero stats counter animation
animateCounters();
// Typing effect for hero description
startTypingEffect();
// Matrix rain effect
createMatrixRain();
});
// Create floating code particles
function createCodeParticles() {
const hero = document.querySelector('.hero');
const particles = ['{', '}', '<', '>', '(', ')', '[', ']', ';', '=', '+', '-', '*', '/', '&', '|', '!', '?'];
for (let i = 0; i < 20; i++) {
const particle = document.createElement('div');
particle.className = 'code-particle';
particle.textContent = particles[Math.floor(Math.random() * particles.length)];
particle.style.left = Math.random() * 100 + '%';
particle.style.top = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 20 + 's';
particle.style.animationDuration = (Math.random() * 10 + 15) + 's';
hero.appendChild(particle);
}
}
// Animate counters in hero stats
function animateCounters() {
const counters = document.querySelectorAll('.stat-number');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const target = entry.target;
const text = target.textContent;
const hasPlus = text.includes('+');
const number = parseInt(text);
if (!isNaN(number)) {
animateNumber(target, 0, number, 2000, hasPlus);
}
observer.unobserve(target);
}
});
});
counters.forEach(counter => observer.observe(counter));
}
function animateNumber(element, start, end, duration, hasPlus = false) {
const startTime = performance.now();
function updateNumber(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
const current = Math.floor(start + (end - start) * easeOutQuart);
element.textContent = current + (hasPlus ? '+' : '');
if (progress < 1) {
requestAnimationFrame(updateNumber);
}
}
requestAnimationFrame(updateNumber);
}
// Typing effect for hero description
function startTypingEffect() {
const description = document.querySelector('.hero-description');
if (!description) return;
const text = description.textContent;
description.textContent = '';
description.style.borderRight = '2px solid var(--primary-color)';
let i = 0;
const typeSpeed = 30;
function typeWriter() {
if (i < text.length) {
description.textContent += text.charAt(i);
i++;
setTimeout(typeWriter, typeSpeed);
} else {
// Remove cursor after typing is complete
setTimeout(() => {
description.style.borderRight = 'none';
}, 1000);
}
}
// Start typing after a delay
setTimeout(typeWriter, 1000);
}
// Matrix rain effect for background
function createMatrixRain() {
const canvas = document.createElement('canvas');
canvas.className = 'matrix-canvas';
canvas.style.position = 'fixed';
canvas.style.top = '0';
canvas.style.left = '0';
canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.style.pointerEvents = 'none';
canvas.style.zIndex = '1';
canvas.style.opacity = '0.15';
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
const columns = Math.floor(canvas.width / 15);
const drops = Array(columns).fill(1);
const chars = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン';
function draw() {
ctx.fillStyle = 'rgba(2, 6, 23, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#60a5fa';
ctx.font = '14px monospace';
for (let i = 0; i < drops.length; i++) {
const text = chars[Math.floor(Math.random() * chars.length)];
ctx.fillText(text, i * 15, drops[i] * 15);
if (drops[i] * 15 > canvas.height && Math.random() > 0.975) {
drops[i] = 0;
}
drops[i]++;
}
}
setInterval(draw, 50);
}
// Advanced hover effects
document.addEventListener('DOMContentLoaded', function() {
// 3D tilt effect for cards
const cards = document.querySelectorAll('.feature-card, .benefit-card');
cards.forEach(card => {
card.addEventListener('mousemove', function(e) {
const rect = this.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = (y - centerY) / 10;
const rotateY = (centerX - x) / 10;
this.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(10px)`;
});
card.addEventListener('mouseleave', function() {
this.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)';
});
});
// Magnetic button effect
const buttons = document.querySelectorAll('.btn');
buttons.forEach(button => {
button.addEventListener('mousemove', function(e) {
const rect = this.getBoundingClientRect();
const x = e.clientX - rect.left - rect.width / 2;
const y = e.clientY - rect.top - rect.height / 2;
this.style.transform = `translate(${x * 0.1}px, ${y * 0.1}px)`;
});
button.addEventListener('mouseleave', function() {
this.style.transform = 'translate(0, 0)';
});
});
});
// Add glitch effect to title
function addGlitchEffect() {
const title = document.querySelector('.hero-title');
if (!title) return;
setInterval(() => {
if (Math.random() > 0.95) {
title.classList.add('glitch');
setTimeout(() => {
title.classList.remove('glitch');
}, 200);
}
}, 3000);
}
// Initialize advanced effects
document.addEventListener('DOMContentLoaded', function() {
addGlitchEffect();
});
