perf(movimento): sem tela vazia, passagens em CSS e vitrine leve
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.
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
10f170abf4
commit
318a764190
77 files changed
+4293
-4951
No files matched your search
+259
-214
@@ -53,7 +53,6 @@
|
||||
--fs-section-title: min(max(clamp(24px, 4vw, 44px), 3.05vw), 68px);
|
||||
--fs-lead: min(max(15px, 1.05vw), 19px);
|
||||
--font-display: var(--font-space-grotesk), sans-serif;
|
||||
--font-hero: var(--font-monument-extended), sans-serif;
|
||||
--font-mono: var(--font-geist-mono), monospace;
|
||||
--font-body: var(--font-display);
|
||||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
@@ -150,9 +149,12 @@ html {
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
:where(a, button, input, select, textarea):focus-visible {
|
||||
outline: 2px solid var(--slash);
|
||||
outline-offset: 3px;
|
||||
/* Anel de foco que se vê em qualquer fundo: faixa lima, faixa escura e faixa lima. No fundo escuro valem as
|
||||
limas; no creme, a escura (lima sobre creme dá só 1,1:1). */
|
||||
:where(a, button, input, select, textarea, summary):focus-visible {
|
||||
outline: 2px solid var(--ink);
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 6px var(--slash);
|
||||
}
|
||||
|
||||
.film-grain {
|
||||
@@ -275,9 +277,7 @@ textarea {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.ds-section-shell,
|
||||
.ds-loading,
|
||||
.ds-error {
|
||||
.ds-section-shell {
|
||||
width: min(var(--shell), 100%);
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -556,14 +556,6 @@ textarea {
|
||||
color: var(--slash);
|
||||
}
|
||||
|
||||
.ds-loading,
|
||||
.ds-error {
|
||||
padding: var(--sp-10) clamp(24px, 6vw, 64px);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.ds-section-dark .ds-eyebrow,
|
||||
.ds-section-dark .ds-kicker,
|
||||
.ds-section-dark .ds-metric {
|
||||
@@ -614,16 +606,6 @@ textarea {
|
||||
);
|
||||
}
|
||||
|
||||
@keyframes ds-shimmer {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes marquee {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
@@ -753,47 +735,6 @@ textarea {
|
||||
}
|
||||
}
|
||||
|
||||
.ds-skeleton-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-3);
|
||||
}
|
||||
|
||||
.ds-skeleton {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
background: #111;
|
||||
}
|
||||
|
||||
.ds-skeleton::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(90deg, #111 0%, #1f1f1f 50%, #111 100%);
|
||||
background-size: 220% 100%;
|
||||
animation: ds-shimmer 1.4s linear infinite;
|
||||
}
|
||||
|
||||
.ds-skeleton-kicker {
|
||||
height: 10px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.ds-skeleton-title {
|
||||
height: 26px;
|
||||
width: 72%;
|
||||
}
|
||||
|
||||
.ds-skeleton-line {
|
||||
height: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ds-skeleton-line-short {
|
||||
width: 62%;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
@@ -833,6 +774,12 @@ textarea {
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* texto corrido de no mínimo 15 px no celular (o que não traz tamanho próprio herda daqui); só os rótulos mono
|
||||
curtos (.ds-eyebrow, .ds-tag, .ds-metric) ficam em 12 */
|
||||
body {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.ds-section {
|
||||
padding: clamp(52px, 13vw, 64px) 20px;
|
||||
}
|
||||
@@ -1007,7 +954,7 @@ textarea {
|
||||
radial-gradient(40% 50% at 6% 92%, rgba(204, 255, 0, 0.05), transparent 70%);
|
||||
}
|
||||
|
||||
/* Hero: palco de 100svh; em telas grandes ele fica fixo enquanto a rolagem conduz o mergulho da cena 3D.
|
||||
/* Hero: palco de 100svh; com a cena 3D (data-dive, mais abaixo) ele fica fixo enquanto a rolagem conduz o mergulho.
|
||||
--hero-p (0 a 1) e --hero-open (0 a 1: a máscara do fundo se abrindo) vêm de cinematic/HeroField.tsx. */
|
||||
.hero {
|
||||
--hero-p: 0;
|
||||
@@ -1095,7 +1042,8 @@ textarea {
|
||||
}
|
||||
}
|
||||
|
||||
/* Entrada: as palavras do título já pintam no primeiro quadro (sem opacity:0, bom para o LCP) e ganham foco em cascata */
|
||||
/* Entrada: as palavras do título já pintam no primeiro quadro (sem opacity:0, bom para o LCP) e sobem em cascata
|
||||
(só deslocamento: desfocar texto grande a cada quadro obriga a redesenhá-lo) */
|
||||
.hero-word {
|
||||
display: inline-block;
|
||||
animation: hero-word 1.1s var(--ease-out) both;
|
||||
@@ -1105,7 +1053,6 @@ textarea {
|
||||
@keyframes hero-word {
|
||||
from {
|
||||
transform: translateY(0.42em) rotate(2deg);
|
||||
filter: blur(12px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1160,101 +1107,118 @@ textarea {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hero fixo com o mergulho: em qualquer largura, desde que a tela tenha altura para o conteúdo caber */
|
||||
/* Mergulho: só onde a cena 3D roda. HeroField marca o hero com data-dive (mouse, aparelho que aguenta, sem
|
||||
movimento reduzido) e a tela precisa ter altura para o conteúdo caber. Sem 3D (toque, aparelho fraco,
|
||||
"economizar dados", movimento reduzido) o hero é só o palco de 100svh: nenhum bloco extra de rolagem, nenhum
|
||||
desfoque ligado à rolagem e nenhum ouvinte de rolagem. */
|
||||
.ds-main {
|
||||
/* rolagem do mergulho: o progresso (--hero-p) vai de 0 a 1 nela */
|
||||
--hero-dive: 110svh;
|
||||
}
|
||||
|
||||
@media (min-height: 700px) and (prefers-reduced-motion: no-preference) {
|
||||
.hero {
|
||||
height: 220svh;
|
||||
}
|
||||
/* O palco (100svh, preso) fica parado durante o mergulho e mais uma tela: nela Projetos sobe sobre ele, com
|
||||
margin-top de -100svh. A cena acaba de frente para os dados e Projetos a cobre: nunca uma tela vazia entre o
|
||||
mergulho e a seção seguinte (HeroField.tsx usa a mesma conta: o progresso acaba quando Projetos começa a subir). */
|
||||
.hero[data-dive] {
|
||||
height: calc(200svh + var(--hero-dive));
|
||||
|
||||
/* Legendas do mergulho: cada uma aparece enquanto a câmera atravessa a sua camada (--hero-p) */
|
||||
.hero-captions {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: end center;
|
||||
margin: 0;
|
||||
padding: 0 var(--sp-6) 11svh;
|
||||
list-style: none;
|
||||
pointer-events: none;
|
||||
/* faixa escura atrás da legenda, como em legenda de cinema, sem cobrir o centro da cena */
|
||||
background: linear-gradient(0deg, rgba(10, 10, 10, 0.75), transparent 38%);
|
||||
opacity: clamp(
|
||||
0,
|
||||
min((var(--hero-p) - 0.24) * 14, (0.94 - var(--hero-p)) * 14),
|
||||
1
|
||||
);
|
||||
& + .ds-section {
|
||||
position: relative;
|
||||
margin-top: -100svh;
|
||||
box-shadow: 0 -32px 64px -24px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
& li {
|
||||
--mid: calc((var(--from) + var(--to)) / 2);
|
||||
grid-area: 1 / 1;
|
||||
max-width: 26ch;
|
||||
color: #f4f2ed;
|
||||
font: 600 clamp(24px, 2.8vw + 12px, 48px) / 1.12 var(--font-display);
|
||||
letter-spacing: -0.035em;
|
||||
text-align: center;
|
||||
text-shadow: 0 2px 40px rgba(10, 10, 10, 0.9);
|
||||
/* Legendas do mergulho: cada uma aparece enquanto a câmera atravessa a sua camada (--hero-p) */
|
||||
& .hero-captions {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: end center;
|
||||
margin: 0;
|
||||
padding: 0 var(--sp-6) 11svh;
|
||||
list-style: none;
|
||||
pointer-events: none;
|
||||
/* faixa escura atrás da legenda, como em legenda de cinema, sem cobrir o centro da cena */
|
||||
background: linear-gradient(0deg, rgba(10, 10, 10, 0.75), transparent 38%);
|
||||
opacity: clamp(
|
||||
0,
|
||||
min(
|
||||
(var(--hero-p) - var(--from)) *
|
||||
14,
|
||||
(var(--to) - var(--hero-p)) *
|
||||
14
|
||||
),
|
||||
min((var(--hero-p) - 0.24) * 14, (0.94 - var(--hero-p)) * 14),
|
||||
1
|
||||
);
|
||||
translate: 0 calc((var(--hero-p) - var(--mid)) * -160px);
|
||||
|
||||
& li {
|
||||
--mid: calc((var(--from) + var(--to)) / 2);
|
||||
grid-area: 1 / 1;
|
||||
max-width: 26ch;
|
||||
color: #f4f2ed;
|
||||
font: 600 clamp(24px, 2.8vw + 12px, 48px) / 1.12 var(--font-display);
|
||||
letter-spacing: -0.035em;
|
||||
text-align: center;
|
||||
text-shadow: 0 2px 40px rgba(10, 10, 10, 0.9);
|
||||
opacity: clamp(
|
||||
0,
|
||||
min(
|
||||
(var(--hero-p) - var(--from)) *
|
||||
14,
|
||||
(var(--to) - var(--hero-p)) *
|
||||
14
|
||||
),
|
||||
1
|
||||
);
|
||||
translate: 0 calc((var(--hero-p) - var(--mid)) * -160px);
|
||||
}
|
||||
|
||||
/* mesmos intervalos em que a câmera enquadra cada camada (cameraFrames em HeroFieldScene.tsx) */
|
||||
& li:nth-child(1) {
|
||||
--from: 0.26;
|
||||
--to: 0.46;
|
||||
}
|
||||
|
||||
& li:nth-child(2) {
|
||||
--from: 0.52;
|
||||
--to: 0.71;
|
||||
}
|
||||
|
||||
& li:nth-child(3) {
|
||||
--from: 0.76;
|
||||
--to: 0.92;
|
||||
}
|
||||
|
||||
& .hero-caption-title {
|
||||
margin-bottom: var(--sp-3);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* mesmos intervalos em que a câmera enquadra cada camada (CAMERA_Z em HeroFieldScene.tsx) */
|
||||
& li:nth-child(1) {
|
||||
--from: 0.26;
|
||||
--to: 0.46;
|
||||
& .hero-stage {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100svh;
|
||||
}
|
||||
|
||||
& li:nth-child(2) {
|
||||
--from: 0.52;
|
||||
--to: 0.71;
|
||||
/* o texto sai de cena enquanto a câmera mergulha: sobe, encolhe e some (sem desfoque: só opacidade e
|
||||
transform, que a placa de vídeo compõe sem redesenhar o texto a cada quadro) */
|
||||
& .hero-content {
|
||||
transform: translate3d(0, calc(var(--hero-p) * -16vh), 0)
|
||||
scale(calc(1 - var(--hero-p) * 0.08));
|
||||
transform-origin: 0 50%;
|
||||
opacity: calc(1 - var(--hero-p) * 4.2);
|
||||
}
|
||||
|
||||
& li:nth-child(3) {
|
||||
--from: 0.76;
|
||||
--to: 0.92;
|
||||
& .hero-foot {
|
||||
opacity: calc(1 - var(--hero-p) * 5);
|
||||
}
|
||||
|
||||
& .hero-caption-title {
|
||||
margin-bottom: var(--sp-3);
|
||||
font-size: 12px;
|
||||
/* a coluna da direita (molduras) sai junto com o texto: o fundo 3D se abre sem passar atrás dela */
|
||||
& .hero-aside {
|
||||
transform: translate3d(0, calc(var(--hero-p) * -10vh), 0);
|
||||
opacity: calc(1 - var(--hero-p) * 4.2);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-stage {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100svh;
|
||||
}
|
||||
|
||||
/* o texto sai de cena enquanto a câmera mergulha: sobe, encolhe e perde o foco */
|
||||
.hero-content {
|
||||
transform: translate3d(0, calc(var(--hero-p) * -16vh), 0)
|
||||
scale(calc(1 - var(--hero-p) * 0.08));
|
||||
transform-origin: 0 50%;
|
||||
opacity: calc(1 - var(--hero-p) * 4.2);
|
||||
filter: blur(calc(var(--hero-p) * 18px));
|
||||
}
|
||||
|
||||
.hero-foot {
|
||||
opacity: calc(1 - var(--hero-p) * 5);
|
||||
}
|
||||
|
||||
/* a coluna da direita (molduras) sai junto com o texto: o fundo 3D se abre sem passar atrás dela */
|
||||
.hero-aside {
|
||||
transform: translate3d(0, calc(var(--hero-p) * -10vh), 0);
|
||||
opacity: calc(1 - var(--hero-p) * 4.2);
|
||||
}
|
||||
|
||||
.hero-scrim {
|
||||
opacity: calc(1 - var(--hero-p) * 1.4);
|
||||
& .hero-scrim {
|
||||
opacity: calc(1 - var(--hero-p) * 1.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1267,12 +1231,33 @@ textarea {
|
||||
}
|
||||
}
|
||||
|
||||
/* Transições entre seções: app/components/cinematic/useCinematicScroll.ts (GSAP + Lenis).
|
||||
O fundo escuro aparece nas frestas enquanto uma seção entra sobre a outra. */
|
||||
/* Passagem entre seções: só o conteúdo (.ds-section-shell) de cada cena chega com fade e uma subida curta
|
||||
enquanto ela entra na janela, ligado à rolagem (rolar para cima desfaz). O fundo da seção nunca muda de
|
||||
opacidade: entre seções do mesmo tom não há fade nem fresta de outra cor. O primeiro filho (o hero) não tem
|
||||
passagem. Sem suporte a animation-timeline o conteúdo já está no lugar, sem animação. */
|
||||
.ds-main {
|
||||
background: var(--ink);
|
||||
}
|
||||
|
||||
@keyframes ds-scene-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(32px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
@supports (animation-timeline: view()) {
|
||||
.ds-main > :not(.hero) > .ds-section-shell {
|
||||
/* backwards: antes de entrar o conteúdo espera escondido; depois, volta ao estilo normal (sem transform
|
||||
sobrando, que prenderia a vitrine fixa dentro de um bloco de transform) */
|
||||
animation: ds-scene-in linear backwards;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 0% entry 25%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Lenis controla a suavidade da rolagem: o scroll-behavior nativo brigaria com ele */
|
||||
html.lenis,
|
||||
html.lenis body {
|
||||
@@ -1283,66 +1268,6 @@ html.lenis {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
/* Capa dos cards de projeto: captura real ou painel gerado em codigo */
|
||||
.ds-cover {
|
||||
position: relative;
|
||||
flex: none; /* o card e uma coluna flex: sem isto a capa encolhe e perde a proporcao */
|
||||
aspect-ratio: 16 / 10;
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--sp-5);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--ink);
|
||||
|
||||
& video {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& img,
|
||||
& video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
transition: transform 0.7s var(--ease-out);
|
||||
}
|
||||
|
||||
.ds-card:hover & img,
|
||||
.ds-card:hover & video {
|
||||
transform: scale(1.035);
|
||||
}
|
||||
}
|
||||
|
||||
.ds-section-dark .ds-cover {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.ds-cover-fallback {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: var(--sp-4);
|
||||
color: var(--paper);
|
||||
background:
|
||||
radial-gradient(120% 90% at 100% 0%, var(--slash-dim), transparent 60%),
|
||||
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 100%
|
||||
32px,
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 /
|
||||
32px 100%,
|
||||
var(--ink);
|
||||
|
||||
& .ds-cover-mark {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(48px, 7vw, 96px);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.05em;
|
||||
color: var(--slash);
|
||||
}
|
||||
|
||||
/* so decorativa: no celular some, para a pagina nao crescer sem informacao nova */
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cinematic card hover effect */
|
||||
.ds-card {
|
||||
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
@@ -1359,11 +1284,6 @@ html.lenis {
|
||||
0 0 1px rgba(204, 255, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Cinematic section reveal transforms */
|
||||
.cinematic-reveal {
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
/* Navegação entre páginas (app/template.tsx liga as transições de visualização do React): a página atual
|
||||
recua e desfoca, a nova chega de baixo. O cabeçalho tem nome próprio e fica parado durante a troca. */
|
||||
.site-header {
|
||||
@@ -1436,3 +1356,128 @@ html.lenis {
|
||||
transform: translateY(0.35em);
|
||||
}
|
||||
}
|
||||
|
||||
/* Entradas por rolagem (Section, Reveal, DrawLine, LazyRevealImage): useInView marca data-shown (ou data-loaded)
|
||||
e a transição é CSS. O estado escondido só existe com JavaScript e sem movimento reduzido; de outro modo o
|
||||
conteúdo já nasce visível. */
|
||||
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
|
||||
.ds-reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(var(--reveal-y, 18px));
|
||||
transition:
|
||||
opacity var(--reveal-duration, 0.8s) var(--ease-out),
|
||||
transform var(--reveal-duration, 0.8s) var(--ease-out);
|
||||
transition-delay: var(--reveal-delay, 0s);
|
||||
}
|
||||
|
||||
.ds-reveal[data-shown],
|
||||
.ds-section-header[data-shown] .ds-reveal {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.ds-draw-line {
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition:
|
||||
opacity 0.6s var(--ease-out),
|
||||
transform 0.6s var(--ease-out);
|
||||
transition-delay: var(--reveal-delay, 0s);
|
||||
}
|
||||
|
||||
.ds-draw-line[data-shown] {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.ds-lazy-reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(1.02);
|
||||
transition:
|
||||
opacity 0.75s var(--ease-out),
|
||||
transform 0.75s var(--ease-out);
|
||||
}
|
||||
|
||||
.ds-lazy-reveal[data-loaded] {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ScrollProgress: barra do topo e trilho lateral ligados à rolagem da página, sem JavaScript */
|
||||
@keyframes ds-progress-x {
|
||||
from {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ds-progress-y {
|
||||
from {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ds-progress-dot {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(120px);
|
||||
}
|
||||
}
|
||||
|
||||
/* aparece depois dos primeiros 2% e some nos últimos 2% */
|
||||
@keyframes ds-progress-fade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
2%,
|
||||
98% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (animation-timeline: scroll()) {
|
||||
.ds-scroll-bar {
|
||||
animation:
|
||||
ds-progress-x linear both,
|
||||
ds-progress-fade linear both;
|
||||
animation-timeline: scroll(root), scroll(root);
|
||||
}
|
||||
|
||||
.ds-scroll-rail {
|
||||
animation: ds-progress-fade linear both;
|
||||
animation-timeline: scroll(root);
|
||||
}
|
||||
|
||||
.ds-scroll-fill {
|
||||
animation: ds-progress-y linear both;
|
||||
animation-timeline: scroll(root);
|
||||
}
|
||||
|
||||
.ds-scroll-dot {
|
||||
animation: ds-progress-dot linear both;
|
||||
animation-timeline: scroll(root);
|
||||
}
|
||||
}
|
||||
|
||||
@supports not (animation-timeline: scroll()) {
|
||||
.ds-scroll-progress {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user