Opprett fullt animerte widgets med Shift.css

Web animasjon tilbyr en måte å Ta tak i folks oppmerksomhet og tegne dem videre inn i et nettsted. Det er mange verktøy der ute Lag gratis animasjoner men Shift.css er en av de nyeste i gjengen.

Det er en gratis åpen kildekode rammeverk laget for å lage dynamiske animasjoner i enhver beholder. Og disse animasjonene er ikke låst i en sekvens. Du kan faktisk bygge egendefinerte animasjoner for hvert element i blokken og bruk disse i en bestemt rekkefølge.

De Skift demo side 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 til Lag din egen tilpassede animasjonseffekt.

Biblioteket kommer med to filer, a .css og .js bibliotek, og begge må være lagt til dokumenthodet ditt.

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

Det neste trinnet er å Definer et beholderelement med noe innhold. Klassenavn er viktige, slik at hvert animasjonselement må ha klassen .skift-element anvendt.

Sammen med disse klassene kan du også legg til HTML5 data attributter å 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. data-forsinkelse: Totalt forsinkelse (i sekunder) før animasjonen starter
3. data-varighet: Total lengde (i sekunder) av animasjonen

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

Bare Kopier og lim inn hva enn du vil inn i animasjonsnavninnstillingen og du bør være god å gå! For eksempel, hvis jeg ønsket å bruke exit fade animasjonen jeg ville legge til data-animasjon = "shift_exitFade" som en datatilskrivning til det som helst element burde animere på den måten. Lett peasy.

Jeg ønsker at dette biblioteket kom med flere alternativer i JavaScript fordi det ville la utviklere ha 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 vil lage mer komplekse animasjonsstiler uten å skrive verbose kode fra grunnen av.