Opret fuldt animerede widgets med Shift.css

Web animation tilbyder en måde at Grib folks opmærksomhed og tegne dem yderligere ind på en hjemmeside. Der er masser af værktøjer derude til Opret gratis animationer men Shift.css er en af ​​de nyeste i bunken.

Det er en fri open source ramme lavet til oprettelse dynamiske animationer inden for enhver container. Og disse animationer er ikke låst i en sekvens. Du kan faktisk opbygge brugerdefinerede animationer til hvert element i blokken og anvende disse i en bestemt rækkefølge.

Det Skift demo side kan vise dig meget bedre end jeg kan forklare i ord.

En ting du vil bemærke er, at hvert element inde i beholderen er et separat HTML-element. Uanset om det er et SVG eller et billede eller hvad som helst, kan du animere alt særskilt til opret din egen brugerdefinerede animation effekt.

Biblioteket leveres med to filer, a .css og .js bibliotek, og begge skal være tilføjet til dit dokumenthoved.

Jeg kan ikke finde nogen GitHub repo til dette projekt, så du bliver nødt til det download filerne direkte fra Shift.css hjemmeside.

Det næste skridt er at definere et beholderelement med noget indhold. Klassenavne er vigtige, så hvert animerende element skal har klassen .shift-element anvendt.

Sammen med disse klasser kan du også tilføj HTML5 data attributter at definere, hvordan animationen fungerer. Lige nu er der kun tre, men de skal være nok til at tilpasse en fuld animationseffekt.

1. data-animation: Navn på animationen
2. data-forsinkelse: Samlet forsinkelse (i sekunder), før animationen starter
3. data-varighed: Total længde (i sekunder) af animationen

Animationsnavnet skal være en foruddefineret animation oprettet til Shift biblioteket. Lige nu er der 15 animationsnavne at vælge imellem. Du kan se dem anført nederst på Shift.css hjemmeside.

Lige kopier indsæt hvad end du ønsker ind i animationsnavn indstillingen og du bør være god at gå! For eksempel, hvis jeg ønskede at bruge exit fade animationen jeg ville tilføje data-animation = "shift_exitFade" som en dataattribut til det element, der skal anime på den måde. Let peasy.

Jeg ønsker at dette bibliotek kom med flere muligheder i JavaScript, fordi det ville lade udviklere have så meget mere kontrol over placeringen og funktionerne. Men for en simpel (og gratis) animationsramme kan jeg ikke klage.

Shift.css er perfekt til nyere udviklere der vil skabe mere komplekse animationsstile uden at skrive verbose kode fra bunden.