| |
| |
| |
| |
|
|
| document.addEventListener('DOMContentLoaded', function() { |
|
|
| |
| var navbar = document.querySelector('.navbar'); |
| var bottomBar = document.getElementById('bottomBar'); |
| var heroSection = document.querySelector('.hero'); |
|
|
| window.addEventListener('scroll', function() { |
| var currentScroll = window.pageYOffset; |
| if (currentScroll > 50) { |
| navbar.classList.add('scrolled'); |
| } else { |
| navbar.classList.remove('scrolled'); |
| } |
|
|
| |
| if (heroSection) { |
| var heroBottom = heroSection.offsetTop + heroSection.offsetHeight - 200; |
| if (currentScroll > heroBottom) { |
| bottomBar.classList.add('visible'); |
| } else { |
| bottomBar.classList.remove('visible'); |
| } |
| } |
| }); |
|
|
| |
| var particlesContainer = document.getElementById('particles'); |
| if (particlesContainer) { |
| for (var i = 0; i < 20; i++) { |
| var particle = document.createElement('div'); |
| particle.className = 'particle'; |
| particle.style.left = Math.random() * 100 + '%'; |
| particle.style.top = Math.random() * 100 + '%'; |
| particle.style.width = (Math.random() * 3 + 1.5) + 'px'; |
| particle.style.height = particle.style.width; |
| particle.style.animationDelay = Math.random() * 6 + 's'; |
| particle.style.animationDuration = (Math.random() * 6 + 4) + 's'; |
| particlesContainer.appendChild(particle); |
| } |
| } |
|
|
| |
| function animateCounter(element, target, duration) { |
| var start = 0; |
| var startTime = null; |
|
|
| function update(currentTime) { |
| if (!startTime) startTime = currentTime; |
| var elapsed = currentTime - startTime; |
| var progress = Math.min(elapsed / duration, 1); |
| var easeProgress = 1 - Math.pow(1 - progress, 3); |
| var current = Math.floor(easeProgress * target); |
|
|
| if (target >= 1000) { |
| element.textContent = current.toLocaleString('fr-FR'); |
| } else { |
| element.textContent = current; |
| } |
|
|
| if (progress < 1) { |
| requestAnimationFrame(update); |
| } |
| } |
|
|
| requestAnimationFrame(update); |
| } |
|
|
| var statNumbers = document.querySelectorAll('.stat-number'); |
| var counterObserver = new IntersectionObserver(function(entries) { |
| entries.forEach(function(entry) { |
| if (entry.isIntersecting) { |
| var target = parseInt(entry.target.getAttribute('data-target')); |
| animateCounter(entry.target, target, 2000); |
| counterObserver.unobserve(entry.target); |
| } |
| }); |
| }, { threshold: 0.5 }); |
|
|
| statNumbers.forEach(function(num) { |
| counterObserver.observe(num); |
| }); |
|
|
| |
| var faqItems = document.querySelectorAll('.faq-item'); |
|
|
| faqItems.forEach(function(item) { |
| var question = item.querySelector('.faq-question'); |
| question.addEventListener('click', function() { |
| var isActive = item.classList.contains('active'); |
|
|
| faqItems.forEach(function(faq) { |
| faq.classList.remove('active'); |
| faq.querySelector('.faq-question').setAttribute('aria-expanded', 'false'); |
| }); |
|
|
| if (!isActive) { |
| item.classList.add('active'); |
| question.setAttribute('aria-expanded', 'true'); |
| } |
| }); |
| }); |
|
|
| |
| var tabBtns = document.querySelectorAll('.tab-btn'); |
| var movieCards = document.querySelectorAll('.movie-card'); |
|
|
| tabBtns.forEach(function(btn) { |
| btn.addEventListener('click', function() { |
| var category = this.getAttribute('data-category'); |
|
|
| tabBtns.forEach(function(b) { b.classList.remove('active'); }); |
| this.classList.add('active'); |
|
|
| movieCards.forEach(function(card) { |
| if (category === 'tous' || card.getAttribute('data-category') === category) { |
| card.style.display = 'block'; |
| card.style.animation = 'fadeInUp 0.5s ease forwards'; |
| } else { |
| card.style.display = 'none'; |
| } |
| }); |
| }); |
| }); |
|
|
| |
| var animateElements = document.querySelectorAll('.feature-card, .movie-card, .review-card, .highlight-item, .faq-item'); |
|
|
| animateElements.forEach(function(el) { |
| el.classList.add('animate-on-scroll'); |
| }); |
|
|
| var scrollObserver = new IntersectionObserver(function(entries) { |
| entries.forEach(function(entry) { |
| if (entry.isIntersecting) { |
| var delay = entry.target.getAttribute('data-delay') || 0; |
| setTimeout(function() { |
| entry.target.classList.add('visible'); |
| }, parseInt(delay)); |
| scrollObserver.unobserve(entry.target); |
| } |
| }); |
| }, { threshold: 0.1, rootMargin: '0px 0px -30px 0px' }); |
|
|
| animateElements.forEach(function(el) { |
| scrollObserver.observe(el); |
| }); |
|
|
| |
| document.querySelectorAll('a[href^="#"]').forEach(function(anchor) { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| var targetId = this.getAttribute('href'); |
| var targetEl = document.querySelector(targetId); |
| if (targetEl) { |
| var offsetTop = targetEl.offsetTop - 60; |
| window.scrollTo({ |
| top: offsetTop, |
| behavior: 'smooth' |
| }); |
| } |
| }); |
| }); |
|
|
| |
| movieCards.forEach(function(card) { |
| card.addEventListener('touchstart', function() { |
| this.querySelector('.movie-overlay').style.opacity = '1'; |
| }); |
| card.addEventListener('touchend', function() { |
| var self = this; |
| setTimeout(function() { |
| self.querySelector('.movie-overlay').style.opacity = '0'; |
| }, 400); |
| }); |
| }); |
|
|
| console.log('CinéVault — Page chargée'); |
| }); |
|
|
