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.

Kode i skyen med koding

Måten vi utvikler og kodes eksternt, har ikke endret seg mye de siste årene . Tross alt er selve kodesegmentet noe som krever oppmerksomhet og en viss følelse av ensomhet for å kunne klare seg godt. Men hva om du sitter fast og vil ha en mer personlig måte å overvinne et bestemt kodende problem på?Koding

(Tekniske og design tips)

Slik bruker du ES6 Template Literals i JavaScript

I programmeringen refererer begrepet "bokstavelig" til notasjonen av verdier i kode. For eksempel merker vi en strengverdi med en streng bokstavelig, som er tegn som er omsluttet i dobbelte eller enkle anførselstegn ( "foo", 'bar', "This is a string!" ).Malte bokstaver ble introdusert i ECMAScript 6 .

(Tekniske og design tips)