no.hideout-lastation.com
Paradis For Designere Og Utviklere


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.

5 tips for å øke hastigheten på iPhone ladetid

5 tips for å øke hastigheten på iPhone ladetid

Lad opp iPhone-batteriet til full kapasitet, ta en stund, spesielt hvis ladningen på telefonens batteri er i nærheten av utmattelse. Selv om det er uheldig at iPhone ikke har rask ladingsteknologi, er det noen måter du kan øke hastigheten på iPhone . Her er fem slike metoder.1. Bruk en iPad strømadapter i stedet for iPhone Hvis du eier en iPad, har du sannsynligvis også iPadens strømadapter. Da iPa

(Tekniske og design tips)

20 gaver webutviklere ville elske å få

20 gaver webutviklere ville elske å få

Jul og 2015 er rett rundt hjørnet og ferien er nesten her! Det er på tide å frigjøre oss fra det travle arbeidet, kutte ned på stresset, og det viktigste er å ha en flott tid med familie og venner, utveksling av gaver og munter banter .Hvis du har en tøff tid og tenker på en gave til en webutvikler du vet, så er denne listen for deg. Jeg har

(Tekniske og design tips)