Lag Cascading Effects enkelt med CascadeJS

Fancy animasjoner er et dime et dusin på nettet. De blir enklere å lage med mange utrolige animasjonsbiblioteker .

Cascade.js er et annet bibliotek å legge til i listen, og det er definitivt en unik en. Med Cascade kan du designe tilpassede animasjonseffekter ved hjelp av kaskende bokstaver i tekst- eller kaskaderelementer i en hovedbeholder.

Dette biblioteket har ingen avhengigheter ; den kjører på klassisk JavaScript. Du kan installere den via npm, Bower, eller ved å laste ned en kopi rett fra GitHub.

For å få CascadeJS til å fungere, trenger du to filer : en CSS-fil og en JavaScript-fil. De begge kommer pakket med minifiserte versjoner for å spare deg for noen få kbs på sidestørrelse.

Hvert Cascade-element brytes ned i separate deler som animerer individuelt gjennom elementer. Disse legges til dynamisk, slik at du ikke trenger å endre noe i HTML-en din.

Men du må sette opp flow() -funksjonen i filen din, etter å ha målrettet mot hvilket element du vil animere.

Du kan faktisk bruke jQuery med dette biblioteket hvis du vil, men det er ikke nødvendig . Så, hvis du foretrekker å velge elementer med jQuery, må du gjerne bruke det i stedet.

Her er en utdrag av vanilla JavaScript fra hovedstedets demo:

Du kan passere elementet flow() uten parametere, eller du kan konfigurere dem alle selv. Det tar åtte valgfrie parametere for redigering av animasjonsstil, timing, varighet og valgfrie CSS-klasser.

CascadeJS har en annen funksjon som heter fragment() som lar deg dele bokstaver (eller elementer) i separate beholdere uten å animere dem. Du kan bruke denne funksjonen til å farge og restylere tekst på siden ved å målrette hvert enkelt brev i et ord. Ganske kul, ikke sant?

Alle kodeprøver er åpent tilgjengelige på hovedbibliotekssiden, slik at du kan kopiere / lime og tinker på egen hånd. Men du finner også dokumentasjonen på GitHub-siden hvis du leter etter en klarere måte å komme i gang.

Slik hoster du ditt personlige nettsted på Googles servere gratis

For tiden er alle vert for en personlig eller porteføljeside for å vise frem sin informasjon på nettet. Hvis du ønsker å være vert for ditt eget personlige nettsted, men egentlig ikke må budsjettere for det, er dette innlegget rett opp i smuget ditt.Denne enkle opplæringen vil vise deg hvordan du kan være vert for en grunnleggende nettside (bygget med HTML og CSS) på Googles servere, gratis . Og du ka

(Tekniske og design tips)

10 Fremtidige Augmented Reality & Smart Glasses Du kan kjøpe

Helt siden Google lanserte sitt Google Glass-prosjekt, synes virkeligheten i brukbar briller å være uunngåelig. Siden da har utviklere fra hele verden forsøkt å ta på seg Google Glass ved å lage sine egne brukbare displaybriller . I stedet for bare å kunne ta et bilde eller en video, har smarte briller muligheten til å gjøre så mye mer. Med mulig

(Tekniske og design tips)