ehsan-minadd/peikarband
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

[DESIGN-004] Add staggered layered animations to hero section (feat)
Some checks failed
CD - Build & Deploy / build-and-push (push) Has been cancelled
Details
CD - Build & Deploy / package-helm (push) Has been cancelled
Details
CD - Build & Deploy / deploy-staging (push) Has been cancelled
Details
CD - Build & Deploy / deploy-production (push) Has been cancelled
Details
CD - Build & Deploy / release (push) Has been cancelled
Details
CI / test (3.11) (push) Has been cancelled
Details
CI / test (3.12) (push) Has been cancelled
Details
CI / security (push) Has been cancelled
Details

Browse Source 
- Implemented sequential fade-in animations for all hero elements
- Each element appears with timed delay (0.2s → 1.3s)
- Added fadeInUp, fadeInScale, slideInRight animations
- Main illustration fades in at 0.3s
- Floating cards appear sequentially (0.9s, 1.1s, 1.3s)
- Text and buttons animate from bottom to top
- Smooth professional loading experience
- Mimics layered reveal seen in premium themes

Animation Timeline:
- 0.2s: Coming soon badge
- 0.3s: Main illustration
- 0.4s: Heading
- 0.6s: Description
- 0.8s: Primary button
- 1.0s: Secondary button
- 0.9s-1.3s: Floating stats cards
This commit is contained in:
Ehsan.Asadi
2025-12-26 16:40:08 +03:30
parent 9ad6ba6449
commit 1dab36d4ef
3 changed files with 75 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
assets/custom.css
View File

@@ -46,3 +46,36 @@ body {
50% { transform: scale(1.05) translateY(-15px); }
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(60px) scale(0.9);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes slideInRight {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

33
src/presentation/web/assets/custom.css
View File

@@ -46,3 +46,36 @@ body {
50% { transform: scale(1.05) translateY(-15px); }
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(60px) scale(0.9);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes slideInRight {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

14
src/presentation/web/pages/landing/index.py
View File

@@ -126,6 +126,7 @@ def hero() -> rx.Component:
box_shadow="0 12px 50px rgba(251, 191, 36, 0.6), 0 0 80px rgba(251, 191, 36, 0.3)",
margin_bottom="32px",
font_size="17px",
style={"animation": "fadeInUp 0.8s ease-out 0.2s backwards"},
),
# rx.badge(
# rx.hstack(
@@ -158,6 +159,7 @@ def hero() -> rx.Component:
line_height="1.15",
letter_spacing="-0.04em",
margin_top="16px",
style={"animation": "fadeInUp 0.8s ease-out 0.4s backwards"},
),
rx.text(
"اولین و تخصصی‌ترین ارائه‌دهنده کلود اختصاصی وردپرس در ایران.",
@@ -169,6 +171,7 @@ def hero() -> rx.Component:
font_weight="500",
margin_top="24px",
margin_bottom="8px",
style={"animation": "fadeInUp 0.8s ease-out 0.6s backwards"},
),
rx.hstack(
rx.button(
@@ -189,7 +192,7 @@ def hero() -> rx.Component:
"box_shadow": "0 25px 70px rgba(27, 75, 127, 0.9), 0 0 120px rgba(109, 215, 229, 0.6)"
},
transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
style={"animation": "glow 4s ease-in-out infinite"},
style={"animation": "glow 4s ease-in-out infinite, fadeInUp 0.8s ease-out 0.8s backwards"},
),
rx.button(
rx.hstack(
@@ -214,6 +217,7 @@ def hero() -> rx.Component:
"box_shadow": "0 20px 60px rgba(109, 215, 229, 0.5)"
},
transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
style={"animation": "fadeInUp 0.8s ease-out 1s backwards"},
),
spacing="6",
margin_top="56px",
@@ -280,7 +284,7 @@ def hero() -> rx.Component:
border_radius="20px",
backdrop_filter="blur(10px)",
box_shadow="0 10px 40px rgba(16, 185, 129, 0.3)",
style={"animation": "floatSlow 6s ease-in-out infinite"},
style={"animation": "fadeInScale 0.6s ease-out 0.9s backwards, floatSlow 6s ease-in-out 1.5s infinite"},
),
# Floating card 2 - left middle
rx.box(
@@ -300,7 +304,7 @@ def hero() -> rx.Component:
border_radius="18px",
backdrop_filter="blur(10px)",
box_shadow="0 10px 40px rgba(245, 158, 11, 0.3)",
style={"animation": "floatSlow 7s ease-in-out infinite reverse"},
style={"animation": "fadeInScale 0.6s ease-out 1.1s backwards, floatSlow 7s ease-in-out 1.7s infinite reverse"},
),
# Floating card 3 - bottom center
rx.box(
@@ -325,7 +329,7 @@ def hero() -> rx.Component:
border_radius="16px",
backdrop_filter="blur(10px)",
box_shadow="0 10px 40px rgba(109, 215, 229, 0.3)",
style={"animation": "floatSlow 8s ease-in-out infinite"},
style={"animation": "fadeInScale 0.6s ease-out 1.3s backwards, floatSlow 8s ease-in-out 1.9s infinite"},
),
# Main image
rx.image(
@@ -333,7 +337,7 @@ def hero() -> rx.Component:
width="600px",
height="auto",
filter="drop-shadow(0 20px 60px rgba(27, 75, 127, 0.4))",
style={"animation": "scaleFloat 5s ease-in-out infinite"},
style={"animation": "fadeInScale 1s ease-out 0.3s backwards, scaleFloat 5s ease-in-out 1.3s infinite"},
),
position="relative",
),