5 tutoriais de cabeçalho de rolagem baseados em JavaScript
Agora que nos inspiramos um pouco em sites ativos, vamos ver alguns tutoriais fáceis de seguir que descrevem como animar cabeçalhos na rolagem.
1. Alternar cabeçalhos fixos
Esta demonstração popular demonstra como ocultar o cabeçalho da página ao rolar a página para baixo e revelá-lo ao rolar para cima. Como vantagem, incorporamos um Lottie animação que alterna o menu cada vez que rolamos para baixo.
2. Alternar as barras de notificação do cabeçalho
Neste exercício, construímos um cabeçalho fixo cuja parte superior (a barra de cabeçalho de notificação) desaparece ao rolar para baixo e aparece ao rolar para cima. Essa é uma tendência clássica de UX dos velhos tempos, especialmente popular para lojas de comércio eletrônico e seu objetivo principal é notificar os visitantes sobre promoções, informações de entrega etc.
3. Animação de cabeçalho responsiva
Avançando neste exercício, criamos um cabeçalho responsivo pronto para uso e animamos seu botão de chamada para ação após uma certa quantidade de rolagem. Útil se você quiser chamar a atenção do visitante durante a rolagem.
4. Cabeçalho fixo que anima
Neste exercício, nosso cabeçalho fixo encolhe após uma certa quantidade de rolagem – um cenário típico quando você deseja mantê-lo fixo na rolagem, mas com altura reduzida para deixar espaço para o conteúdo da página.
5. Cabeçalho fixo animado na rolagem
Neste novo tutorial, o cabeçalho desaparece na rolagem e reaparece menor após uma certa rolagem. Em termos de funcionalidade, alternamos a posição do cabeçalho entre absoluta e fixa, dependendo da quantidade de rolagem.
Conclusão
Se houver algum outro efeito de cabeçalho que você gostaria de ver implementado, informe-nos via mídia social.
Como sempre, muito obrigado pela leitura!
