Adriano/InsanityLab-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: animazioni stile template prowess (reveal, parallax, marquee, hero, hover)

Browse Source
This commit is contained in:
AdrianoDev
2026-07-02 13:08:09 +02:00
parent e54daa105f
commit 0d9b645636
15 changed files with 129 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/home/TrainingCards.astro
+9 -3
View File
@@ -12,13 +12,17 @@ const isSwapRow = (i: number) => Math.floor(i / 2) % 2 === 1;
{trainings.map((t, i) => {
const img = imgOf(t.image);
const card = (
<div class:list={['tcards__cell', `tcards__cell--${tones[i]}`]}>
<div class:list={['tcards__cell', `tcards__cell--${tones[i]}`]} data-reveal="fade" style={`--reveal-delay:${(i % 2) * 0.15}s`}>
<h3>{t.title}</h3>
<p>{t.caption}</p>
<a class="tcards__link" href={t.cta.href}>Scopri →</a>
</div>
);
const photo = img ? <Image src={img} alt={t.title} class="tcards__img" widths={[400, 700]} sizes="(max-width: 767px) 50vw, 25vw" /> : null;
const photo = img ? (
<div class="tcards__photo" data-reveal="fade" style={`--reveal-delay:${((i % 2) * 0.15 + 0.1).toFixed(2)}s`}>
<Image src={img} alt={t.title} class="tcards__img" widths={[400, 700]} sizes="(max-width: 767px) 50vw, 25vw" />
</div>
) : null;
return isSwapRow(i) ? <>{photo}{card}</> : <>{card}{photo}</>;
})}
</section>
@@ -37,6 +41,8 @@ const isSwapRow = (i: number) => Math.floor(i / 2) % 2 === 1;
.tcards__cell h3 { text-transform: uppercase; letter-spacing: .12em; }
.tcards__cell p { font-size: .88rem; }
.tcards__link { color: #fff; font-family: var(--font-heading); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; margin-top: 18px; }
.tcards__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.tcards__photo { overflow: hidden; }
.tcards__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; transition: transform .5s ease; }
.tcards__photo:hover .tcards__img { transform: scale(1.06); }
@media (max-width: 767px) { .tcards { grid-template-columns: repeat(2, 1fr); } }
</style>