capytal/capytal.cc
1
0
Fork 0
Code Issues Pull Requests Activity

feat(anim): new slide in animation

Browse Source
This commit is contained in:
Guz
2024-10-31 14:11:12 -03:00
parent 4411b3f4cc
commit 373d75682d
2 changed files with 54 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
assets/css/style.css
View File

@@ -34,3 +34,48 @@
--cal-sans: "Cal Sans", 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
--sans: "Karla", 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
@keyframes slide-enter {
0% {
opacity:0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: none;
}
}
.slide-enter > * {
--stagger: var(--stagger, 0ms);
--delay: var(--delay, 150ms);
--start: var(--start, 0ms);
}
@media (prefers-reduced-motion: no-preference) {
.slide-enter > * {
animation: slide-enter 1s both 1;
animation-delay: calc(var(--start) + var(--stagger) * var(--delay));
}
}
.slide-enter > *:nth-child(1) { --stagger: 1; }
.slide-enter > *:nth-child(2) { --stagger: 2; }
.slide-enter > *:nth-child(3) { --stagger: 3; }
.slide-enter > *:nth-child(4) { --stagger: 4; }
.slide-enter > *:nth-child(5) { --stagger: 5; }
.slide-enter > *:nth-child(6) { --stagger: 6; }
.slide-enter > *:nth-child(7) { --stagger: 7; }
.slide-enter > *:nth-child(8) { --stagger: 8; }
.slide-enter > *:nth-child(9) { --stagger: 9; }
.slide-enter > *:nth-child(10) { --stagger: 10; }
.slide-enter > *:nth-child(11) { --stagger: 11; }
.slide-enter > *:nth-child(12) { --stagger: 12; }
.slide-enter > *:nth-child(13) { --stagger: 13; }
.slide-enter > *:nth-child(14) { --stagger: 14; }
.slide-enter > *:nth-child(15) { --stagger: 15; }
.slide-enter > *:nth-child(16) { --stagger: 16; }
.slide-enter > *:nth-child(17) { --stagger: 17; }
.slide-enter > *:nth-child(18) { --stagger: 18; }
.slide-enter > *:nth-child(19) { --stagger: 19; }
.slide-enter > *:nth-child(20) { --stagger: 20; }

13
handlers/pages/index.templ
View File

@@ -30,7 +30,7 @@ templ (p *IndexPage) Component() {
}) {
<main
class={ "bg-background-00 absolute w-screen h-screen overflow-x-scroll top-0 left-0",
"flex flex-row snap-x snap-mandatory scroll-smooth cursor-move" }
"flex flex-row snap-x snap-mandatory scroll-smooth cursor-move" }
>
@p.section("main", "brand/light-asset.svg", "/assets/img/cat-1.png", "bg-white", "", "#code") {
<ul class="p-0 list-none font-sans flex gap-1rem underline underline-offset-3">
@@ -72,15 +72,17 @@ templ (p *IndexPage) section(id, logo, img, color string, linkLeft, linkRight st
</a>
}
<div
class="w-full h-10rem md:h-25rem relative grid cols-3 rows-1"
class="w-full h-10rem md:h-25rem relative grid cols-3 rows-1 slide-enter"
>
<div
class="w-10rem h-10rem md:w-25rem md:h-25rem col-start-2 justify-self-center relative"
class="w-10rem h-10rem md:w-25rem md:h-25rem col-start-2 justify-self-center relative slide-enter"
style="--stagger:2;"
>
@p.blendedImage(img, color)
</div>
<div
class="absolute left-o top-0 w-full h-full flex justify-center items-center z-3"
style="--stagger:0;"
id="logo"
>
<div class="h-2.2rem md:h-4rem">
@@ -92,7 +94,10 @@ templ (p *IndexPage) section(id, logo, img, color string, linkLeft, linkRight st
</div>
</div>
</div>
<div class="h-0">
<div
class="h-0 slide-enter"
style="--stagger:3;"
>
{ children... }
</div>
if linkRight != "" {