amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-21 19:31:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: box-shadow animation on community (#7905)

Browse Source 
Co-authored-by: Fre <frederic.vandeborne@icapps.com>
This commit is contained in:
Chez Fre
2025-08-07 12:48:06 +02:00
committed by GitHub
parent 1a6b2bb33f
commit b09221644b
1 changed files with 16 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/Layout/HomeContent.js
View File

@@ -755,9 +755,7 @@ function CommunityGallery() {
}, []);
return (
<div
ref={ref}
className="relative flex overflow-x-hidden overflow-y-visible w-auto">
<div ref={ref} className="relative flex overflow-x-clip w-auto">
<div
className="w-full py-12 lg:py-20 whitespace-nowrap flex flex-row animate-marquee lg:animate-large-marquee"
style={{
@@ -784,21 +782,26 @@ const CommunityImages = memo(function CommunityImages({isLazy}) {
<div
key={i}
className={cn(
`group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative`
`group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl`
)}>
<div
className={cn(
'h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-transform ease-in-out duration-300',
'h-auto rounded-2xl before:rounded-2xl before:absolute before:pointer-events-none before:inset-0 before:transition-opacity before:-z-1 before:shadow-lg lg:before:shadow-2xl before:opacity-0 before:group-hover:opacity-100 transition-transform ease-in-out duration-300',
i % 2 === 0
? 'rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl'
: 'group-hover:rotate-1 group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl rotate-[-2deg]'
? 'rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110'
: 'group-hover:rotate-1 group-hover:scale-110 rotate-[-2deg]'
)}>
<img
loading={isLazy ? 'lazy' : 'eager'}
src={src}
alt={alt}
className="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"
/>
<div
className={cn(
'overflow-clip relative before:absolute before:inset-0 before:pointer-events-none before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-transform ease-in-out duration-300'
)}>
<img
loading={isLazy ? 'lazy' : 'eager'}
src={src}
alt={alt}
className="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"
/>
</div>
</div>
</div>
))}