|
9 | 9 |
|
10 | 10 | const blobs = node.querySelectorAll(".blob"); |
11 | 11 | const particles = node.querySelectorAll(".particle"); |
12 | | - const rings = node.querySelectorAll(".deco-ring"); |
13 | 12 |
|
14 | 13 | // Create parallax effect for blobs - they move at different speeds |
15 | 14 | blobs.forEach((blob, index) => { |
|
48 | 47 | }); |
49 | 48 | }); |
50 | 49 |
|
51 | | - // Animate deco-rings with rotation on scroll |
52 | | - rings.forEach((ring, index) => { |
53 | | - const direction = index % 2 === 0 ? 1 : -1; |
54 | | -
|
55 | | - gsap.to(ring, { |
56 | | - rotation: direction * 180, |
57 | | - ease: "none", |
58 | | - scrollTrigger: { |
59 | | - trigger: document.body, |
60 | | - start: "top top", |
61 | | - end: "bottom bottom", |
62 | | - scrub: 3, |
63 | | - }, |
64 | | - }); |
65 | | - }); |
66 | | -
|
67 | 50 | return () => { |
68 | 51 | ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); |
69 | 52 | }; |
|
85 | 68 | <div class="blob blob-3"></div> |
86 | 69 | <div class="blob blob-4"></div> |
87 | 70 |
|
88 | | - <!-- Decorative rings --> |
89 | | - <div class="deco-ring deco-ring-1"></div> |
90 | | - <div class="deco-ring deco-ring-2"></div> |
91 | | - <div class="deco-ring deco-ring-3"></div> |
92 | | - |
93 | 71 | <!-- Floating particles --> |
94 | 72 | <div class="particle particle-1"></div> |
95 | 73 | <div class="particle particle-2"></div> |
|
203 | 181 | } |
204 | 182 | } |
205 | 183 |
|
206 | | - /* Decorative rings */ |
207 | | - .deco-ring { |
208 | | - position: absolute; |
209 | | - border-radius: 50%; |
210 | | - border: 1px solid color-mix(in oklch, var(--primary) 15%, transparent); |
211 | | - will-change: transform; |
212 | | - } |
213 | | -
|
214 | | - .deco-ring-1 { |
215 | | - top: 10%; |
216 | | - right: 10%; |
217 | | - width: 300px; |
218 | | - height: 300px; |
219 | | - animation: deco-ring-pulse 15s ease-in-out infinite; |
220 | | - } |
221 | | -
|
222 | | - .deco-ring-2 { |
223 | | - bottom: 20%; |
224 | | - left: 5%; |
225 | | - width: 400px; |
226 | | - height: 400px; |
227 | | - animation: deco-ring-pulse 20s ease-in-out infinite reverse; |
228 | | - } |
229 | | -
|
230 | | - .deco-ring-3 { |
231 | | - top: 60%; |
232 | | - right: 25%; |
233 | | - width: 200px; |
234 | | - height: 200px; |
235 | | - animation: deco-ring-pulse 12s ease-in-out infinite; |
236 | | - animation-delay: -5s; |
237 | | - } |
238 | | -
|
239 | 184 | @keyframes deco-ring-pulse { |
240 | 185 | 0%, |
241 | 186 | 100% { |
|
0 commit comments