Treci la conținut

Sal este o bibliotecă de animații la derulare, ușoară și axată pe performanță, care facilitează adăugarea de animații dinamice elementelor web atunci când acestea intră în fereastra de vizualizare. Cu o dimensiune minimă a pachetului, de mai puțin de 2.8 kb, funcționează fără dependențe și oferă o experiență fluidă.

Creată pe baza API-ului Intersection Observer, Sal detectează eficient când elementele sunt vizibile pe ecran și declanșează animațiile corespunzătoare. Acest API oferă performanță optimă și reduce semnificativ costurile asociate monitorizării evenimentelor de derulare.

Integrarea este simplă: adăugând atributul `data-sal` elementelor HTML, dezvoltatorii pot specifica efectul de animație dorit. Opțiuni precum durata, întârzierea și funcția de accelerare pot fi personalizate folosind atribute de date suplimentare sau variabile CSS, oferind control deplin asupra comportamentului animației. Printre animațiile acceptate se numără efecte de estompare, glisare, zoom și răsturnare.

Sal oferă și funcții avansate, permițând modificarea opțiunilor după inițializare și adaptarea la interacțiunile utilizatorilor. Include suport pentru ascultători de evenimente care detectează când elementele intră sau ies din fereastra de vizualizare, fiind potrivită pentru aplicații interactive care au nevoie de feedback în timp real privind derularea paginii.

Funcționalități

  • Ușoară (mai puțin de 2.8 kb)
  • Fără dependențe
  • Animații la derulare când elementele devin vizibile
  • Bazată pe API-ul Intersection Observer
  • Integrare simplă cu HTML
  • Acceptă mai multe efecte de animație
  • Durată, întârziere și funcție de accelerare personalizabile
  • Evenimente pentru intrarea și ieșirea din fereastra de vizualizare
  • Acceptă variabile CSS pentru proprietăți personalizate
  • Posibilitatea de a reseta și actualiza opțiunile după inițializare

Elemente similare

Tailwind Motion

O bibliotecă de animație cu o sintaxă nouă și simplă, care adaugă efecte de mișcare la UI, cu accent pe performanță și accesibilitate.

anime.js

Această bibliotecă de animație simplifică procesul de creare a unor animații captivante pentru aplicațiile web, îmbinând flexibilitatea cu ușurința în utilizare.

GSAP

Acest instrument de animație vă permite să creați cu ușurință animații și interacțiuni captivante pe web, îmbunătățind experiența utilizatorilor dincolo de tranzițiile standard.

Motion One

O bibliotecă modernă de animații web, bazată pe API-urile native ale browserului, care oferă performanță rapidă și dimensiuni reduse ale fișierelor.

React Spring

Această soluție de animație oferă tranziții fluide și performante, care dau viață oricărei interfețe și îmbunătățesc fără probleme experiența utilizatorilor.

AutoAnimate

Adăugați cu ușurință animații captivante aplicațiilor web.

Framer Motion

Un instrument puternic pentru crearea cu efort minim a unor animații impresionante în aplicațiile React.

Glaze

Un framework de animații bazat pe utilitare și construit pe GSAP, pentru crearea animațiilor cu un minim de cod.