Spaces:
Running
Running
Please create two sections one section should fade out and other section is in fade in on scroll with the smooth transition
c85c27d verified | document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize animations | |
| function initAnimations() { | |
| const animateElements = document.querySelectorAll('[data-animate]'); | |
| animateElements.forEach(el => { | |
| const delay = el.dataset.delay || '0'; | |
| el.style.transitionDelay = `${delay}ms`; | |
| setTimeout(() => { | |
| el.classList.add('animate'); | |
| }, 100); | |
| }); | |
| } | |
| // Set up scroll snapping with fade transitions | |
| function setupScrollSnap() { | |
| let isScrolling = false; | |
| let lastScrollTime = 0; | |
| let lastActiveSection = null; | |
| window.addEventListener('scroll', function() { | |
| const now = Date.now(); | |
| if (isScrolling || now - lastScrollTime < 1000) return; | |
| const sections = document.querySelectorAll('section'); | |
| let currentSection = null; | |
| let minDistance = Infinity; | |
| sections.forEach(section => { | |
| const rect = section.getBoundingClientRect(); | |
| const distance = Math.abs(rect.top); | |
| if (distance < minDistance) { | |
| minDistance = distance; | |
| currentSection = section; | |
| } | |
| }); | |
| if (currentSection && minDistance > 50) { | |
| isScrolling = true; | |
| // Update section states | |
| if (lastActiveSection) { | |
| lastActiveSection.classList.remove('active'); | |
| lastActiveSection.classList.add('inactive'); | |
| } | |
| currentSection.classList.remove('inactive'); | |
| currentSection.classList.add('active'); | |
| lastActiveSection = currentSection; | |
| currentSection.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| setTimeout(() => { | |
| isScrolling = false; | |
| }, 1000); | |
| } | |
| lastScrollTime = now; | |
| }); | |
| // Initialize first section as active | |
| const firstSection = document.querySelector('section'); | |
| if (firstSection) { | |
| firstSection.classList.add('active'); | |
| lastActiveSection = firstSection; | |
| } | |
| } | |
| // Set background images | |
| function setBackgrounds() { | |
| const sections = document.querySelectorAll('section'); | |
| const bgImages = [ | |
| 'http://static.photos/travel/1200x630/1', | |
| 'http://static.photos/technology/1200x630/2', | |
| 'http://static.photos/nature/1200x630/3', | |
| 'http://static.photos/cityscape/1200x630/4', | |
| 'http://static.photos/abstract/1200x630/5', | |
| 'http://static.photos/adventure/1200x630/6' | |
| ]; | |
| sections.forEach((section, index) => { | |
| if (bgImages[index]) { | |
| section.style.backgroundImage = `url(${bgImages[index]})`; | |
| } | |
| }); | |
| } | |
| // Initialize everything | |
| setBackgrounds(); | |
| initAnimations(); | |
| setupScrollSnap(); | |
| // Initialize all sections as inactive except first | |
| const sections = document.querySelectorAll('section'); | |
| sections.forEach((section, index) => { | |
| if (index > 0) { | |
| section.classList.add('inactive'); | |
| } | |
| }); | |
| // Handle navigation clicks | |
| 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' }); | |
| } | |
| }); | |
| }); | |
| }); | |