Opprett fullt animerte widgets med Shift.css

Web animasjon gir en måte å gripe folkets oppmerksomhet og trekke dem videre inn i et nettsted. Det er mange verktøy der ute for å lage gratis animasjoner, men Shift.css er en av de nyeste i gjengen.

Det er et gratis open source rammeverk laget for å skape dynamiske animasjoner i enhver container . Og disse animasjonene er ikke låst i en sekvens . Du kan faktisk bygge egendefinerte animasjoner for hvert element i blokken og bruke disse i en bestemt rekkefølge .

Shift-demosiden kan vise deg mye bedre enn jeg kan forklare i ord.

En ting du vil legge merke til er at hvert element inne i beholderen er et eget HTML-element . Enten det er en SVG eller et bilde eller hva som helst, kan du animere alt separat for å skape din egen tilpassede animasjonseffekt .

Biblioteket kommer med to filer, et .css og .js bibliotek, og begge må legges til dokumenthodet .

Jeg kan ikke finne noen GitHub repo for dette prosjektet, så du må laste ned filene direkte fra Shift.css nettsiden.

Det neste trinnet er å definere et beholderelement med noe innhold. .shift-element er viktige, slik at hvert animerende element må ha klassen .shift-element påført .

Sammen med disse klassene kan du også legge til HTML5-dataattributter for å definere hvordan animasjonen fungerer. Akkurat nå er det bare tre, men de skal være nok til å tilpasse en full animasjonseffekt.

1. data-animasjon : Navn på animasjonen
2. Dataforsinkelse : Totalt forsinkelse (i sekunder) før animasjonen starter
3. datavarighet : Total lengde (i sekunder) av animasjonen

Animasjonsnavnet må være en forhåndsdefinert animasjon opprettet for Shift-biblioteket. Akkurat nå er det 15 animasjonsnavn å velge mellom . Du kan se dem oppført nederst på Shift.css hjemmeside.

Bare kopier / lim inn hva du vil i animasjonsnavninnstillingen, og du bør være god å gå! Hvis jeg for eksempel ville bruke exit-fade-animasjonen, ville jeg legge til data-animation="shift_exitFade" som data-animation="shift_exitFade" til det elementet som skulle animere på den måten. Lett peasy.

Jeg ønsker at dette biblioteket kom med flere alternativer i JavaScript fordi det ville gi utviklere så mye mer kontroll over plasseringen og funksjonene. Men for et enkelt (og gratis) animasjonsramme kan jeg ikke klage.

Shift.css er perfekt for nyere utviklere som ønsker å lage mer komplekse animasjonsstiler uten å skrive verbose koden fra bunnen av.