cinelux / script.js
Ercik67's picture
Create a landing page for a cinema, luxury movie
6fd5edd verified
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Header scroll effect
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
if (window.scrollY > 50) {
header.classList.add('bg-gray-900', 'shadow-lg');
header.classList.remove('bg-transparent');
} else {
header.classList.add('bg-transparent');
header.classList.remove('bg-gray-900', 'shadow-lg');
}
});
// Animate elements when they come into view
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fadeInUp');
observer.unobserve(entry.target);
}
});
}, observerOptions);
document.querySelectorAll('.animate-on-scroll').forEach(el => {
observer.observe(el);
});