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.

"Album Builder" kommer til Instagram for Android

Instagram-brukere som har lengtet etter en albumlignende funksjon, kan snart få sine ønsker oppfylt da Instagram vil teste ut "Album" -funksjonen med Beta-utgaven av versjon 10.7.0 i sin Android-app.De som har klart å komme seg inn i Beta, vil nå kunne få tilgang til "Album Builder" . Med

(Tekniske og design tips)

Her er de 10 kodende initiativene som viser at jenter kan kode for

En av de største samtalene som ligger i cyberspace er om forholdet mellom kvinner i teknologi. Problemet var ikke at det ikke er store kvinner i teknologi, men at det ikke er nok av dem. Og som mangfoldet rapporterer fra hver tech giant show, trenger ubalansen noen rettelser. Google bestemte seg for å lede veien ved å etablere laget med kode for å lære jenter koding, men deres forsøk er ikke den eneste.Disse

(Tekniske og design tips)