Animate.css - CSS3 bibliotek for å lage animasjon enkelt

CSS har forbedret seg med mange funksjoner som gjør webutviklingen mye mer interessant og utfordrende. En av disse funksjonene er CSS3 animasjonseffekter . Før CSS3, for å lage en animasjon, kan du bare jobbe med Javascript. Men nå kan du lage det enkelt med CSS3.

Vi har gått gjennom deg med en god opplæring om å skape Bounce Effect med CSS3 tidligere, og i dette innlegget vil jeg introdusere deg et fantastisk bibliotek som vil gjøre animasjonsskaping med CSS3 enda enklere: Animate.css .

Animate.css er en brukervennlig bibliotekssamling av CSS3 animasjonseffekter . Dette biblioteket gir deg over 50 forskjellige animasjonseffekter som fungerer konsekvent på de fleste alle nettlesere med CSS3-støtte.

Du kan deretter bruke animasjonen på teksten, bildet, skjemaet og så videre. Det er også mange flotte nettsteder som bruker denne libraren; Tridiv - den beste CSS 3D-editoren på nettet - er en av dem.

Starter

Med Animate.css, alt du trenger å gjøre er å inkludere de riktige klassene med elementene dine . For å komme i gang, ta for det første animate.css filen inn i hodet . Du kan laste ned hele biblioteket fra Github-arkivsiden.

Som standard vil Animate.css animere bare en gang på den første siden . Det vil da forbli statisk. For å kunne kontrollere animasjonen, trenger vi litt Javascript. I denne saken vil vi inkludere en jQuery i prosjektet, slik som det.

 ...  ... 

HTML Markup

For å bruke animasjonen må du legge til .animated klasse til elementet du vil animere, sammen med animasjonsnavnet som det.

 Denne teksten vil animere. 

Det er det! Animasjonen vil bare bli implementert på sidebelastningen, så du må kanskje også bruke Javascript for å bruke animasjonen på en hendelsesutløser. .option kan også tilpasses dine behov.

Ekstra CSS-alternativer

Den animasjonen vi tidligere har definert, vil sløyfe bare en gang og på en forhåndsdefinert varighet og forsinkelsestid også. Hvis du trenger flere looper eller en annen varighet eller forsinkelsestid, kan du tilpasse dette.

For å la animasjonen gå flere ganger eller til og med uendelig, kan du bruke animation-iteration-count attributt. Pass på at du også inkluderer gjeldende leverandørprefikser som webkit, moz, etc. For å gjøre det uendelig, legg deretter til infinite som verdien.

Hvis du trenger det til å gå bare flere ganger, bare skriv inn verdien med antall løkker du vil ha.

 -vendor-animasjon-iterasjon-telling: uendelig |  ; 

For å tilpasse varigheten, er det passende attributtet som skal brukes, animation-duration ; og det er animation-delay for forsinkelseskontroll. Følgende er en prøvealternativskode.

 .option {-webkit-animasjon-varighet: 3s; -webkit-animasjon-forsinkelse: 2s; -webkit-animasjon-iterasjon-telling: 5; } 

Javascript-kontroll

For mer kontroll på animasjonsstaten, trenger vi litt hjelp fra Javascript. La oss si at vi vil ha en tekstlink for å utløse en animasjon ved et klikk. For det første må vi legge til en referanse i lenken, slik som det.

Denne teksten vil animere.

For å bruke klikkfunksjonen, inkludere lenkehenvisningen i den.

Med Javascript kan du definere animasjonsnavnet. Vi bruker en tilnærming ved å skape en animate, og navngir animasjonen sammen med elementklassen (i koden ovenfor har vi lagt til demo ).

Og Javascript-koden vil som følger.

Animasjonseffekt er faktisk en av de beste måtene å gjøre nettstedet ditt mer attraktivt, men husk å ikke overdrive det.

Gratis jQuery bildegallerier og skyveknapper - Best Of

Bildegallerier og skyveknapper er blant de mest populære brukstilfeller av jQuery. De lar deg presentere riktig mengde visuell informasjon til dine besøkende, samtidig som du sparer verdifull plass på nettstedet ditt.Som et resultat, vil siden din se mindre rotete, men du kan fortsatt legge til alle bildene du trenger for å formidle meldingen. Bi

(Tekniske og design tips)

40 fantastiske fargerike historiske bilder du bør ikke gå glipp av

Når jeg ser på et gammelt svartvitt bilde, kan jeg ikke unngå å lure på hvordan det var å leve i den tiden. Jeg vil også prøve å forestille meg hva bildet ville ha sett ut om det hadde farger ; ville det gi et helt annet humør til bildet?Takket være fremdriften av fotoredigering de siste årene, kan vi nå se hvilke svart-hvite bilder som sannsynligvis ville se ut om de ble tatt i farge, ved hjelp av en teknikk som kalles fotofargalisering. Det er spes

(Tekniske og design tips)