hero-v2: boost sweep opacity 2.5x, add glow pulse animation
- Sweep peak: 0.06 → 0.15 (green), 0.025 → 0.04 (white) - Glow now pulses via CSS @keyframes (opacity 0.7 ↔ 1, scale 1 ↔ 1.05) - Hover: glow jumps to opacity 1.3 + scale 1.08 + sweep accelerates
This commit is contained in:
1 parent
af8b30e51d
commit
d1fd87d9ee
1 file changed
+20
-7
+20
-7
@@ -70,6 +70,11 @@ body {
|
||||
);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
animation: glowPulse 4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes glowPulse {
|
||||
0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
|
||||
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
|
||||
}
|
||||
|
||||
/* Layer 3: Animated gradient sweep */
|
||||
@@ -78,11 +83,11 @@ body {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
transparent 32%,
|
||||
rgba(255,255,255,0.025) 44%,
|
||||
rgba(34,197,94,0.06) 50%,
|
||||
rgba(255,255,255,0.02) 56%,
|
||||
transparent 68%,
|
||||
transparent 28%,
|
||||
rgba(255,255,255,0.04) 40%,
|
||||
rgba(34,197,94,0.15) 50%,
|
||||
rgba(255,255,255,0.03) 60%,
|
||||
transparent 72%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
@@ -358,8 +363,16 @@ let bgCurrentSpeed = 8; // lerped toward target
|
||||
function accelerateBg(active) {
|
||||
bgTargetSpeed = active ? 1.2 : 8;
|
||||
const glow = document.querySelector('.hero-glow');
|
||||
glow.style.opacity = active ? '1.15' : '1';
|
||||
glow.style.transition = 'opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
|
||||
if (active) {
|
||||
glow.style.animation = 'none';
|
||||
glow.style.opacity = '1.3';
|
||||
glow.style.transform = 'translate(-50%, -50%) scale(1.08)';
|
||||
glow.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
|
||||
} else {
|
||||
glow.style.opacity = '';
|
||||
glow.style.transform = '';
|
||||
glow.style.animation = '';
|
||||
}
|
||||
}
|
||||
|
||||
(function bgLoop() {
|
||||
|
||||
Reference in new issue
Block a user