|
@@ -81,20 +81,106 @@ $(function() {
|
81
|
81
|
// Initially check visibility on page load
|
82
|
82
|
$(window).trigger('scroll');
|
83
|
83
|
|
84
|
|
- document.addEventListener('DOMContentLoaded', function() {
|
85
|
|
- const observer = new IntersectionObserver(entries => {
|
86
|
|
- entries.forEach(entry => {
|
87
|
|
- if (entry.isIntersecting) {
|
88
|
|
- entry.target.classList.add('animate-fadeUp');
|
89
|
|
- entry.target.classList.remove('opacity-0');
|
|
84
|
+
|
|
85
|
+});
|
|
86
|
+
|
|
87
|
+document.addEventListener('click', function () {
|
|
88
|
+ setTimeout(function () {
|
|
89
|
+ document.getElementById('petalOverlay').style.display = 'block';
|
|
90
|
+ }, 1000); // Delay of 1 second (1000 milliseconds)
|
|
91
|
+});
|
|
92
|
+
|
|
93
|
+document.addEventListener('DOMContentLoaded', function() {
|
|
94
|
+ var audioElement = document.getElementById('player');
|
|
95
|
+ var hasPlayed = false; // To ensure audio only plays once upon clicking and scrolling
|
|
96
|
+ var scrollCount = 0;
|
|
97
|
+ var maxScrolls = 8;
|
|
98
|
+ var scrollInterval = 500; // Time in milliseconds between each scroll
|
|
99
|
+ var scrollAmount = window.innerHeight / 6; // Amount to scroll per interval
|
|
100
|
+
|
|
101
|
+ function playAudio() {
|
|
102
|
+ if (!hasPlayed) {
|
|
103
|
+ console.log('play')
|
|
104
|
+ var playPromise = audioElement.play();
|
|
105
|
+
|
|
106
|
+ if (playPromise !== undefined) {
|
|
107
|
+ playPromise.then(function() {
|
|
108
|
+ // Automatic playback started!
|
|
109
|
+ hasPlayed = true; // Prevent further attempts to play
|
|
110
|
+ }).catch(function(error) {
|
|
111
|
+ // Automatic playback failed.
|
|
112
|
+ console.log('Autoplay failed: ' + error);
|
|
113
|
+ });
|
|
114
|
+ }
|
|
115
|
+ }
|
|
116
|
+ }
|
|
117
|
+
|
|
118
|
+ function smoothScroll() {
|
|
119
|
+ if (!hasPlayed) {
|
|
120
|
+ playAudio();
|
|
121
|
+ scrollCount++;
|
|
122
|
+ if (scrollCount >= maxScrolls) {
|
|
123
|
+ playAudio();
|
|
124
|
+ } else {
|
|
125
|
+ var start = window.pageYOffset;
|
|
126
|
+ var target = start + scrollAmount;
|
|
127
|
+ var duration = 1500; // duration of the animation
|
|
128
|
+ var startTime = null;
|
|
129
|
+
|
|
130
|
+ function scrollStep(timestamp) {
|
|
131
|
+ if (!startTime) startTime = timestamp;
|
|
132
|
+ var progress = timestamp - startTime;
|
|
133
|
+ var currentPosition = start + ((target - start) * (progress / duration));
|
|
134
|
+ window.scrollTo(0, currentPosition);
|
|
135
|
+ if (progress < duration) {
|
|
136
|
+ requestAnimationFrame(scrollStep);
|
|
137
|
+ } else {
|
|
138
|
+ setTimeout(smoothScroll, scrollInterval); // Continues scrolling after a delay
|
|
139
|
+ }
|
90
|
140
|
}
|
91
|
|
- });
|
92
|
|
- }, {
|
93
|
|
- threshold: 0.1
|
94
|
|
- });
|
95
|
141
|
|
96
|
|
- document.querySelectorAll('.fade-up').forEach(element => {
|
97
|
|
- observer.observe(element);
|
|
142
|
+ requestAnimationFrame(scrollStep);
|
|
143
|
+ }
|
|
144
|
+ }
|
|
145
|
+ }
|
|
146
|
+
|
|
147
|
+ function playOnly() {
|
|
148
|
+ if (!hasPlayed) {
|
|
149
|
+ playAudio();
|
|
150
|
+ scrollCount++;
|
|
151
|
+ if (scrollCount >= maxScrolls) {
|
|
152
|
+ playAudio();
|
|
153
|
+ } else {
|
|
154
|
+ setTimeout(playOnly, scrollInterval);
|
|
155
|
+ }
|
|
156
|
+ }
|
|
157
|
+ }
|
|
158
|
+
|
|
159
|
+ function handleInteraction() {
|
|
160
|
+ document.body.classList.remove('no-scroll'); // Enable scrolling
|
|
161
|
+ setTimeout(smoothScroll, scrollInterval); // Start smooth scrolling after initial delay
|
|
162
|
+ }
|
|
163
|
+
|
|
164
|
+ // Listen for click or touch event to start auto-scrolling
|
|
165
|
+ window.addEventListener('click', handleInteraction, { once: true });
|
|
166
|
+
|
|
167
|
+ // Intersection Observer for fading in elements
|
|
168
|
+ const observerOptions = {
|
|
169
|
+ root: null,
|
|
170
|
+ rootMargin: '0px',
|
|
171
|
+ threshold: 0.1
|
|
172
|
+ };
|
|
173
|
+
|
|
174
|
+ const observer = new IntersectionObserver((entries, observer) => {
|
|
175
|
+ entries.forEach(entry => {
|
|
176
|
+ if (entry.isIntersecting) {
|
|
177
|
+ entry.target.classList.add('fade-in');
|
|
178
|
+ observer.unobserve(entry.target);
|
|
179
|
+ }
|
98
|
180
|
});
|
|
181
|
+ }, observerOptions);
|
|
182
|
+
|
|
183
|
+ document.querySelectorAll('.fade-element').forEach(element => {
|
|
184
|
+ observer.observe(element);
|
99
|
185
|
});
|
100
|
186
|
});
|