Evandro Fonseca Junior
318a764190
Projetos sobem sobre o palco do hero e o celular tem hero de uma tela sem mergulho; passagens com animation-timeline em CSS, sem GSAP nem motion; troca da vitrine sem texto duplicado; moldura de celular só com pôster e scrub reencodado em 960 px (9,4 para 5,2 MB); 3D monta na primeira interação e para quando parado; transição entre páginas do mesmo segmento; foco em anel duplo; texto de 15 px no celular; código morto removido.
26 lines
1.0 KiB
TypeScript
26 lines
1.0 KiB
TypeScript
/**
|
|
* Barra de progresso no topo e trilho lateral da rolagem da página. Sem JavaScript de rolagem: o CSS liga a
|
|
* animação à posição da rolagem (`animation-timeline: scroll()`, em globals.css). Onde o navegador não
|
|
* suporta, os dois somem.
|
|
*/
|
|
export default function ScrollProgress() {
|
|
return (
|
|
<>
|
|
<div
|
|
aria-hidden="true"
|
|
className="ds-scroll-progress ds-scroll-bar fixed left-0 right-0 top-0 z-[9995] h-[2px] origin-left bg-[var(--slash)]"
|
|
/>
|
|
|
|
<div
|
|
aria-hidden="true"
|
|
className="ds-scroll-progress ds-scroll-rail fixed right-6 top-1/2 z-[9994] hidden -translate-y-1/2 lg:block"
|
|
>
|
|
<div className="relative h-[120px] w-px bg-[rgba(255,255,255,0.08)]">
|
|
<div className="ds-scroll-fill absolute left-0 top-0 h-full w-full origin-top bg-[var(--slash)]" />
|
|
<div className="ds-scroll-dot absolute left-1/2 top-0 h-[6px] w-[6px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[var(--slash)] shadow-[0_0_10px_rgba(204,255,0,0.5)]" />
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|