Need help? Chat now!

Hostwinds Blog

Zoekresultaten voor:


Gratis WordPress-plug-ins om animaties aan uw site toe te voegen Uitgelichte afbeelding

Gratis WordPress-plug-ins om animaties aan uw site toe te voegen

door: Hostwinds Team  /  mei 5, 2017


Animaties in Web Design kunnen de ervaring van uw gebruiker aanzienlijk verbeteren.De huidige website-animaties zijn niets als de hoofdpijn-inducerende, heldere gekartelde animaties in de vroege dagen van internet.Goed ontworpen en geplaatste animaties kunnen subtiele maar duidelijke visuele aanwijzingen bieden.Ze kunnen de monotonie doorbreken of helpen om gebruikers van het ene gedeelte van uw site naar de volgende soepel te overhandigen.

Maar het kost tijd en talent om dwingende animaties te maken die zullen helpen en het algehele ontwerp en de bruikbaarheid van uw site niet belemmeren.Nou, meestal.Mogelijk kunt u niet in staat zijn om een hele plan allemaal onafhankelijk samen te stellen (tenzij u een ontwerper of codeer van wat cursus bent).U kunt echter nog steeds wat leuke geanimeerde effecten toevoegen met relatief gemak.

Als uw site op WordPress rijdt, zijn hier enkele handige kleine plug-ins die we hebben verzameld om u te helpen precies dat te doen.

Als je klaar bent met het controleren van deze, ben je misschien ook geïnteresseerd in deze andere WordPress-berichten:

.htaccess-tips voor WordPress-beveiliging

Plug-in Public Post Preview

Animeer het!

Deze plug-in is waarschijnlijk het populairst, omdat het momenteel meer dan 300.000 actieve installaties heeft.Omdat het zo robuust is en toch gemakkelijk te gebruiken is, kan het hier bovenaan zitten bovenaan deze lijst.U kunt kiezen uit meer dan 50 verschillende invoer- / exit / aandacht-op zoek naar animatielijlen, die zowel animate.js als animo.css-bibliotheken gebruiken.

Het voegt een nieuw pictogram toe aan uw WYSIWYG-editor waarmee u snel animaties kunt invoegen en aanpassen.

WP geanimeerde paginaovergangen

Er zijn veel plug-ins en veel verschillende effecten die u kunt toevoegen aan uw site.Om ze allemaal te bedekken, zou alles zijn om een boek te schrijven.Dus we zullen er een paar van kijken in verschillende categorieën.De eerste plug-ins die we zullen bekijken, laat u overgang toevoegen aan uw pagina's wanneer bezoekers landen op of een pagina achterlaten.

Pagina-animaties en overgangen

Pagina-animaties en overgangen Hiermee kunt u doen wat de naam suggereert.U kunt animaties en overgangen toevoegen naar uw site die gebeuren wanneer een pagina is geladen of bij het verlaten van een pagina.Terwijl de meeste beoordelingen positief zijn, is er een recente beoordeling die beweert dat deze plug-in niet zo goed werkt in een iOS-mobiele omgeving.

Ik heb het kort getest op een persoonlijke site met behulp van een Samsung Galaxy en kon zien wat ze bedoelen.De overgang is uitstekend en werkt goed.Maar het lijkt erop dat je vinger op een link net een beetje te lang zweeft, terwijl je probeert te scrollen, het zal je naar die link winnen.De eerste keer dat het gebeurde, zag ik wat ze bedoelden.Maar toen ik het opnieuw wilde doen, moest ik je bewuster met mijn vinger op de link pauzeren.

Dus als je veel links of links dicht bij elkaar hebt, wil je het waarschijnlijk uit testen voordat je het op je site leeft.Als u besluit het te proberen, laat dan een reactie achter om iedereen te laten weten hoe het werkt!

Effecten voor het laden van pagina's

Deze eenvoudige plug-in voegt een licht, elegant effect toe aan uw pagina's die gebruikers zien totdat de pagina volledig laadt.De auteur zegt dat het gecodeerd is om met de WP-documenten te specificeren, dus het zou mooi moeten spelen met zowat elk thema of plug-in (er zijn altijd uitzonderingen!).

Interessant feit ... De ontwikkelaar bedankt specifiek Tobias Ahlin, de Lood Experience Designer in Mojang (Minecraft Iedereen?).Maar hij zegt niet precies wat, als een rol, ahlin specifiek speelde in het maken van de plug-in.De onderstaande demo wordt gehost op zijn site.

U krijgt vier pre-gecodeerde animaties voor het voorladingeffect, maar er is ook een sectie om uw aanpassingen toe te voegen als u ervoor bent.

Bekijk de demo hier.

Afbeeldingseffecten en animaties

Ultieme Hover-effecten

Stel dat u interessante, aandacht-grijpende effecten aan beeldbijschriften wilt toevoegen. In dat geval kunnen Ultimat Hover-effecten de moeite waard zijn om naar te kijken. Er lijkt slechts één stijl te zijn met zeven verschillende effecten die momenteel beschikbaar zijn voor de gratis versie. Als u wilt betalen voor de Premium-versie ($ 11), kunt u veel meer stijlen krijgen met verschillende effecten voor elk. Hiermee kunt u ook aangepaste lettertypenkleuren / maten en CSS-stijlen gebruiken, wordt geleverd met 600+ Google-lettertypen en u kunt externe koppelingen aan uw bijschriften toevoegen.

Je kunt een demo zien van alle verschillende effecten hier.

Verbazingwekkende Hover-effecten

Deze wordt aan u gebracht door dezelfde mensen als ultieme zwevenseffecten - themebon.Het heeft echter zijn verschillen.Deze plug-in heeft meer animaties, waaronder effecten rond de grens van het beeld en verschillende gevormde stijlen.De cirkelvorm is de vorm die je in de gratis versie krijgt.En nogmaals, het is $ 11 voor de Pro-versie.

De andere functies die beperkt zijn tot de versie zijn:

  • Achtergrond kleur
  • Afbeeldingsgrootte
  • Rand verwijderen
  • Verwijder kop onderstrepen
  • Links openen op een nieuw tabblad
  • Positionering
  • Aangepaste lettertypen
  • Aangepaste kleuren en lettertypen voor koppen / beschrijvingen
  • Snel reagerend

Je kunt hiervoor de live demo bekijken hier.

Afbeelding Hover-effecten

Ja, een andere plug-in van het beeldhovereffecten.En ja, het biedt een aantal verschillende looks en stijlen dan de vorige twee.Het heeft echter een aantal vreemd soortgelijke functies en kijk en voelt het beheer van het beheerder, ook al is het niet dezelfde ontwikkelaar.Het heeft ook veel van dezelfde functies die achter een pro-versie zijn vergrendeld, maar er zijn nogal wat geanimeerde effecten die gratis worden aangeboden.

Je kunt de demo voor deze bekijken hier.

Tekst- en kopanimaties

Gemakkelijk Textillaat

Deze plug-in geeft een interessante, mooie animatie aan de tekst waaraan je deze toewijst. Het heeft een breed scala aan opties voor zowel het invoeren als afsluiten van tekst. Stuiteren, rubberen banden, rollen, scharnieren, inschuiven, vervagen en meer.

Het enige dat ik niet leuk vond bij het testen van deze Out, is er geen manier om het toegangseffect gewoon te gebruiken en vervolgens de tekst daar te laten.Het moet ook een exit-effect hebben.Natuurlijk, je hebt de mogelijkheid om de ingang te lussen en af te sluiten, maar ik heb er de voorkeur aan om de mogelijkheid om de tekst daarheen te laten nadat het op zijn plaats is.

En zeker, je zou waarschijnlijk de code zelf kunnen aanpassen, maar als je met de code wilde rotzooien, zou je waarschijnlijk niet naar deze plug-ins kijken.Rechtsaf?

CSS3 roterende woorden

Voeg wat Pizazz toe aan je krantenkoppen zonder het te overdrijven.Met CSS3-draaiende woorden, laat uw tekst automatisch draaien door een gegeven set woorden met, uiteraard CSS3.Het is Ajax gebaseerd, dus het is eenvoudig en snel.Kies een paar beschrijvende bijvoeglijke naamwoorden, kies je stijlopties en hoe snel ze moeten draaien.Sla instellingen op, grijp shortcode, zet het in je bericht en laat het door hen heen trillen in je zin.

Als je geïnteresseerd bent om te zien hoe het eruit ziet in actie, ga dan hier.

Tip: Wanneer u uw roterende woorden voegt gescheiden door een komma in de doos, neemt u een spatie op na elk woord (vóór de komma).Anders zal er geen ruimte zijn tussen het roterende woord en de rest van de vonnis die volgt.

Geanimeerde kop

Deze plug-in zal u helpen bijna hetzelfde te doen als CSS3-draaiende woorden, maar het is nog veel meer kaal uitgebogen.Zodra u de plug-in installeert, zet u de volgende korting in uw bericht:

[Animated-headline title = "Ik wil animated_text =" dit, deze tekst, hier "animatie =" clip "]

In dit voorbeeld:

  • Ik wil animeren is de tekst vóór de geanimeerde / roterende woorden
  • Dit, deze tekst, hier zijn de woorden die u in en uit wilt draaien
  • Clip is het type animatie dat u wilt

Er zijn tien soorten animaties mogelijk en u kunt de namen van hen vinden in uw admin-dashboard voor de plug-in.Het is eenvoudig en eenvoudig, maar het lijkt erop dat de geanimeerde / roterende woorden alleen aan het einde van de kop kunnen worden gebruikt.

Diversen Animaties

De volgende plug-in paste niet echt in de andere secties, dus we zullen het hier gewoon toevoegen.

Pagina Scroll naar ID

Deze plug-in maakt zwevende links in een menu-pother. Wanneer links een achtergrondhover-effect hebben, kunnen ze zenuwachtig lijken terwijl ze plotseling verschijnen en verdwijnen terwijl je je muis bewaart. Met Page Scroll-ID is het effect dat u krijgt bij het verplaatsen van het ene menu-item naar het andere is een soepele overgang. Je kunt het in actie zien hier.

Gevolgtrekking

We bedekten alleen een klein deel van de vele plug-ins die daar kunnen helpen om animatie-effecten toe te voegen aan WordPress.En alle degenen hier zijn ook gratis.Terwijl u niet wilt gaan animatie-gek op uw site, kunt u het goed doen, uw site gemakkelijker te gebruiken en mooi kunt maken.Voor meer inzicht, tips, ideeën en inspiratie uitchecken Nick Babich's artikel over animatie in modern webdesign.

Wat denk je van de subtiele animaties van vandaag?Heb je uitstekende voorbeelden van dit in de praktijk gebracht?Als je dit bericht nuttig hebt gevonden, vergeet dan niet om te delen.

Geschreven door Hostwinds Team  /  mei 5, 2017