Uma nova biblioteca de animação com sintaxe simples para aprimorar a UI com efeitos de movimento, com foco em desempenho e acessibilidade.
- Estrelas no GitHub
- 1.6K
- Atualizado em
- Dec 6, 2024
- Licença
- MIT License
Sal
Esta biblioteca permite aos desenvolvedores aprimorar suas aplicações Web com animações de rolagem suaves, acionadas quando os elementos entram na área visível.
Sal é uma biblioteca leve de animações de rolagem, focada no desempenho, que facilita adicionar animações dinâmicas aos elementos da sua página quando eles entram na área visível. Com um pacote de menos de 2.8 kb, ela funciona sem dependências e proporciona uma experiência simplificada.
Criada com a API Intersection Observer, Sal detecta com eficiência quando os elementos estão visíveis na tela e aciona as animações correspondentes. Essa API proporciona desempenho ideal e reduz significativamente a sobrecarga associada ao monitoramento de eventos de rolagem.
A integração é simples: basta adicionar o atributo `data-sal` aos elementos HTML para especificar o efeito de animação desejado. É possível personalizar opções como duração, atraso e aceleração por meio de outros atributos de dados ou variáveis CSS, garantindo controle total sobre o comportamento das animações. Entre as animações disponíveis estão efeitos de esmaecimento, deslize, zoom e rotação.
Sal também oferece recursos avançados que permitem alterar as opções após a inicialização, adaptando-as à interação do usuário. A biblioteca inclui suporte a ouvintes de eventos para detectar quando os elementos entram ou saem da área visível, sendo adequada para aplicações interativas que precisam responder em tempo real à atividade de rolagem do usuário.
Recursos
- Leve (menos de 2.8 kb)
- Sem dependências
- Animações de rolagem quando os elementos ficam visíveis
- Baseada na API Intersection Observer
- Integração simples com HTML
- Suporte a vários efeitos de animação
- Opções personalizáveis de duração, atraso e aceleração
- Eventos de entrada e saída da área visível
- Suporte a variáveis CSS para propriedades personalizadas
- Possibilidade de redefinir e atualizar as opções após a inicialização
Itens relacionados
Esta biblioteca de animação simplifica a criação de animações envolventes para aplicações Web, combinando flexibilidade e facilidade de uso.
- Estrelas no GitHub
- 50.5K
- Atualizado em
- Dec 6, 2024
- Licença
- MIT License
Esta ferramenta de animação permite criar facilmente animações e interações envolventes na web, aprimorando a experiência do usuário além das transições padrão.
- Estrelas no GitHub
- 20.0K
- Atualizado em
- Dec 6, 2024
Uma biblioteca moderna de animação para a Web, baseada em APIs nativas do navegador para garantir alto desempenho e tamanho reduzido.
- Estrelas no GitHub
- 26.1K
- Atualizado em
- Dec 6, 2024
- Licença
- MIT License
Esta solução de animação oferece transições suaves e de alto desempenho que dão vida a qualquer interface e aprimoram a experiência do usuário.
- Estrelas no GitHub
- 28.3K
- Atualizado em
- Dec 6, 2024
- Licença
- MIT License
Adicione animações envolventes aos seus aplicativos Web com facilidade.
- Estrelas no GitHub
- 12.9K
- Atualizado em
- Dec 6, 2024
- Licença
- MIT License
Uma ferramenta poderosa para criar animações impressionantes com o mínimo de esforço nas suas aplicações React.
- Estrelas no GitHub
- 26.1K
- Atualizado em
- Dec 6, 2024
- Licença
- MIT License
Um framework de animação baseado em utilitários e desenvolvido sobre GSAP para criar animações com o mínimo de código.
- Estrelas no GitHub
- 414
- Atualizado em
- Dec 2, 2024
- Licença
- Other