/** * ROO3 | Estrutura do "produto na rolagem" — compartilhada entre as demonstrações. * Só o esqueleto: cor, tipografia e layout das seções ficam na página. * Espera a classe com-js no , aplicada antes da primeira pintura. */ /* ---------------- palco ---------------- Padrão = SEM js: nada de altura fantasma, a imagem parada conta a história. A altura do palco (quanto de rolagem a cena consome) é da página: .com-js .palco{height:340vh} */ .palco { position: relative; } .fixo { position: relative; width: 100%; height: auto; overflow: hidden; background: #000; } .com-js .fixo { position: sticky; top: 0; height: 100svh; } /* O canvas é por palco: classe, não id (uma página pode ter vários atos). A imagem parada SEGURA O LUGAR até o canvas pintar o primeiro quadro: sem isso o herói pisca preto enquanto o primeiro arquivo não chega. O JS põe .pintado no palco assim que desenha. */ .tela { display: none; } .com-js .tela { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .18s linear; } .com-js .palco.pintado .tela { opacity: 1; } .parado { width: 100%; height: auto; } .com-js picture { display: block; } .com-js .parado { height: 100svh; object-fit: cover; } .com-js .palco.pintado picture { display: none; } /* Ato cujos quadros não carregaram: volta pro estático SÓ ele, sem derrubar o resto da página. */ .com-js .palco.sem-quadros { height: auto; } .com-js .palco.sem-quadros .fixo { position: relative; height: auto; } .com-js .palco.sem-quadros .tela { display: none; } .com-js .palco.sem-quadros picture { display: block; } /* ---------------- barra de carga ---------------- Anima transform, não width: width é propriedade de layout e a barra é atualizada uma vez por quadro, na fase mais pesada da página. */ .carga { position: absolute; left: 0; top: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left; opacity: .85; transition: transform .25s linear, opacity .4s; } .carga.fim { opacity: 0; } /* ---------------- dica de rolagem ---------------- */ .dica { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; display: none; align-items: center; gap: 9px; transition: opacity .4s; } .com-js .dica { display: flex; } .dica.some { opacity: 0; } .dica i { display: block; width: 1px; height: 26px; animation: rolagem-desce 2.1s ease-in-out infinite; } @keyframes rolagem-desce { 0%, 100% { transform: scaleY(.35); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } } /* ---------------- entrada das seções ---------------- Conteúdo NUNCA nasce escondido: a classe .animar é aplicada pelo JS só no que ele confirmou estar abaixo da dobra. Se o script quebrar, o pior caso é a animação não acontecer, e não a página ficar em branco. */ .revela.animar { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.25,0,0,1), transform .8s cubic-bezier(.25,0,0,1); } .revela.animar.dentro { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .dica i { animation: none; } .revela.animar { opacity: 1; transform: none; transition: none; } }