Kunskapen om berättande kan ha börjat långt innan homo sapiens kan tala. Det utvecklas med oss ​​och anpassar sig till tillgängliga verktyg. Berättelserna som brukade berättas och skickas ner från en generation till en annan omfamnade ordet bokstavlig evolution från handskriven böcker, massutskrift, digital ordbehandling och nyligen internet. Ur mänsklig utvecklingssynpunkt känns det som om vi inte har utnyttjat den fulla potentialen hos all tillgänglig teknik som vi har idag. Medan videoklipp redan har startat sina virtuella världsdomineringskampanjer är majoriteten av webens innehåll fortfarande i text.

Modernt webbinnehåll bör vara interaktivt och innehålla olika media tillsammans med bra ol 'vanlig text. Vissa verktyg kan hjälpa oss att stöta på vår berättelse upp några hak. Och om du är en WordPress-användare kan du använda animera det! plugin för att lägga till coola CSS3-animeringar till ditt innehåll.

Vad är möjligheterna?

Tillsammans med HTML5 är CSS3 akronymen relaterad till modern webbdesign. I ett nötskal är CSS webbkomponenten som gör att användarna kan styra utseendet på webbsidan, t.ex. layout, position, typsnitt, färg etc. Den senaste inkarnationen, CSS3, är smart nog att låta användare skapa bilder och animeringar med hjälp av koder.

Lyckligtvis behöver du inte vara en kodare för att använda CSS3 på din WordPress-webbplats. Animera det! plugin kan du använda CSS3-animationer till Inlägg, Widgets och Sidor med ett klick i redigeraren. Dessutom kan användarna styra utlösarna. De kan till exempel tillämpa animering på bläddra, klicka och sväva och lägga till olika rullningsförskjutningar på enskilda animationsblock. Pluggen kommer också med massor av funktioner, till exempel:

  • 50+ Entry, Exit och Attention Seeker Animationer
  • Ger fördröjningsfunktion och varaktighetskontroll i animering för att skapa en trevlig animationssekvens
  • Tillåt användare att tillämpa animering oändligt eller vilket fast antal gånger som helst
  • Alternativ för att lägga till anpassade CSS-klasser till enskilda animationsblock
  • Alternativ för att aktivera eller inaktivera animeringar på Smartphones och Tabletter

Vad kan du göra med animera det! plugin? Du kan lägga till enkla interaktioner till dina artiklar, skapa lockande försäljningssidor, fördjupa känslorna av dina fiktioner eller till och med skapa en kraftfull företagspresentation om du vill. Kom bara ihåg att du inte går överbord för att bombardera din besökare med obegränsad animering är inte det bästa sättet att få lojala läsare.

Komma igång med att animera det!

Efter installationen och aktiveringen av plugin kan du hitta knappen för att lägga till animering i "WordPress" Editor. "Den här knappen visas bara i visuellt läge, men om du har lärt sig kommandona är det möjligt att infoga koderna från vanlig textläge (mer om detta senare).

Efter att du har tryckt på knappen får du ett alternativfönster. Det finns tre flikar där du kan anpassa animeringen. Den första fliken är "Inträde". Det här är platsen för att lägga till animationen som kommer in på skärmen under vissa förutsättningar. Fyra nedrullningsalternativ hjälper dig att justera animeringseffekterna.

  • Animering är platsen för att välja vilken typ av animation du vill ha.
  • Fördröjning hjälper dig att justera tiden innan animationen startar.
  • Varaktigheten handlar om hur länge animationen spelas från början till slut. Ju större antal, ju långsammare animationen kommer att vara.
  • Timing är andelen av animationen att spela i taget. Till exempel kommer "easeIn" -effekten att spela animationen långsammare i början och snabbare mot slutet.

Du kan kolla in effektkombinationerna genom att spela den med knappen "Animate It!". Om resultatet är som du vill kan du trycka på "Infoga" -knappen för att använda den i ditt innehåll.

Fliken "Exit" liknar mer eller mindre inmatningen, men lägger till en animering som lämnar skärmen. Genom att kombinera de två kan du lägga till ett objekt som kommer att visas på skärmen och sedan försvinna.

Fliken "Alternativ" är där du kontrollerar animationens allmänna inställningar. Här kan du ställa in animationen för att spela på en slinga eller en gång, behåll elementets slutliga tillstånd, lägg till anpassad CSS-kod och sätt in den avtryckare som startar animeringen. Speciellt om avtryckaren - inställningen "Animate On" - du kan t.ex. välja Scroll, och animeringen startar bara om området redan är synligt på skärmen.

Lägga till ditt innehåll

Efter att du tryckt på "Infoga" -knappen ser du några rader med kortkoder som läggs till i ditt innehållsområde. Dessa kortnummer är de som kommer att styra animationen. Och eftersom de bara är koder med värden, kan du lägga till koderna manuellt om du är bra med koder och vill. Men andra borde bara hålla fast vid Animate It! knapp.

Du kommer också att se en rad text som säger " Lägg till ditt innehåll i det här området. "Här kan du lägga till de objekt som du vill animera. Det kan vara text, bilder, ikon, logotyper, ljud, videor eller till och med andra kortkoder. Jag försökte lägga till en typkods genererad typkod genom att använda Typed Js plugin, och resultatet är bra.

Om det finns en sak som jag kan säga om att använda animera det! plugin, det skulle vara "Experiment!" Spela med det och prova olika kombinationer för att få det resultat du vill ha. Det är kul. Och här är resultatet att jag kom upp inom mindre än en minut. Jag kombinerade Animate It! plugin med typad Js-plugin.

Tycker du att det är dags att lägga till interaktiva element i ditt webbinnehåll? Planerar du att prova plugin? Använder du olika plugins för animering? Vänligen dela med hjälp av kommentarerna nedan.