Historien om fortelling kan ha begynt lenge før homo sapiens kan snakke. Den utvikler seg med oss ​​og tilpasser seg de tilgjengelige verktøyene. Historiene som pleide å bli fortalt og gått ned fra en generasjon til en annen, omfavnet muntlig bokstavelig evolusjon fra håndskrevne bøker, til massetrykk, til digital tekstbehandling, og nylig på Internett. Fra det menneskelige utviklingssynspunktet føles det som om vi ikke har tappet på det fulle potensialet av alle tilgjengelige teknologier som vi har i dag. Mens videoer allerede har startet sine virtuelle verdensdomineringskampanjer, er flertallet av nettets innhold fortsatt i tekst.

Moderne webinnhold skal være interaktivt og inkorporere ulike medier sammen med god ol 'ren tekst. Noen verktøy kan hjelpe oss med å støte vår historiefortelling opp noen få hakk. Og hvis du er en WordPress-bruker, kan du bruke Animate It! plugin for å legge til kule CSS3 animasjoner til innholdet ditt.

Hva er mulighetene?

Sammen med HTML5 er CSS3 akronymet knyttet til moderne webdesign. I et nøtteskall er CSS nettkomponenten som gjør at brukerne kan kontrollere utseendet til nettsiden, for eksempel layout, posisjon, skrift, farge osv. Den nyeste inkarnasjonen, CSS3, er smart nok til å la brukerne lage bilder og animasjoner ved hjelp av koder.

Heldigvis trenger du ikke å være en koder for å bruke CSS3 på WordPress-siden din. Den animere det! plugin lar deg bruke CSS3 animasjoner til Innlegg, Widgets og Pages med et klikk på en knapp i redigeringsprogrammet. Dessuten kan brukerne kontrollere utløserne. For eksempel kan de bruke animasjon på bla, klikk og svinger, og legg til forskjellig bla-forskyvning på individuelle animasjonsblokker. Pluggen kommer også med mange funksjoner, for eksempel:

  • 50+ Entry, Exit og Attention Seeker Animasjoner
  • Gir forsinkelsesfunksjon og varighetskontroll i animasjon for å lage en fin animasjonssekvens
  • Tillat brukere å bruke animasjon uendelig eller hvilket som helst fast antall ganger
  • Mulighet for å legge til egendefinerte CSS-klasser til individuell animasjonsblokk
  • Alternativer for å aktivere eller deaktivere animasjoner på smarttelefoner og tabletter

Hva kan du gjøre med Animate It! plugg inn? Du kan legge til enkle interaktiviteter i artiklene dine, lage fristende salgssider, utdype følelsene dine fiktivene, eller til og med lage en kraftig forretningspresentasjon hvis du vil. Bare husk å ikke gå over bord som å bombardere din besøkende med ubegrenset animasjon, er ikke den beste måten å få lojale lesere på.

Komme i gang med å animere det!

Etter at du har installert og aktivert pluginet, kan du finne knappen for å legge til animasjon i "WordPress Editor". Denne knappen vises bare i visuell modus, men hvis du har lært kommandoene, er det mulig å sette inn kodene fra vanlig tekstmodus (mer om dette senere).

Etter at du har trykket på knappen, får du et valgfelt. Det er tre faner der du kan tilpasse animasjonen. Den første kategorien er "Entry." Dette er stedet å legge til animasjonen som kommer inn på skjermen under visse forhold. Fire nedtrekksalternativer hjelper deg med å justere animasjonseffekter.

  • Animasjon er stedet å velge hva slags animasjon du vil ha.
  • Forsinkelse vil hjelpe deg med å justere tiden før animasjonen starter.
  • Varigheten handler om hvor lenge animasjonen skal spilles fra start til slutt. Jo større tallet, jo tregere animasjonen vil være.
  • Timing er andelen av animasjonen som skal spilles av gangen. For eksempel vil "easeIn" -virkningen spille animasjonen langsommere i begynnelsen og raskere mot slutten.

Du kan sjekke effektkombinasjonene ved å spille den med "Animate It!" -knappen. Hvis resultatet er til din smak, kan du trykke på "Sett inn" -knappen for å bruke den i innholdet.

"Avslutt" -fanen er mer eller mindre lik oppføringen, men for å legge til en animasjon som vil forlate skjermen. Ved å kombinere de to, kan du legge til et objekt som vil vises på skjermen og deretter forsvinne.

Fanen "Alternativer" er hvor du kontrollerer de generelle innstillingene for animasjonen. Her kan du angi animasjonen for å spille på en sløyfe eller en gang, hold elementets endelige tilstand, legg til tilpasset CSS-kode, og sett avtrekkeren som vil starte animasjonen. Spesielt om avtrekkeren - "Animate On" -innstillingen - du kan for eksempel velge Scroll, og animasjonen starter bare hvis området allerede er synlig på skjermen.

Legge til innholdet ditt

Etter at du har trykket på "Sett inn" -knappen, ser du få linjer med kortkoder lagt til innholdsområdet ditt. Disse kortkodene er de som vil kontrollere animasjonen. Og siden de bare er koder med verdier, kan du legge til koder manuelt hvis du er bra med koder og vil. Imidlertid bør andre bare holde fast ved Animate It! knapp.

Du vil også se en tekstlinje som sier " Legg til innholdet ditt i dette området. "Her er hvor du kan legge til elementene du vil animere. Det kan være tekst, bilder, ikon, logoer, lyd, videoer, eller til og med andre kortkoder. Jeg prøvde å legge til en tastetrykk-kortkode generert ved hjelp av Typed Js-plugin, og resultatet er flott.

Hvis det er en ting jeg kan si om å bruke Animate It! plugin, det ville være "Experiment!" Spill med det og prøv forskjellige kombinasjoner for å få det resultatet du vil ha. Det er gøy. Og her er resultatet at jeg kom opp innen mindre enn ett minutt. Jeg kombinerte Animate It! plugin med Typed Js plugin.

Tror du det er på tide å legge til interaktive elementer i webinnholdet ditt? Planlegger du å prøve plugin? Bruker du forskjellige plugins for animasjon? Vennligst del med bruk av kommentarene nedenfor.