338 lines
13 KiB
JavaScript
Executable File
338 lines
13 KiB
JavaScript
Executable File
// Changemaker Lite - Minimal Interactions
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Terminal copy functionality
|
|
const terminals = document.querySelectorAll('.terminal-box');
|
|
terminals.forEach(terminal => {
|
|
terminal.addEventListener('click', function() {
|
|
const code = this.textContent.trim();
|
|
navigator.clipboard.writeText(code).then(() => {
|
|
// Quick visual feedback
|
|
this.style.background = '#0a0a0a';
|
|
setTimeout(() => {
|
|
this.style.background = '#000';
|
|
}, 200);
|
|
});
|
|
});
|
|
});
|
|
|
|
// Smooth scroll for anchors
|
|
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', block: 'start' });
|
|
}
|
|
});
|
|
});
|
|
|
|
// Reduced motion support
|
|
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
|
document.documentElement.style.scrollBehavior = 'auto';
|
|
const style = document.createElement('style');
|
|
style.textContent = '*, *::before, *::after { animation: none !important; transition: none !important; }';
|
|
document.head.appendChild(style);
|
|
}
|
|
});
|
|
|
|
// Changemaker Lite - Smooth Grid Interactions
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Smooth scroll for anchors
|
|
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', block: 'start' });
|
|
}
|
|
});
|
|
});
|
|
|
|
// Add stagger animation to grid cards on scroll
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry, index) => {
|
|
if (entry.isIntersecting) {
|
|
setTimeout(() => {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}, index * 50);
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Observe all grid cards (exclude site-card and stat-card which have their own observer)
|
|
document.querySelectorAll('.grid-card:not(.site-card):not(.stat-card)').forEach((card, index) => {
|
|
card.style.opacity = '0';
|
|
card.style.transform = 'translateY(20px)';
|
|
card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
|
|
observer.observe(card);
|
|
});
|
|
|
|
// Neon hover effect for service cards
|
|
document.querySelectorAll('.service-card').forEach(card => {
|
|
card.addEventListener('mouseenter', function(e) {
|
|
const rect = this.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
const ripple = document.createElement('div');
|
|
ripple.style.position = 'absolute';
|
|
ripple.style.left = x + 'px';
|
|
ripple.style.top = y + 'px';
|
|
ripple.style.width = '0';
|
|
ripple.style.height = '0';
|
|
ripple.style.borderRadius = '50%';
|
|
ripple.style.background = 'rgba(91, 206, 250, 0.3)';
|
|
ripple.style.transform = 'translate(-50%, -50%)';
|
|
ripple.style.pointerEvents = 'none';
|
|
ripple.style.transition = 'width 0.6s, height 0.6s, opacity 0.6s';
|
|
|
|
this.appendChild(ripple);
|
|
|
|
setTimeout(() => {
|
|
ripple.style.width = '200px';
|
|
ripple.style.height = '200px';
|
|
ripple.style.opacity = '0';
|
|
}, 10);
|
|
|
|
setTimeout(() => {
|
|
ripple.remove();
|
|
}, 600);
|
|
});
|
|
});
|
|
|
|
// Animated counter for hero stats (the smaller stat grid)
|
|
const animateValue = (element, start, end, duration) => {
|
|
const range = end - start;
|
|
const increment = range / (duration / 16);
|
|
let current = start;
|
|
|
|
const timer = setInterval(() => {
|
|
current += increment;
|
|
if (current >= end) {
|
|
current = end;
|
|
clearInterval(timer);
|
|
}
|
|
element.textContent = Math.round(current);
|
|
}, 16);
|
|
};
|
|
|
|
// Animate hero stat numbers on scroll (only for .stat-item, not .stat-card)
|
|
const heroStatObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const statNumber = entry.target.querySelector('.stat-number');
|
|
if (statNumber && !statNumber.animated) {
|
|
statNumber.animated = true;
|
|
const value = parseInt(statNumber.textContent);
|
|
if (!isNaN(value)) {
|
|
statNumber.textContent = '0';
|
|
animateValue(statNumber, 0, value, 1000);
|
|
}
|
|
}
|
|
heroStatObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
document.querySelectorAll('.stat-item').forEach(stat => {
|
|
heroStatObserver.observe(stat);
|
|
});
|
|
|
|
// Animated counter for proof stats - improved version
|
|
const proofStatObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const statCard = entry.target;
|
|
const counter = statCard.querySelector('.stat-counter');
|
|
const statValue = statCard.getAttribute('data-stat');
|
|
|
|
if (counter && statValue && !counter.hasAttribute('data-animated')) {
|
|
counter.setAttribute('data-animated', 'true');
|
|
|
|
// Add counting class for visual effect
|
|
counter.classList.add('counting');
|
|
|
|
// Special handling for different stat types
|
|
if (statValue === '1') {
|
|
// AI Ready - just animate the text
|
|
counter.style.opacity = '0';
|
|
counter.style.transform = 'scale(0.5)';
|
|
setTimeout(() => {
|
|
counter.style.transition = 'all 0.8s ease';
|
|
counter.style.opacity = '1';
|
|
counter.style.transform = 'scale(1)';
|
|
}, 200);
|
|
} else if (statValue === '30' || statValue === '2') {
|
|
// Time values like "30min", "2hr"
|
|
const originalText = counter.textContent;
|
|
counter.textContent = '0';
|
|
counter.style.opacity = '0';
|
|
setTimeout(() => {
|
|
counter.style.transition = 'all 0.8s ease';
|
|
counter.style.opacity = '1';
|
|
counter.textContent = originalText;
|
|
}, 200);
|
|
} else {
|
|
// Numeric values - animate the counting
|
|
const value = parseInt(statValue);
|
|
const originalText = counter.textContent;
|
|
counter.textContent = '0';
|
|
|
|
// Simple counting animation
|
|
let current = 0;
|
|
const increment = value / 30; // 30 steps
|
|
const timer = setInterval(() => {
|
|
current += increment;
|
|
if (current >= value) {
|
|
current = value;
|
|
clearInterval(timer);
|
|
// Restore original formatted text
|
|
setTimeout(() => {
|
|
counter.textContent = originalText;
|
|
}, 200);
|
|
} else {
|
|
counter.textContent = Math.floor(current).toLocaleString();
|
|
}
|
|
}, 50);
|
|
}
|
|
}
|
|
proofStatObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.3,
|
|
rootMargin: '0px 0px -20px 0px'
|
|
});
|
|
|
|
// Observe proof stat cards (only those with data-stat attribute)
|
|
document.querySelectorAll('.stat-card[data-stat]').forEach(stat => {
|
|
proofStatObserver.observe(stat);
|
|
});
|
|
|
|
// Site card hover effects
|
|
document.querySelectorAll('.site-card').forEach(card => {
|
|
card.addEventListener('mouseenter', function() {
|
|
const icon = this.querySelector('.site-icon');
|
|
if (icon) {
|
|
icon.style.animation = 'none';
|
|
setTimeout(() => {
|
|
icon.style.animation = 'site-float 3s ease-in-out infinite';
|
|
}, 10);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Staggered animation for proof cards - improved
|
|
const proofCardObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
const container = entry.target.closest('.sites-grid, .stats-grid');
|
|
if (container) {
|
|
const allCards = Array.from(container.children);
|
|
const index = allCards.indexOf(entry.target);
|
|
|
|
setTimeout(() => {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}, index * 150); // Slightly longer delay for better effect
|
|
}
|
|
|
|
proofCardObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.2,
|
|
rootMargin: '0px 0px -30px 0px'
|
|
});
|
|
|
|
// Observe site cards and stat cards for stagger animation
|
|
document.querySelectorAll('.site-card, .stat-card').forEach((card) => {
|
|
// Set initial state
|
|
card.style.opacity = '0';
|
|
card.style.transform = 'translateY(30px)';
|
|
card.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
|
|
proofCardObserver.observe(card);
|
|
});
|
|
|
|
// Add parallax effect to hero section
|
|
let ticking = false;
|
|
function updateParallax() {
|
|
const scrolled = window.pageYOffset;
|
|
const hero = document.querySelector('.hero-grid');
|
|
if (hero) {
|
|
hero.style.transform = `translateY(${scrolled * 0.3}px)`;
|
|
}
|
|
ticking = false;
|
|
}
|
|
|
|
function requestTick() {
|
|
if (!ticking) {
|
|
window.requestAnimationFrame(updateParallax);
|
|
ticking = true;
|
|
}
|
|
}
|
|
|
|
// Only add parallax on desktop
|
|
if (window.innerWidth > 768) {
|
|
window.addEventListener('scroll', requestTick);
|
|
}
|
|
|
|
// Button ripple effect
|
|
document.querySelectorAll('.btn').forEach(button => {
|
|
button.addEventListener('click', function(e) {
|
|
const rect = this.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
const ripple = document.createElement('span');
|
|
ripple.style.position = 'absolute';
|
|
ripple.style.left = x + 'px';
|
|
ripple.style.top = y + 'px';
|
|
ripple.className = 'btn-ripple';
|
|
|
|
this.appendChild(ripple);
|
|
|
|
setTimeout(() => {
|
|
ripple.remove();
|
|
}, 600);
|
|
});
|
|
});
|
|
|
|
// Reduced motion support
|
|
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
|
document.documentElement.style.scrollBehavior = 'auto';
|
|
window.removeEventListener('scroll', requestTick);
|
|
}
|
|
});
|
|
|
|
// Add CSS for button ripple
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
.btn-ripple {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: rgba(111, 66, 193, 0.5); /* mkdocs purple */
|
|
transform: translate(-50%, -50%) scale(0);
|
|
animation: ripple-animation 0.6s ease-out;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes ripple-animation {
|
|
to {
|
|
transform: translate(-50%, -50%) scale(10);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(style); |