Historien om fortælling kan være begyndt længe før homo sapiens kan tale. Det udvikler sig med os og tilpasser sig de tilgængelige værktøjer. De historier, der plejede at blive fortalt og gået ned fra en generation til en anden, omfavnede ordet bogstavelig evolution fra håndskrevne bøger, til massetrykning, til digital tekstbehandling og for nylig på internettet. Fra det menneskelige evolutions synspunkt føles det som om vi ikke har tappet på det fulde potentiale af alle tilgængelige teknologier, som vi har i dag. Mens videoer allerede har startet deres virtuelle verdensdomineringskampagner, er flertallet af webens indhold stadig i tekst.

Moderne webindhold bør være interaktivt og inkorporerer forskellige medier sammen med god ol 'almindelig tekst. Nogle værktøjer kan hjælpe os med at bumpe vores historiefortælling op ad et par indlæg. Og hvis du er en WordPress-bruger, kan du bruge animere det! plugin for at tilføje kølige CSS3 animationer til dit indhold.

Hvad er mulighederne?

Sammen med HTML5 er CSS3 akronymet relateret til moderne webdesign. I en nøddeskal er CSS den webkomponent, der gør det muligt for brugerne at styre udseendet af websiden som layout, position, skrifttype, farve osv. Dens seneste inkarnation, CSS3, er smart nok til at lade brugerne oprette billeder og animationer ved hjælp af koder.

Heldigvis behøver du ikke være en coder til at udnytte CSS3 på dit WordPress-websted. Den animere det! plugin giver dig mulighed for at anvende CSS3 animationer til indlæg, widgets og sider med et klik på en knap i editoren. Desuden kan brugerne styre udløserne. For eksempel kan de anvende animation på rulle, klikke og svinge og tilføje forskellige rulleforskydninger på individuelle animationsblokke. Pluggen kommer også med mange funktioner, såsom:

  • 50+ Entry, Exit og Attention Seeker Animationer
  • Giver forsinkelsesfunktion og varighedskontrol i animation for at skabe en god animationssekvens
  • Tillad brugere at anvende animation uendeligt eller et hvilket som helst fast antal gange
  • Mulighed for at tilføje brugerdefinerede CSS-klasser til individuelle animationsblokke
  • Valg for at aktivere eller deaktivere animationer på Smartphones og Tabletter

Hvad kan du gøre med Animate It! plugin? Du kan tilføje enkle interaktioner til dine artikler, skabe lokkende salgssider, uddybe følelserne af dine fiktioner eller endda lave en stærk forretningspræsentation, hvis du vil. Bare husk at ikke gå over bord som at bombardere din besøgende med ubegrænset animation er ikke den bedste måde at få loyale læsere på.

Kom i gang med at animere det!

Efter installation og aktivering af plugin'et kan du finde knappen for at tilføje animation i "WordPress" Editor. "Denne knap vises kun i visuel tilstand, men hvis du har lært kommandoerne, er det muligt at indsætte koderne fra almindelig tekst-tilstand (mere om dette senere).

Når du har trykket på knappen, får du et valgfelt. Der er tre faner der giver dig mulighed for at tilpasse animationen. Den første fane er "Entry." Dette er stedet for at tilføje animationen, der kommer ind på skærmen under visse forhold. Fire drop-down muligheder hjælper dig med at justere animationseffekterne.

  • Animation er stedet at vælge, hvilken slags animation du vil have.
  • Forsinkelse hjælper dig med at justere tiden, før animationen starter.
  • Varigheden handler om, hvor længe animationen vil blive spillet fra start til slut. Jo større nummer, jo langsommere animationen vil være.
  • Timing er andelen af ​​animationen, der afspilles ad gangen. For eksempel vil "easeIn" -virkningen afspille animationen langsommere i begyndelsen og hurtigere mod slutningen.

Du kan tjekke effektkombinationerne ved at spille den ved hjælp af knappen "Animate It!". Hvis resultatet lykkes, kan du trykke på knappen "Indsæt" for at bruge det i dit indhold.

Fanebladet "Afslut" svarer mere eller mindre til indgangen, men for at tilføje en animation, der forlader skærmen. Ved at kombinere de to kan du tilføje et objekt, der vises på skærmen og derefter forsvinde.

Fanen "Indstillinger" er hvor du kontrollerer animationens generelle indstillinger. Her kan du indstille animationen til at spille på en sløjfe eller kun én gang, hold elementets endelige tilstand, tilføj brugerdefineret CSS-kode, og indstil den trigger, der starter animationen. Specielt om udløseren - indstillingen "Animate On" - du kan f.eks. Vælge Scroll, og animationen starter kun, hvis området allerede er synligt på skærmen.

Tilføjelse af dit indhold

Når du har trykket på "Indsæt" -knappen, vil du se nogle få linjer med kortkoder, der er tilføjet til dit indholdsområde. Disse kortkoder er dem der styrer animationen. Og da de kun er koder med værdier, kan du tilføje koderne manuelt, hvis du er god med koder og vil. Men andre mennesker bør bare holde sig til animere det! knap.

Du vil også se en tekstlinje, der siger " Tilføj venligst dit indhold i dette område. "Her kan du tilføje de elementer, du vil animere. Det kan være tekst, billeder, ikon, logoer, lyd, videoer eller endda andre kortkoder. Jeg forsøgte at tilføje en typekort genereret ved hjælp af Typed Js plugin, og resultatet er fantastisk.

Hvis der er en ting, jeg kunne sige om at bruge animere det! plugin, ville det være "Experiment!" Spil med det og prøv forskellige kombinationer for at få det ønskede resultat. Det er sjovt. Og her er resultatet, at jeg kom inden for mindre end et minut. Jeg kombinerede Animate It! plugin med Typed Js plugin.

Tror du, at det er på tide at tilføje interaktive elementer til dit webindhold? Har du planer om at prøve plugin? Bruger du forskellige plugins til animation? Venligst del med nedenstående kommentarer.