Enkelt animere tekst med Textillate.js

I vår forrige innlegg, har vi introdusert deg til Animate.css, et fantastisk CSS3-bibliotek, som gjør CSS3-animasjonsskaping enklere. I dette innlegget kommer vi til å introdusere deg til et jQuery-plugin, bygget med Animate.css, som kan animere tekst, kalt Textillate.js .

Selv om du kan animere tekst med Animate.css, er den bare animert helt, ikke brev med brev . Selv om du kanskje har en tilnærming til å pakke hver karakter til et element og animere dem, vil det være plagsomt og ikke effektivt. Med dette pluginet kan du enkelt animere hvert enkelt bokstav i teksten.

Textillate.js deler animasjonen i to komponenter, inn og ut animasjon . Du kan søke dem med forskjellige animasjoner, separat. Alle animasjonseffekter bruker Animate.css bibliotek effekter.

Foruten Animate.css, er Textillate.js også bygget basert på Lettering.js. Vi kan si at dette pluginet er kombinasjonen av disse to kraftige verktøyene. Animate.css fungerer på animasjonsfunksjonen, mens Lettering.js fokuserer på typografien .

bruk

Textillate.js trenger noen avhengigheter før den er klar til bruk. De er Animate.css, Lettering.js og jQuery. Etter at du har lastet ned filene, ta dem med i prosjektet ditt, slik som det.

Og ikke glem å sette biblioteket Animate.css i hodet.

Grunnleggende merking

For å begynne å bruke Textillate.js må du definere en klasse av element du vil animere, og deretter legge til den valgte effekten i den . Vær oppmerksom på at dette pluginet bare fungerer på tekst som inneholder elementer, slik at element som ikke er tekst ikke vil bli animert.

Som et eksempel har vi et element som inneholder tekst her, og en demo, slik som det.

Hvert av dette brevet vil animere.

Vi kaller klassenavnet med Textillate.js-initialisering, slik som det.

Teksten vil nå animere.

Textillate.js Alternativer

Den forrige Javascript-koden vil bare gjelde standard animasjonsinnstilling til teksten. For å endre det, er det to metoder du kan bruke.

1. Først ved å legge inn HTML-data api som følger.

Hvert av dette brevet vil animere.

data-in-effect definerer inngangseffekten av teksten. Mens for utgangseffekten, kan du bruke data-out-effect api.

2. Du kan også legge til alternativene i Javascript Textillate.js-initialiseringen som følgende kode.

I tillegg til effect er det andre nyttige alternativer du kanskje vil bruke. For å se hele listen over andre alternativer, gå over til dokumentasjonssiden.

Endelig tanke

Textillate.js er et veldig nyttig plugin, spesielt når du vil tiltrekke brukere til teksten du vil markere mest. Det kan være nettstedet ditt, tjenester, oppdateringer, kampanjer eller noe annet. Og for flere forbedringer, kan du kombinere Textillate.js med et annet plugin som FitText.js utpekt for gigantisk displaytekst. Igjen, husk å bruke animasjonen i riktige mengder.

10 måter Internett er Gaming Real Life (for bedre eller verre)

Helt siden begynnelsen av moderne spill har vi vært litt mer tiltrukket av verdener som etterligner livet, i stedet for å forandre reglene. Spillene er mer gripende når de gir oss tilgang til hjørner av den virkelige verden som vi ellers ikke kan engasjere seg med, eller når de lar oss ta avgjørelser som ellers ikke er våre til å lage (som å bygge skyliner og samfunn i SimCity ), eller ville få oss i trøbbel hvis vi skulle lage dem (som glede i Grand Theft Auto).Det er det

(Tekniske og design tips)

Administrer gruppearbeidet ditt online med gruppefylt

Selv om det ofte er sagt at hvis du vil ha noe gjort riktig, må du selv gjøre det, det er mange fordeler å få i å jobbe sammen med andre. Imidlertid kan det noen ganger være vanskelig å samordne og organisere gruppearbeid . Å måtte koordinere gruppearbeid, oppgaver, filer og hendelser på tvers av ulike plattformer og tjenester kan føre til hodepine. Hjelp er

(Tekniske og design tips)