Animação de Scroll

[jettkat]

Boa noite pessoal,
estava tentando buscar uma forma de fazer um efeito de preenchimento neon que reage baseado no scroll do usuário dentro do site. Precisava que esse efeito preenchesse uma linha reta dentro de uma seção. Tentei algumas abordagens que o chat
gpt me ofereceu, mas nada funcionou bem e responsivamente. Alguém sabe uma forma de fazer isso que seja responsivo?
Aqui tem uma foto de como eu queria que a linha fosse:

[henriquetourinho]

🤯 Que efeito animal, jettkat! Adorei a ideia!

Essa é uma implementação de Timeline (Linha do Tempo) ou Progress Bar Vertical que reage ao scroll, e o efeito neon/preenchimento dá um toque super moderno. O problema de responsividade que você encontrou com o ChatGPT provavelmente está no cálculo da altura, que precisa ser dinâmico.

A forma mais robusta (e responsável) de fazer isso é usando uma combinação de HTML/CSS + JavaScript para monitorar a posição da linha.

🛠️ A Estrutura da Solução

A lógica é a seguinte:

1. CSS: Criamos a linha base (vermelho claro) e a linha de preenchimento (neon).
2. JS: Usamos o evento scroll para calcular a porcentagem do progresso.
3. Responsividade: O cálculo é feito com base na altura dinâmica da div da linha, garantindo que funcione em qualquer tela.

📝 O Código Mínimo para a Mágica

1. HTML (A Estrutura da Linha)

O segredo está em aninhar a linha que preenche dentro da linha base.

<section class="timeline-container">
    <div id="timeline-base">
        <div id="timeline-fill">
            </div>
        
        <div class="timeline-point" data-position="20%">
            </div>
        <div class="timeline-point" data-position="55%">
             </div>
        <div class="timeline-point" data-position="90%">
             </div>
    </div>
</section>

2. CSS (O Efeito Neon)

Use variáveis para o neon. Você pode trocar a cor base pelo seu vermelho.

#timeline-base {
    position: relative;
    width: 4px; /* Largura da linha */
    height: 1000px; /* **IMPORTANTE:** Defina uma altura para a sua seção */
    background-color: #f7a49a; /* Cor da linha base (vermelho apagado) */
    margin: 50px auto;
}

#timeline-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0; /* Começa com 0 e é preenchido pelo JS */
    
    /* Efeito Neon */
    background-color: #ff007f; /* Cor do neon (ex: magenta) */
    box-shadow: 0 0 10px #ff007f, 0 0 20px #ff007f;
    transition: height 0.1s ease-out; /* Suaviza a animação */
}

3. JavaScript (O Cálculo Responsivo)

O JS calcula a porcentagem do quanto a linha está visível na tela e aplica essa altura na div #timeline-fill.

document.addEventListener('scroll', fillTimeline);
document.addEventListener('load', fillTimeline); // Garante que roda no carregamento

function fillTimeline() {
    const timeline = document.getElementById('timeline-base');
    const fill = document.getElementById('timeline-fill');

    // 1. Pega a posição e o tamanho do elemento em relação ao viewport
    const timelineRect = timeline.getBoundingClientRect();
    
    // 2. Calcula a altura da linha que já passou pelo topo da tela
    // - timelineRect.top: Distância do topo do elemento até o topo da viewport.
    // - window.innerHeight: Altura da viewport.
    const scrollProgress = window.innerHeight - timelineRect.top;

    // 3. Altura total da linha
    const timelineHeight = timeline.offsetHeight;

    // 4. Calcula a porcentagem de preenchimento (0 a 1)
    let fillPercentage = scrollProgress / timelineHeight;

    // Garante que o valor não passe de 100% nem caia abaixo de 0%
    fillPercentage = Math.min(Math.max(0, fillPercentage), 1);
    
    // 5. Aplica a altura em porcentagem na linha de preenchimento
    fill.style.height = (fillPercentage * 100) + '%';
}

✨ Por que isso é Responsivo?

O cálculo usa as propriedades getBoundingClientRect() e offsetHeight, que são dinâmicas. O código não usa pixels fixos para a porcentagem de preenchimento, apenas para a width da linha.

A altura da linha de preenchimento (fill.style.height) é calculada como uma porcentagem da altura total da linha (timelineHeight), independentemente do tamanho da tela do usuário.