Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Sponsors animation #51

Merged
merged 4 commits into from
Aug 2, 2024
Merged

Sponsors animation #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1c0dcb7
style(sponsors): add animation to Sponsors logos
alesdevux Jul 31, 2024
98cc4bd
Merge branch 'main' into sponsors-animation
alesdevux Jul 31, 2024
4b9c5cf
style(sponsors): quit boomerang effect - fix with tanslateX
alesdevux Jul 31, 2024
a8c06fb
style(sponsors): put animate-logo-cloud on parent
alesdevux Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion app/components/Sponsors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,26 @@ export const Sponsors = () => {
<p className="text-2xl text-center font-bold bg-clip-text text-transparent bg-gradient-to-br from-caPrimary-500 to-caSecondary-500">
Evento sponsorizado gracias a
</p>
<div className="flex flex-col sm:flex-row justify-center items-center gap-12">
<div
className="flex flex-col sm:flex-row justify-around items-center [&>*]:animate-logo-cloud"
style={{
gap: '3rem',
maskImage:
'linear-gradient(to left, transparent 0%, black 20%, black 80%, transparent 95%)',
}}
>
<Image
src="/imgs/afordin-sponsor.png"
alt="afordin-logo-sponsor"
width="200"
height="200"
/>
<Image
src="/imgs/afordin-sponsor.png"
alt="afordin-logo-sponsor"
width="200"
height="200"
/>
<Image
src="/imgs/afordin-sponsor.png"
alt="afordin-logo-sponsor"
Expand Down
9 changes: 9 additions & 0 deletions tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,15 @@ const config: Config = {
scheduleTitle: ["clamp(1rem, 5.5vw, 1.5rem)", "1.1"],
scheduleAuthor: ["clamp(0.75rem, 5.5vw, 1.5rem)", "1.1"],
},
keyframes: {
'logo-cloud': {
from: { transform: 'translateX(0)' },
to: { transform: 'translateX(calc(-100% - 3rem))' },
},
},
animation: {
'logo-cloud': 'logo-cloud 15s linear infinite',
}
},
},
variants: {
Expand Down