Skip to content

Commit 1789666

Browse files
sonylomosonylomo
authored
Merge pull request #176 from SpaceyaTech/feature/hero-image-dynamic
Feature/Hero Image - Dynamic
2 parents d8cedcd + 1f1e23d commit 1789666

File tree

2 files changed

+100
-105
lines changed

2 files changed

+100
-105
lines changed

‎src/APP/pages/landingPage/sections/HeroSection.jsx

Lines changed: 93 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from "react";
1+
import React, { useState, useEffect, useRef } from "react";
22
import JoinSYTModal from "../../community/sections/JoinSYTModal";
33

44
function HeroSection() {
@@ -11,6 +11,30 @@ function HeroSection() {
1111
function openModal() {
1212
setIsOpen(true);
1313
}
14+
15+
{/* Hero Image Animation*/}
16+
17+
const containerRef = useRef(null);
18+
19+
useEffect(() => {
20+
const ellipses = containerRef.current.querySelectorAll(".ellipse");
21+
22+
ellipses.forEach((ellipse) => {
23+
ellipse.style.transitionDuration = `${Math.random() * 12 + 8}s`;
24+
25+
const animate = () => {
26+
ellipse.style.transform = `translate(${Math.random() * 100 - 50}%, ${
27+
Math.random() * 100 - 50
28+
}%) rotate(${Math.random() * 0}deg)`;
29+
setTimeout(() => {
30+
requestAnimationFrame(animate);
31+
}, 7000);
32+
};
33+
34+
animate();
35+
});
36+
}, []);
37+
1438
return (
1539
<section className="py-16 flex items-center justify-center flex-col md:gap-10 max-w-1440 mx-auto">
1640
{/* Hero section Description */}
@@ -36,104 +60,79 @@ function HeroSection() {
3660
</button>
3761
</div>
3862

39-
<div className="hidden lg:flex flex-col items-center min-w-[1440px] min-h-[600px] rounded-[70%] relative my-6">
40-
<div className="relative creative-shapes my-10">
41-
<div className="ellipse115 rounded-full" />
42-
<div className="ellipse116 rounded-full" />
43-
<div className="ellipse117 rounded-full" />
44-
<div className="ellipse118 rounded-full" />
45-
<div className="ellipse132 rounded-full" />
46-
<div className="ellipse119 rounded-full" />
47-
<div className="ellipse133 rounded-full" />
48-
<div className="ellipse134 rounded-full" />
49-
<div className="ellipse172 rounded-full" />
50-
<div className="ellipse173 rounded-full" />
51-
<div className="ellipse174 rounded-full" />
52-
<div className="ellipse175 rounded-full" />
53-
<div className="ellipse176 rounded-full" />
54-
<div className="ellipse135 rounded-full" />
55-
<div className="ellipse136 rounded-full" />
56-
<div className="ellipse120 rounded-full" />
57-
<div className="ellipse124 rounded-full" />
58-
<div className="ellipse125 rounded-full" />
59-
<div className="ellipse126 rounded-full" />
60-
<div className="ellipse121 rounded-full" />
61-
<div className="ellipse127 rounded-full" />
62-
<div className="ellipse128 rounded-full" />
63-
<div className="ellipse129 rounded-full" />
64-
<div className="ellipse130 rounded-full" />
65-
<div className="ellipse1311 rounded-full" />
66-
<div className="ellipse122 rounded-full" />
67-
<div className="ellipse123 rounded-full" />
68-
<div className="ellipse137 rounded-full" />
69-
<div className="ellipse138 rounded-full" />
70-
<div className="ellipse139 rounded-full" />
71-
<div className="ellipse140 rounded-full" />
72-
<div className="ellipse141 rounded-full" />
73-
<div className="ellipse142 rounded-full" />
74-
<div className="ellipse143 rounded-full" />
75-
<div className="ellipse144 rounded-full" />
76-
<div className="ellipse145 rounded-full" />
77-
<div className="ellipse177 rounded-full" />
78-
<div className="ellipse178 rounded-full" />
79-
<div className="ellipse146 rounded-full" />
80-
<div className="ellipse156 rounded-full" />
81-
<div className="ellipse157 rounded-full" />
82-
<div className="ellipse179 rounded-full" />
83-
<div className="ellipse158 rounded-full" />
84-
<div className="ellipse164 rounded-full" />
85-
<div className="ellipse165 rounded-full" />
86-
<div className="ellipse167 rounded-full" />
87-
<div className="ellipse168 rounded-full" />
88-
<div className="ellipse169 rounded-full" />
89-
<div className="ellipse170 rounded-full" />
90-
<div className="ellipse171 rounded-full" />
91-
<div className="ellipse166 rounded-full" />
92-
<div className="ellipse147 rounded-full" />
93-
<div className="ellipse148 rounded-full" />
94-
<div className="ellipse151 rounded-full" />
95-
<div className="ellipse149 rounded-full" />
96-
<div className="ellipse152 rounded-full" />
97-
<div className="ellipse153 rounded-full" />
98-
<div className="ellipse159 rounded-full" />
99-
<div className="ellipse160 rounded-full" />
100-
<div className="ellipse161 rounded-full" />
101-
<div className="ellipse162 rounded-full" />
102-
<div className="ellipse163 rounded-full" />
103-
<div className="ellipse154 rounded-full" />
104-
<div className="ellipse155 rounded-full" />
105-
<div className="ellipse150 rounded-full" />
106-
<div className="ellipse147 rounded-full" />
107-
<div className="ellipse1411 rounded-full" />
108-
<div className="ellipse128 rounded-full" />
109-
<div className="ellipse142 rounded-full" />
110-
<div className="ellipse175 rounded-full" />
111-
<div className="ellipse146 rounded-full" />
112-
<div className="ellipse159 rounded-full" />
113-
<div className="ellipse167 rounded-full" />
114-
<div className="ellipse160 rounded-full" />
115-
<div className="ellipse118 rounded-full" />
116-
<div className="ellipse138 rounded-full" />
117-
<div className="ellipse141 rounded-full" />
118-
<div className="ellipse157 rounded-full" />
119-
<div className="ellipse132 rounded-full" />
120-
<div className="ellipse131 rounded-full" />
121-
<div className="ellipse136 rounded-full" />
122-
<div className="ellipse124 rounded-full" />
123-
<div className="ellipse164 rounded-full" />
124-
<div className="ellipse165 rounded-full" />
125-
<div className="ellipse148 rounded-full" />
126-
<div className="ellipse152 rounded-full" />
127-
<div className="ellipse153 rounded-full" />
128-
<div className="ellipse155 rounded-full" />
129-
<div className="ellipse127 rounded-full" />
130-
<div className="ellipse117 rounded-full" />
63+
<div className="hidden md:block lg:flex flex-col items-center min-w-[1440px] min-h-[600px] rounded-[70%] relative my-6">
64+
<div className="relative creative-shapes my-10" ref={containerRef}>
65+
<div className="ellipse ellipse115 rounded-full" />
66+
<div className="ellipse ellipse116 rounded-full" />
67+
<div className="ellipse ellipse117 rounded-full" />
68+
<div className="ellipse ellipse118 rounded-full" />
69+
<div className="ellipse ellipse132 rounded-full" />
70+
<div className="ellipse ellipse119 rounded-full" />
71+
<div className="ellipse ellipse133 rounded-full" />
72+
<div className="ellipse ellipse134 rounded-full" />
73+
<div className="ellipse ellipse172 rounded-full" />
74+
<div className="ellipse ellipse173 rounded-full" />
75+
<div className="ellipse ellipse174 rounded-full" />
76+
<div className="ellipse ellipse175 rounded-full" />
77+
<div className="ellipse ellipse176 rounded-full" />
78+
<div className="ellipse ellipse135 rounded-full" />
79+
<div className="ellipse ellipse136 rounded-full" />
80+
<div className="ellipse ellipse120 rounded-full" />
81+
<div className="ellipse ellipse124 rounded-full" />
82+
<div className="ellipse ellipse125 rounded-full" />
83+
<div className="ellipse ellipse126 rounded-full" />
84+
<div className="ellipse ellipse121 rounded-full" />
85+
<div className="ellipse ellipse127 rounded-full" />
86+
<div className="ellipse ellipse128 rounded-full" />
87+
<div className="ellipse ellipse129 rounded-full" />
88+
<div className="ellipse ellipse130 rounded-full" />
89+
<div className="ellipse ellipse1311 rounded-full" />
90+
<div className="ellipse ellipse122 rounded-full" />
91+
<div className="ellipse ellipse123 rounded-full" />
92+
<div className="ellipse ellipse137 rounded-full" />
93+
<div className="ellipse ellipse138 rounded-full" />
94+
<div className="ellipse ellipse139 rounded-full" />
95+
<div className="ellipse ellipse140 rounded-full" />
96+
<div className="ellipse ellipse141 rounded-full" />
97+
<div className="ellipse ellipse142 rounded-full" />
98+
<div className="ellipse ellipse143 rounded-full" />
99+
<div className="ellipse ellipse144 rounded-full" />
100+
<div className="ellipse ellipse145 rounded-full" />
101+
<div className="ellipse ellipse177 rounded-full" />
102+
<div className="ellipse ellipse178 rounded-full" />
103+
<div className="ellipse ellipse146 rounded-full" />
104+
<div className="ellipse ellipse156 rounded-full" />
105+
<div className="ellipse ellipse157 rounded-full" />
106+
<div className="ellipse ellipse179 rounded-full" />
107+
<div className="ellipse ellipse158 rounded-full" />
108+
<div className="ellipse ellipse164 rounded-full" />
109+
<div className="ellipse ellipse165 rounded-full" />
110+
<div className="ellipse ellipse167 rounded-full" />
111+
<div className="ellipse ellipse168 rounded-full" />
112+
<div className="ellipse ellipse169 rounded-full" />
113+
<div className="ellipse ellipse170 rounded-full" />
114+
<div className="ellipse ellipse171 rounded-full" />
115+
<div className="ellipse ellipse166 rounded-full" />
116+
<div className="ellipse ellipse147 rounded-full" />
117+
<div className="ellipse ellipse148 rounded-full" />
118+
<div className="ellipse ellipse151 rounded-full" />
119+
<div className="ellipse ellipse149 rounded-full" />
120+
<div className="ellipse ellipse152 rounded-full" />
121+
<div className="ellipse ellipse153 rounded-full" />
122+
<div className="ellipse ellipse159 rounded-full" />
123+
<div className="ellipse ellipse160 rounded-full" />
124+
<div className="ellipse ellipse161 rounded-full" />
125+
<div className="ellipse ellipse162 rounded-full" />
126+
<div className="ellipse ellipse163 rounded-full" />
127+
<div className="ellipse ellipse154 rounded-full" />
128+
<div className="ellipse ellipse155 rounded-full" />
129+
<div className="ellipse ellipse150 rounded-full" />
130+
<div className="ellipse ellipse1411 rounded-full" />
131131
</div>
132132
</div>
133133

134134
{/* Image Section */}
135135
<JoinSYTModal isOpen={isOpen} closeModal={closeModal} />
136-
137136
</section>
138137
);
139138
}

‎src/index.css

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -204,26 +204,22 @@
204204

205205
/* Hero Image */
206206

207-
/* Frame 2085663307 */
208-
209-
.frame {
210-
position: absolute;
211-
width: 1440px;
212-
height: 519px;
213-
left: calc(50% - 1440px / 2);
214-
top: 466px;
215-
}
216-
217207
/* Creative Shapes */
218208

219209
.creative-shapes {
220-
position: absolute;
210+
position: relative;
221211
width: 1432px;
222212
height: 519px;
223213
left: 0px;
224214
top: 0px;
225215
}
226216

217+
.ellipse {
218+
position: absolute;
219+
border-radius: 50%;
220+
transition: transform 3s, filter 3s;
221+
}
222+
227223
/* Ellipse 115 */
228224

229225
.ellipse115 {

0 commit comments

Comments
 (0)