Spaces:
Running
Running
File size: 2,054 Bytes
0b719d3 |
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 |
document.addEventListener('DOMContentLoaded', function () {
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href').substring(1); // Extract the target ID
const target = document.getElementById(targetId);
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Add animation on scroll for service cards
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, {
threshold: 0.1
});
document.querySelectorAll('.service-card').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
observer.observe(card);
});
// Hero text fade-in animation
const heroTitle = document.querySelector('.hero h1');
const heroParagraph = document.querySelector('.hero p');
heroTitle.style.opacity = '0';
heroParagraph.style.opacity = '0';
heroTitle.style.transform = 'translateY(20px)';
heroParagraph.style.transform = 'translateY(20px)';
setTimeout(() => {
heroTitle.style.transition = 'opacity 1s ease, transform 1s ease';
heroParagraph.style.transition = 'opacity 1s ease 0.5s, transform 1s ease 0.5s';
heroTitle.style.opacity = '1';
heroTitle.style.transform = 'translateY(0)';
heroParagraph.style.opacity = '1';
heroParagraph.style.transform = 'translateY(0)';
}, 500); // Delay to allow page load
// Dark mode toggle functionality
const darkModeToggle = document.getElementById('dark-mode-toggle');
darkModeToggle.addEventListener('click', function (e) {
e.preventDefault();
document.body.classList.toggle('dark-mode');
});
}); |