File size: 4,563 Bytes
3e2b5dd |
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 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 |
document.addEventListener('DOMContentLoaded', function() {
// Initialize GSAP animations
initAnimations();
// Add particles to quantum sphere
createParticles();
// Smooth scrolling for navigation links
initSmoothScroll();
// Add form submission handler
initFormHandler();
});
/* @tweakable number of particles in the quantum sphere visualization */
const particleCount = 15;
/* @tweakable primary glow color (matches CSS variable) */
const primaryGlowColor = '#7400e0';
/* @tweakable secondary glow color (matches CSS variable) */
const secondaryGlowColor = '#00d4ff';
/* @tweakable particle size range */
const particleSizeRange = {min: 3, max: 8};
function initAnimations() {
// Animate tech cards on scroll
gsap.from('.tech-card', {
scrollTrigger: {
trigger: '.technology',
start: 'top 80%',
},
y: 50,
opacity: 0,
duration: 0.8,
stagger: 0.2,
ease: 'power3.out'
});
// Animate use cases on scroll
gsap.from('.use-case', {
scrollTrigger: {
trigger: '.use-cases',
start: 'top 80%',
},
y: 30,
opacity: 0,
duration: 0.6,
stagger: 0.15,
ease: 'power2.out'
});
// Animate goals on scroll
gsap.from('.goal', {
scrollTrigger: {
trigger: '.goals',
start: 'top 80%',
},
scale: 0.9,
opacity: 0,
duration: 0.7,
stagger: 0.2,
ease: 'back.out(1.5)'
});
}
function createParticles() {
const particles = document.querySelector('.particles');
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
// Random size
const size = Math.random() * (particleSizeRange.max - particleSizeRange.min) + particleSizeRange.min;
// Random position
const posX = Math.random() * 100;
const posY = Math.random() * 100;
// Random color (between primary and secondary glow)
const color = i % 2 === 0 ? primaryGlowColor : secondaryGlowColor;
// Set particle styles
particle.style.cssText = `
position: absolute;
width: ${size}px;
height: ${size}px;
background: ${color};
border-radius: 50%;
top: ${posY}%;
left: ${posX}%;
box-shadow: 0 0 ${size * 2}px ${color};
opacity: ${Math.random() * 0.5 + 0.3};
animation: particle-float ${Math.random() * 4 + 3}s ease-in-out infinite alternate-reverse;
`;
// Add to container
particles.appendChild(particle);
}
}
function initSmoothScroll() {
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 100,
behavior: 'smooth'
});
}
});
});
}
function initFormHandler() {
const contactForm = document.querySelector('.contact-form form');
if (contactForm) {
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
// Get form values
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const interest = document.getElementById('interest').value;
const message = document.getElementById('message').value;
// In a real application, you would send this data to your server
console.log('Form submitted:', { name, email, interest, message });
// Show success message
alert('Thank you for your interest! We will get back to you soon.');
// Reset form
contactForm.reset();
});
}
}
// Add window resize handler for mobile optimization
window.addEventListener('resize', function() {
// This could be used to adjust animations or layouts based on window size
if (window.innerWidth < 768) {
// Mobile optimizations
}
});
|