fix: enhance image loading animation with cream-colored shimmer
- Match shimmer colors to site's cream/warm palette (#f5f0e8, #e8e4dc) - Add ease-in-out timing for smoother animation - Proper z-index layering (shimmer below image) - Longer fade-in transition (0.4s) for polished feel
This commit is contained in:
@@ -68,9 +68,10 @@ export default function OptimizedImage({
|
|||||||
style={{
|
style={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
inset: 0,
|
inset: 0,
|
||||||
background: 'linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)',
|
background: 'linear-gradient(90deg, #f5f0e8 25%, #e8e4dc 50%, #f5f0e8 75%)',
|
||||||
backgroundSize: '200% 100%',
|
backgroundSize: '200% 100%',
|
||||||
animation: 'shimmer 1.5s infinite',
|
animation: 'shimmer 1.5s ease-in-out infinite',
|
||||||
|
zIndex: 1,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
@@ -107,7 +108,9 @@ export default function OptimizedImage({
|
|||||||
height: '100%',
|
height: '100%',
|
||||||
objectFit: 'cover',
|
objectFit: 'cover',
|
||||||
opacity: loaded ? 1 : 0,
|
opacity: loaded ? 1 : 0,
|
||||||
transition: 'opacity 0.3s ease',
|
transition: 'opacity 0.4s ease-out',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 2,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user