125 lines
4.5 KiB
JavaScript
125 lines
4.5 KiB
JavaScript
// Splash Page Interactive Elements
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Observer options for animations
|
|
const observerOptions = {
|
|
threshold: 0.5,
|
|
rootMargin: '0px'
|
|
};
|
|
|
|
// Parallax effect for hero section
|
|
const hero = document.querySelector('.splash-hero');
|
|
if (hero) {
|
|
window.addEventListener('scroll', () => {
|
|
const scrolled = window.pageYOffset;
|
|
const parallaxSpeed = 0.5;
|
|
hero.style.transform = `translateY(${scrolled * parallaxSpeed}px)`;
|
|
});
|
|
}
|
|
|
|
// Add hover effects to feature cards
|
|
const featureCards = document.querySelectorAll('.feature-card');
|
|
featureCards.forEach(card => {
|
|
card.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'translateY(-10px) scale(1.02)';
|
|
});
|
|
|
|
card.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'translateY(0) scale(1)';
|
|
});
|
|
});
|
|
|
|
// Smooth scroll for anchor links
|
|
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 feature cards
|
|
const featureObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry, index) => {
|
|
if (entry.isIntersecting) {
|
|
setTimeout(() => {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}, index * 100);
|
|
featureObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
featureCards.forEach(card => {
|
|
card.style.opacity = '0';
|
|
card.style.transform = 'translateY(20px)';
|
|
card.style.transition = 'all 0.6s ease';
|
|
featureObserver.observe(card);
|
|
});
|
|
|
|
// Testimonial cards animation
|
|
const testimonialCards = document.querySelectorAll('.testimonial-card');
|
|
const testimonialObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry, index) => {
|
|
if (entry.isIntersecting) {
|
|
setTimeout(() => {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateX(0)';
|
|
}, index * 150);
|
|
testimonialObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
testimonialCards.forEach((card, index) => {
|
|
card.style.opacity = '0';
|
|
card.style.transform = index % 2 === 0 ? 'translateX(-30px)' : 'translateX(30px)';
|
|
card.style.transition = 'all 0.8s ease';
|
|
testimonialObserver.observe(card);
|
|
});
|
|
|
|
// Pricing cards hover effect
|
|
const pricingCards = document.querySelectorAll('.pricing-card');
|
|
pricingCards.forEach(card => {
|
|
card.addEventListener('mouseenter', function() {
|
|
if (!this.classList.contains('featured')) {
|
|
this.style.transform = 'translateY(-10px)';
|
|
this.style.boxShadow = '0 15px 40px rgba(0,0,0,0.12)';
|
|
}
|
|
});
|
|
|
|
card.addEventListener('mouseleave', function() {
|
|
if (!this.classList.contains('featured')) {
|
|
this.style.transform = 'translateY(0)';
|
|
this.style.boxShadow = '0 5px 20px rgba(0,0,0,0.08)';
|
|
}
|
|
});
|
|
});
|
|
|
|
// Add ripple effect to buttons
|
|
const buttons = document.querySelectorAll('.btn-primary, .btn-secondary, .btn-pricing');
|
|
buttons.forEach(button => {
|
|
button.addEventListener('click', function(e) {
|
|
const ripple = document.createElement('span');
|
|
const rect = this.getBoundingClientRect();
|
|
const size = Math.max(rect.width, rect.height);
|
|
const x = e.clientX - rect.left - size / 2;
|
|
const y = e.clientY - rect.top - size / 2;
|
|
|
|
ripple.style.width = ripple.style.height = size + 'px';
|
|
ripple.style.left = x + 'px';
|
|
ripple.style.top = y + 'px';
|
|
ripple.classList.add('ripple');
|
|
|
|
this.appendChild(ripple);
|
|
|
|
setTimeout(() => ripple.remove(), 600);
|
|
});
|
|
});
|
|
}); |