Ett nytt, enkelt animationsbibliotek med syntax för att skapa rörelseeffekter i UI, med fokus på prestanda och tillgänglighet.
- GitHub-stjärnor
- 1.6K
- Uppdaterad
- Dec 6, 2024
- Licens
- MIT License
Sal
Det här biblioteket gör det möjligt för utvecklare att förbättra sina webbapplikationer med mjuka rullningsanimationer som startar när element blir synliga.
Sal är ett prestandafokuserat och lättviktigt bibliotek för rullningsanimationer som gör det enkelt att lägga till dynamiska animationer på webbelement när de kommer in i visningsområdet. Med en minimal paketstorlek på mindre än 2.8 kb fungerar det utan beroenden och ger en smidig användarupplevelse.
Sal bygger på Intersection Observer API, som effektivt känner av när element är synliga på skärmen och startar animationer därefter. API:et ger optimal prestanda och minskar avsevärt den belastning som uppstår när rullningshändelser övervakas.
Integrationen är enkel: genom att lägga till attributet `data-sal` på HTML-element kan utvecklare ange önskad animationseffekt. Alternativ som varaktighet, fördröjning och övergång kan anpassas med ytterligare dataattribut eller CSS-variabler, vilket ger full kontroll över animationernas beteende. Bland animationerna finns bland annat toning, glidning, zoomning och vändning.
Sal har även avancerade funktioner som gör det möjligt att ändra alternativ efter initiering, vilket ger flexibilitet och anpassning efter användarinteraktioner. Biblioteket stöder händelselyssnare för när element kommer in i eller lämnar visningsområdet, vilket gör det lämpligt för interaktiva applikationer som behöver ge återkoppling i realtid på användarens rullning.
Funktioner
- Lättviktigt (mindre än 2.8 kb)
- Inga beroenden
- Rullningsanimationer när element blir synliga
- Bygger på Intersection Observer API
- Enkel integration med HTML
- Stöder flera animationseffekter
- Anpassningsbara alternativ för varaktighet, fördröjning och övergång
- Händelser när element kommer in i eller lämnar visningsområdet
- Stöder CSS-variabler för anpassade egenskaper
- Möjlighet att återställa och uppdatera alternativ efter initiering
Relaterade objekt
Det här animationsbiblioteket förenklar arbetet med att skapa engagerande animationer för webbapplikationer och kombinerar flexibilitet med enkel användning.
- GitHub-stjärnor
- 50.5K
- Uppdaterad
- Dec 6, 2024
- Licens
- MIT License
Med det här animationsverktyget kan du enkelt skapa engagerande animationer och interaktioner på webben som förbättrar användarupplevelsen utöver vanliga övergångar.
- GitHub-stjärnor
- 20.0K
- Uppdaterad
- Dec 6, 2024
Ett modernt bibliotek för webbanimationer, byggt på webbläsarens inbyggda API:er för hög prestanda och liten filstorlek.
- GitHub-stjärnor
- 26.1K
- Uppdaterad
- Dec 6, 2024
- Licens
- MIT License
Den här animationslösningen ger mjuka övergångar med hög prestanda som ger liv åt alla gränssnitt och förbättrar användarupplevelsen på ett sömlöst sätt.
- GitHub-stjärnor
- 28.3K
- Uppdaterad
- Dec 6, 2024
- Licens
- MIT License
Förbättra enkelt dina webbapplikationer med fängslande animationer.
- GitHub-stjärnor
- 12.9K
- Uppdaterad
- Dec 6, 2024
- Licens
- MIT License
Ett kraftfullt verktyg för att skapa imponerande animationer i dina React-applikationer med minimal ansträngning.
- GitHub-stjärnor
- 26.1K
- Uppdaterad
- Dec 6, 2024
- Licens
- MIT License
Ett verktygsbaserat animationsramverk byggt på GSAP för att skapa animationer med minimal kod.
- GitHub-stjärnor
- 414
- Uppdaterad
- Dec 2, 2024
- Licens
- Other