On a quest for agency in Bellairs
anil.recoil.org
1document.addEventListener('DOMContentLoaded', function() {
2 // Smooth scrolling for navigation links
3 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
4 anchor.addEventListener('click', function(e) {
5 e.preventDefault();
6
7 document.querySelector(this.getAttribute('href')).scrollIntoView({
8 behavior: 'smooth'
9 });
10 });
11 });
12
13 // Add CSS for animations
14 const style = document.createElement('style');
15 style.textContent = `
16 .timeline-item {
17 opacity: 0;
18 transform: translateY(50px);
19 transition: opacity 0.6s ease, transform 0.6s ease;
20 }
21
22 .timeline-item.animate {
23 opacity: 1;
24 transform: translateY(0);
25 }
26
27 .timeline-item:nth-child(even) {
28 transform: translateY(50px);
29 }
30
31 .timeline-item:nth-child(even).animate {
32 transform: translateY(0);
33 }
34
35 .timeline-item:nth-child(1) {
36 transition-delay: 0.1s;
37 }
38
39 .timeline-item:nth-child(2) {
40 transition-delay: 0.2s;
41 }
42
43 .timeline-item:nth-child(3) {
44 transition-delay: 0.3s;
45 }
46
47 .timeline-item:nth-child(4) {
48 transition-delay: 0.4s;
49 }
50
51 .timeline-item:nth-child(5) {
52 transition-delay: 0.5s;
53 }
54
55 .timeline-item:nth-child(6) {
56 transition-delay: 0.6s;
57 }
58 `;
59 document.head.appendChild(style);
60
61 // Animate timeline elements on scroll
62 const timelineItems = document.querySelectorAll('.timeline-item');
63
64 function animateOnScroll() {
65 timelineItems.forEach(item => {
66 const itemPosition = item.getBoundingClientRect().top;
67 const screenPosition = window.innerHeight / 1.2;
68
69 if (itemPosition < screenPosition) {
70 item.classList.add('animate');
71 }
72 });
73 }
74
75 // Initial animation setup
76 setTimeout(() => {
77 animateOnScroll();
78 }, 300);
79
80 // Check on scroll
81 window.addEventListener('scroll', animateOnScroll);
82
83 // Function to add new timeline items
84 window.addTimelineItem = function(date, title, content) {
85 const timeline = document.querySelector('.timeline');
86 const timelineItem = document.createElement('div');
87 timelineItem.classList.add('timeline-item');
88
89 timelineItem.innerHTML = `
90 <div class="timeline-date">${date}</div>
91 <div class="timeline-content">
92 <h3>${title}</h3>
93 <p>${content}</p>
94 </div>
95 `;
96
97 timeline.appendChild(timelineItem);
98
99 // Update animation elements
100 setTimeout(() => {
101 animateOnScroll();
102 }, 100);
103 };
104});