Spaces:
Running
Running
File size: 3,743 Bytes
fda7f47 d03961b fda7f47 c85c27d fda7f47 c85c27d fda7f47 c85c27d fda7f47 d03961b fda7f47 d03961b fda7f47 d03961b c85c27d fda7f47 d03961b c85c27d d03961b fda7f47 d03961b fda7f47 | 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 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
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' });
}
});
});
});
|