De kunst van het vertellen is misschien al lang begonnen voordat homo sapiens kan spreken. Het evolueert met ons en past zich aan de beschikbare hulpmiddelen aan. De verhalen die vroeger werden verteld en doorgegeven van de ene generatie naar de andere, omzochten mondeling de evolutie van handgeschreven boeken, massaprinten, digitale tekstverwerking en recent het internet. Vanuit het oogpunt van de menselijke evolutie voelt het alsof we nog niet het volledige potentieel hebben aangeboord van alle beschikbare technologieën die we vandaag hebben. Hoewel video's hun campagnes voor het domineren van virtuele wereld al zijn begonnen, is de inhoud van het grootste deel van het web nog steeds in tekst.

Moderne webinhoud moet interactief zijn en verschillende media bevatten, samen met goede onbewerkte tekst. Sommige hulpmiddelen kunnen ons helpen onze verhalen een paar keer te vervelen. En als u een WordPress-gebruiker bent, kunt u Animate It gebruiken! plugin om coole CSS3-animaties toe te voegen aan je inhoud.

Wat zijn de mogelijkheden?

Samen met HTML5 is CSS3 het acroniem voor modern webdesign. Kort gezegd is CSS de webcomponent waarmee gebruikers het uiterlijk van de webpagina kunnen bepalen, zoals de lay-out, positie, lettertype, kleur, enzovoort. De nieuwste versie, CSS3, is slim genoeg om gebruikers afbeeldingen en animaties te laten maken met behulp van codes.

Gelukkig hoef je geen codeur te zijn om CSS3 op je WordPress-site te gebruiken. The Animate It! plugin kunt u CSS3-animaties toepassen op berichten, widgets en pagina's met een klik op een knop in de editor. Bovendien kunnen gebruikers de triggers besturen. Ze kunnen bijvoorbeeld animatie toepassen op scrollen, klikken en zweven en verschillende schuifoffset toevoegen aan afzonderlijke animatieblokken. De plug-in wordt ook geleverd met tal van functies, zoals:

  • 50+ Entry-, Exit- en Attention Seeker-animaties
  • Biedt vertragings- en duurbeheer in animatie om een ​​leuke animatiereeks te maken
  • Sta gebruikers toe om oneindig of een vast aantal keren een animatie toe te passen
  • Optie om aangepaste CSS-klassen toe te voegen aan afzonderlijke animatieblokken
  • Opties om animaties op smartphones en tablets in of uit te schakelen

Wat kun je doen met de Animate It! inpluggen? U kunt eenvoudige interactiviteiten toevoegen aan uw artikelen, verleidelijke verkooppagina's creëren, de emoties van uw ficties verdiepen of zelfs een krachtige bedrijfspresentatie maken als u dat wilt. Vergeet niet om niet overboord te gaan, want het bombarderen van je bezoeker met onbeperkte animaties is niet de beste manier om loyale lezers te krijgen.

Aan de slag met Animate It!

Na het installeren en activeren van de plug-in, kun je de knop vinden om animaties toe te voegen in de "WordPress 'Editor." Deze knop verschijnt alleen in de visuele modus, maar als je de commando's hebt geleerd, is het mogelijk om de codes van de normale tekstmodus (meer hierover later).

Nadat je op de knop hebt gedrukt, krijg je een optievenster te zien. Er zijn drie tabbladen om de animatie aan te passen. Het eerste tabblad is "Entry". Dit is de plaats waar u de animatie kunt toevoegen die onder bepaalde omstandigheden het scherm zal betreden. Vier vervolgkeuzemenu's helpen je bij het aanpassen van de animatie-effecten.

  • Animatie is de plek om te kiezen wat voor soort animatie je wilt.
  • Vertraging helpt u de tijd aan te passen voordat de animatie start.
  • De duur gaat over hoe lang de animatie van start tot einde wordt afgespeeld. Hoe groter het getal, hoe langzamer de animatie zal zijn.
  • Timing is het deel van de animatie dat tegelijkertijd moet worden afgespeeld. Met het "easeIn" -effect wordt de animatie aan het begin langzamer en aan het einde sneller afgespeeld.

Je kunt de effectcombinaties bekijken door het te spelen met de knop "Animate It!". Als het resultaat naar wens is, kunt u op de knop "Invoegen" drukken om het in uw inhoud te gebruiken.

Het tabblad "Afsluiten" lijkt min of meer op de invoer, maar op het toevoegen van een animatie die het scherm verlaat. Door deze twee te combineren, kunt u een object toevoegen dat op het scherm verschijnt en vervolgens verdwijnt.

Op het tabblad "Opties" regelt u de algemene instellingen van de animatie. Hier kun je instellen dat de animatie in een lus of slechts één keer wordt afgespeeld, de uiteindelijke elementstatus behouden, aangepaste CSS-code toevoegen en de trigger instellen die de animatie start. Specifiek over de trigger - de instelling "Animate On" - u kunt bijvoorbeeld kiezen voor Scroll en de animatie start alleen als het gebied al zichtbaar is op het scherm.

Uw inhoud toevoegen

Nadat u op de knop "Invoegen" hebt gedrukt, ziet u enkele regels shortcodes aan uw inhoudsgebied. Deze shortcodes zijn degenen die de animatie zullen besturen. En aangezien het alleen codes met waarden zijn, kunt u de codes handmatig toevoegen als u goed bent met codes en wilt. Andere mensen moeten echter gewoon bij Animate It blijven! knop.

U ziet ook een regel tekst met de tekst: " Voeg uw inhoud toe in dit gebied. "Hier kunt u de items toevoegen die u wilt animeren. Het kan tekst, afbeeldingen, een pictogram, logo's, audio's, video's of zelfs andere shortcodes zijn. Ik probeerde het toevoegen van een getypte effect shortcode gegenereerd met behulp van Typed Js plugin, en het resultaat is geweldig.

Als er iets is dat ik zou kunnen zeggen over het gebruik van Animate It! plugin, zou het "Experiment!" zijn Speel ermee en probeer verschillende combinaties om het gewenste resultaat te krijgen. Het is leuk. En hier is het resultaat dat ik binnen minder dan een minuut opkwam. Ik combineerde de Animate It! plugin met Typed Js plugin.

Denk je dat het tijd is om interactieve elementen toe te voegen aan je webcontent? Ben je van plan om de plug-in te proberen? Gebruik je verschillende plug-ins voor animatie? Gebruik de onderstaande opmerkingen om te delen.