File size: 3,118 Bytes
9ffbd43 |
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 |
document.addEventListener('DOMContentLoaded', function() {
// Mobile menu toggle
const menuToggle = document.getElementById('menu-toggle');
const mobileMenu = document.getElementById('mobile-menu');
menuToggle.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
const icon = menuToggle.querySelector('svg');
if (mobileMenu.classList.contains('hidden')) {
feather.replace();
} else {
icon.setAttribute('data-feather', 'x');
feather.replace();
}
});
// Close mobile menu when clicking a link
const mobileLinks = mobileMenu.querySelectorAll('a');
mobileLinks.forEach(link => {
link.addEventListener('click', function() {
mobileMenu.classList.add('hidden');
menuToggle.querySelector('svg').setAttribute('data-feather', 'menu');
feather.replace();
});
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
// Add shadow to navbar on scroll
window.addEventListener('scroll', function() {
const nav = document.querySelector('nav');
if (window.scrollY > 50) {
nav.classList.add('shadow-xl');
} else {
nav.classList.remove('shadow-xl');
}
});
// Floating music player interaction
const musicPlayer = document.querySelector('.fixed.bottom-6.right-6');
if (musicPlayer) {
musicPlayer.addEventListener('click', function() {
alert("🎶 Custom workshop playlist loading... Imagine the perfect coding beats here!");
});
}
// Animate elements when they come into view
const animateOnScroll = function() {
const elements = document.querySelectorAll('.bg-gradient-to-br');
elements.forEach(element => {
const elementPosition = element.getBoundingClientRect().top;
const screenPosition = window.innerHeight / 1.3;
if (elementPosition < screenPosition) {
element.classList.add('opacity-100', 'translate-y-0');
element.classList.remove('opacity-0', 'translate-y-10');
}
});
};
// Set initial state for animation
document.querySelectorAll('.bg-gradient-to-br').forEach(element => {
element.classList.add('transition-all', 'duration-500', 'ease-out', 'opacity-0', 'translate-y-10');
});
window.addEventListener('scroll', animateOnScroll);
animateOnScroll(); // Run once on load
}); |