Algolia Places

Algolia Places is een Javascript library die automatisch adressen laat zien. Wanneer je een adres intypt in een form of zoekbalk word deze automatisch aangevuld door Algolia Places. Het is verbonden met een grote open source database van plekken overal ter wereld en je kunt er zelfs een kaart van een omgeving toevoegen.

Website: https://community.algolia.com/places/

Github: https://github.com/algolia/places

Anime.js

Anime.js is een Javascript library waarmee je gave animaties en micro interacties kunt toevoegen aan je website. Het is heel lichte library maar toch één van de beste voor animaties. Je kunt verschillende timings zetten op dezelfde elementen om een perfecte animatie te krijgen.

Website: https://animejs.com/

Github: https://github.com/juliangarnier/anime/

AOS (Animate On Scroll)

AOS is een Javascript library waarmee je scroll animaties kan toevoegen aan je website. Door onder andere mooie fades, flips en zooms van je content blijven gebruikers geïnteresseerd in je website en de content die erop staat.

Website: https://michalsnik.github.io/aos/

Github: https://github.com/michalsnik/aos

AR.js

Ar.js is een Javascript library voor Augmented Reality. Hierdoor kun je makkelijk via je telefoon gebruik maken van AR-elemeten door bijvoorbeeld je camera op een bepaalde foto te mikken.

Github: https://github.com/AR-js-org/AR.js

Barba.js

Barba.js zorgt voor vloeiende animaties onder het switchen van pagina’s. Het geschreven in TypeScript.

Website: https://barba.js.org/

Github: https://github.com/barbajs/barba

Bideo.js

Met Bideo.js kun je full-screen video’s gebruiken als achtergronden voor je website. Met deze library is het makkelijk om video’s toe te voegen als een achtergrond en deze responsive te maken zodat die er op elk scherm goed uitziet.

Website: https://rishabhp.github.io/bideo.js/

Github: https://github.com/rishabhp/bideo.js

Chart.js

Met Charts.js kun je een grote variatie aan grafieken toevoegen aan je site. Deze kun je zelfs combineren voor een originele data visualisatie.

Website: https://www.chartjs.org/

Github: https://github.com/chartjs/Chart.js

Choreographer-js

Met Choreographer-js kun je makkelijk je CSS codes animeren. Het is erg makkelijk om te gebruiken maar kan complexe animaties creëren.

Website: https://christinecha.github.io/choreographer-js/

Github: https://github.com/christinecha/choreographer-js

Cleave.js

Met Cleave.js kun je invulvelden voor bijvoorbeeld telefoonnummers, datums, tijden of credit cards automatisch aanpassen van bijvoorbeeld 1234567890 naar (123) 456-7890. Het is een simpel concept maar verbetert te gebruikerservaring.

Website: https://nosir.github.io/cleave.js/

Github: https://github.com/nosir/cleave.js

Devices.css

Devices.css is een library met veel verschillende soorten moderne mobiele apparaten die gemaakt zijn waaronder ded iPhone X, en de Samsung Galaxy S8. Deze zijn van alleen css gemaakt.

Website: https://picturepan2.github.io/devices.css/#iphone-x

Github: https://github.com/picturepan2/devices.css

Draggable

Draggable is een lichte library die drag and drop elementen toevoegd. Zo kun je blokken met content verplaatsen en wisselen op je website of andere leuke interactieve elementen maken.

Website: https://shopify.github.io/draggable/

Github: https://github.com/Shopify/draggable

Granim.js

Dit is een kleine Javascript library waarmee je vloeiende bewegende gradients kunt toevoegen aan je website. Deze kun je zelfs samenvoegen met een normale afbeelding.

Website: https://sarcadass.github.io/granim.js/

Github: https://github.com/sarcadass/granim.js

Imagehover.css

Imagehover.css is een Css library die ervoor zorgt dat je makkelijk hover effects kunt toevoegen aan je afbeeldingen. Dit is een lichte library en je kunt kiezen uit meer dan 40 verschillende effecten.

Website: https://www.imagehover.io/

Github: https://github.com/ciar4n/imagehover.css

jQuery

jQuery is een hele bekende Javascript library bedoeld om het schrijven van Javascript makkelijker en efficiënter te maken. Zo worden veelvoorkomende codes in methodes gezet die je daarna met een enkele lijn code kunt oproepen.

Website: https://jquery.com/

Github: https://github.com/jquery

Loading.io

Loading.io is een library speciaal voor het animeren van icons en laadbalken. Je kunt kiezen uit vele icons en laadbalken uit de library maar ook je eigen afbeeldingen toevoegen.

Website: https://loading.io/

Github: https://github.com/loadingio

Micromodal.js

Micromodal.js is een erg lichte library waarmee je makkelijk modals kunt toevoegen aan je website. Deze modals kun je aanpassen naar je wens en voor vele doeleinden gebruiken zoals een inlogvenster of een preview van een bestand laten zien.

Website: https://micromodal.now.sh/

Github: https://github.com/Ghosh/micromodal

Multiple.js

Met Multiple.js kun je gave achtergronden maken. Multiple.js zorgt ervoor dat je dezelfde achtergrond afbeelding kunt verdelen over meerdere elementen. Zo heb je bijvoorbeeld een gave achtergrond verdeeld over meerdere blokken.

Website: https://multiple.js.org/

Github: https://github.com/NeXTs/Multiple.js

Particles.js

Particle.js is een library waarmee je interactieve achtergronden kunt maken. Zo kun je bubbels van onderuit je scherm omhoog laten drijven of met je muis een soort spinnenweb laten bewegen. Deze library bied enorm veel opties aan waaronder het toevoegen van eigen afbeeldingen.

Website: https://vincentgarreau.com/particles.js/

Github: https://github.com/VincentGarreau/particles.js/

PixiJS

PixiJS is een rendering library waarmee je interactieve graphics, cross-platform applicaties en games mee kan maken zonder dat je gebruik hoeft te maken van WebGL. PixiJS word door grote namen zoals Disney gebruikt voor hun digitale content.

Website: https://www.pixijs.com/

Github: https://github.com/pixijs/pixi.js

Popmotion Pure

Popmotion pure is een lichte animatie library met simpele maar vloeiende animaties. Deze word vaak gebruikt wanneer je simpele animaties wilt met basic figuren.

Website: https://popmotion.io/pure/

Github: https://github.com/popmotion/popmotion

Popper.js

Met Popper.js kun je kleine spraak/gedachte wolkjes aan je elementen toevoegen. Dit kan vanaf 12 verschillende hoeken rondom je element.

Website: https://popper.js.org/

Github: https://github.com/popperjs/popper-core

Premonish

Premonish is een Javascript library die voorspeld met welk element de gebruiker gaat interacteren. Dit word gedaan op basis van je muisbewegingen. Zo kun je een element al een andere kleur geven voordat de gebruiker erop geklikt heeft.

Website: https://mathisonian.github.io/premonish/

Github: https://github.com/mathisonian/premonish

Rough.js

Rough.js is een kleine graphics library waarmee je kunt tekenen in een sketchy, handgetekende stijl. Je kunt vele verschillende vormen maken en deze een originele getekende look geven.

Website: https://roughjs.com/

Github: https://github.com/pshihn/rough

Rythm.js

Rythm.js is een library waarmee je je site kunt laten dansen op de beat van de muziek. Je kunt veel elementen veranderen en de fontkleur, fontgrootte, bordergrootte, achtergrondkleuren etc. laten veranderen met de muziek. Je kunt ook je eigen microfoon gebruiken om dit te veranderen en allemaal elementen rond je scherm te laten springen.

Website: https://okazari.github.io/Rythm.js/

Github: https://github.com/Okazari/Rythm.js

Sal

Sal is een hele lichte, simpele scroll animatie library. Hiermee kan je simpele animaties aan je website toevoegen.

Website: https://mciastek.github.io/sal/

Github: https://github.com/mciastek/sal

Scrollmagic

Scrollmagic is een uitgebreidere scroll animatie library. Hiermee kan je animaties op een bepaalde plek laten afspelen met je muisscroller.

Website: https://scrollmagic.io/

Github: https://github.com/janpaepke/ScrollMagic

Slick

Slick is een library voor carousels. Een carousel is een rij aan content blokken die je bijvoorbeeld van links naar rechts kunt swipen of waar je doorheen kunt klikken. Je kunt meerdere carrousels met elkaar verbinden en het werkt goed samen met swipe bewegingen op je mobiele telefoon.

Website: https://kenwheeler.github.io/slick/

Github: https://github.com/kenwheeler/slick/

Thanos.js

Thanos.js is gemaakt als een soort grap en staat voor de Marvel personage Thanos. In de film vernietigd hij de helft van alle wezende levens in het universum. Thanos.js zorgt ervoor dat er random 50% van je files worden verwijderd om zo ruimte te besparen.

Website: https://thanosjs.org/

Github: https://github.com/anandundavia/thanos-js

Three.js

Als je wilt spelen met 3D design dan is Three.js een goede library. Hiermee kun j geweldige projecten en designs maken met 3D modellen. Een game waarmee je 3D papieren vliegtuigjes gooit is hier bijvoorbeeld mee gemaakt.

Website: https://threejs.org/

Github: https://github.com/mrdoob/three.js/

Typed.js

Typed.js is een library waarmee je tekst kan animeren waardoor het lijkt of er daadwerkelijk iets getypt word op je site en weer weggehaald. Dit kan je de hele tijd laten doorgaan in een loop voor een gaaf effect.

Website: https://mattboldt.github.io/typed.js/

Github: https://github.com/mattboldt/typed.js/

Vanta.js

Vanta.js lijkt erg op particles.js maar dan 3D. Je kunt interacteren met de achtergrond waar bijvoorbeeld een zwerm aan 3D vogels rondvliegt en andere gave interactieve 3D achtergronden maken.

Website: https://community.algolia.com/places/

Github: https://github.com/algolia/places

Mijn top 4

Dit is mijn top 4 libaries. Met sommige van deze libraries zal ik de volgende opdrachten van Advanced Development gaan maken.

• Particles.js
• Micromodal.js
• Typed.js
• Slick