{"id":1099,"date":"2018-04-15T13:50:48","date_gmt":"2018-04-15T13:50:48","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=1099"},"modified":"2019-03-04T06:54:04","modified_gmt":"2019-03-04T06:54:04","slug":"20-free-and-useful-javascript-plugins","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/javascript\/20-free-and-useful-javascript-plugins\/","title":{"rendered":"20+ Free and Useful JavaScript Plugins"},"content":{"rendered":"\n

Moon.js:<\/span><\/h4>\n\n\n\n
\"Free<\/figure>\n\n\n\n

This small library, whose minified version weighs just 7 KB, was created specifically to prototype interfaces. Much like Vue or React it has a component system that lets you build user interfaces in a short span of time.
<\/p>\n\n\n\n

Plugin Page<\/strong> – https:\/\/kbrsh.github.io\/moon\/<\/a><\/p><\/blockquote>\n\n\n\n

Tippy.js:<\/span><\/h4>\n\n\n\n
\"JavaScript<\/figure>\n\n\n\n

Tippy.js, is aimed to improve the informative side of the project by providing readers with unobtrusive clues. It creates and adds tool-tips. Customization options are pretty extensive \u2013 you can specify placement, arrows, triggers, animations and even themes.
<\/p>\n\n\n\n

Plugin Page<\/strong> – https:\/\/atomiks.github.io\/tippyjs\/<\/a><\/p><\/blockquote>\n\n\n\n

Modaal:<\/h4>\n\n\n\n
\"Modaal\"\/<\/figure>\n\n\n\n

If you need more than just a tiny hint, you can employ pop-up windows where you can place special offers or extra data. In this case, Modaal should be your choice. It is a well-thought-out combination of quality, flexibility and accessibility. It is applicable for any type of content, including images, videos and galleries.
<\/p>\n\n\n\n

Plugin Page<\/strong> – http:\/\/humaan.com\/modaal\/<\/a><\/p><\/blockquote>\n\n\n\n

Datedropper:<\/h4>\n\n\n\n
\"Datedropper\"\/<\/figure>\n\n\n\n

If you are seeking for a beautiful and multi-functional date picker for your project then you should consider Date-dropper.
<\/p>\n\n\n\n

Plugin Page<\/strong> – http:\/\/felicegattuso.com\/projects\/datedropper\/<\/a><\/p><\/blockquote>\n\n\n\n

Almost any aspect of the interface can be done with the help of plugins. Whether it is a banal slide-out navigation which can be easily recreated with the help of Canvi or a set of charts that can be built via a fantastic <\/strong>Billboard.js<\/strong><\/a> or <\/strong>Markvis<\/strong><\/a> that covers all the necessary instruments for effective data visualization, ready-made solutions do all the heavy lifting. Their sphere of use is very extensive.  Though, you don\u2019t need me to tell you that. Let\u2019s move continue through our collection.<\/strong>
<\/p>\n\n\n\n

Canvi:<\/h4>\n\n\n\n
\"Canvi\"\/<\/figure>\n\n\n\n

Plugin Page<\/strong> – https:\/\/pineco.de\/project\/canvi-off-canvas-navigation\/<\/a><\/p><\/blockquote>\n\n\n\n

Billboard.js:<\/h4>\n\n\n\n
\"Billboard.js\"\/<\/figure>\n\n\n\n

Re-usable, easy interface JavaScript chart library, based on D3 v4+.
<\/p>\n\n\n\n

Plugin Page<\/strong> – https:\/\/naver.github.io\/billboard.js\/<\/a><\/p><\/blockquote>\n\n\n\n

Markvis:<\/h4>\n\n\n\n
\"Markvis\"\/<\/figure>\n\n\n\n

Make visualization in markdown.
<\/p>\n\n\n\n

Plugin Page<\/strong> – https:\/\/github.com\/geekplux\/markvis<\/a><\/p><\/blockquote>\n\n\n\n

Our next stops are<\/strong> Fitty<\/strong><\/a> and <\/strong>MediumLightbox<\/strong><\/a>.<\/strong><\/p>\n\n\n\n

Fitty:<\/h4>\n\n\n\n
\"Fitty\"\/<\/figure>\n\n\n\n

Plugin Page<\/strong> – https:\/\/rikschennink.github.io\/fitty\/<\/a><\/p><\/blockquote>\n\n\n\n

MediumLightbox:<\/h4>\n\n\n\n
\"MediumLightbox\"\/<\/figure>\n\n\n\n

Plugin Page<\/strong> – https:\/\/github.com\/davidecalignano\/MediumLightbox<\/a><\/p><\/blockquote>\n\n\n\n

Consider one of the most common features of modern interfaces \u2013 sticky panels. Almost every other website use sticky positioning to provide visitors with an extra way of navigating: it can be a \u201cGo to top\u201d button or main menu. If you need something like that on your project then you can go for <\/strong>StickyBits<\/strong><\/a> or <\/strong>Sticky Sidebar<\/strong><\/a>. <\/strong><\/p>\n\n\n\n

StickyBits:<\/h4>\n\n\n\n
\"StickyBits\"\/<\/figure>\n\n\n\n

Plugin Page<\/strong> – https:\/\/dollarshaveclub.github.io\/stickybits\/<\/a><\/p><\/blockquote>\n\n\n\n

Sticky Sidebar:<\/h4>\n\n\n\n
\"Sticky<\/figure>\n\n\n\n

Plugin Page<\/strong> – https:\/\/abouolia.github.io\/sticky-sidebar\/<\/a><\/p><\/blockquote>\n\n\n\n

Lets add some fun<\/h3>\n\n\n\n

Seeing through the pragmatic part of the interface is not enough, contemporary web applications require some kind of an entertaining factor. The design needs something that will enrich the user experience and make the exploration of the project enjoyable. The first and the most popular choice is certainly micro-interactions that improve the user experience from different angles. Here we recommend to take into account Micron<\/a> and  AnimatePlus<\/a>.<\/p>\n\n\n\n

Micron:<\/h4>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

Micron is exactly for such things. This JavaScript library includes a collection of micro-interactions that can be easily added to the DOM elements using special attributes.<\/p>\n\n\n\n

Plugin Page<\/strong> – https:\/\/webkul.github.io\/micron\/<\/a><\/p><\/blockquote>\n\n\n\n

AnimatePlus:<\/h4>\n\n\n\n
\"AnimatePlus\"\/<\/figure>\n\n\n\n

AnimatePlus is a lightweight library for setting HTML or SVG elements into motion. You can control easing, duration, delay, direction, loop, speed and more factors.<\/p>\n\n\n\n

Plugin Page<\/strong> – https:\/\/github.com\/bendc\/animateplus<\/a><\/p><\/blockquote>\n\n\n\n

If you just want to enrich UI with a mere aesthetically pleasing feature, then you should try <\/strong>Moving Letters<\/strong><\/a>, <\/strong>PixelWave<\/strong><\/a>, <\/strong>Blotter.js<\/strong><\/a> and <\/strong>Bubbly Bg<\/strong><\/a>. These four solutions will give the interface a splendid finishing touch. Let\u2019s consider each.<\/strong><\/p>\n\n\n\n

Moving Letters:<\/h4>\n\n\n\n
\"Moving<\/figure>\n\n\n\n

It may sound like a tautology, but Moving Letters is for moving letters. It is a small collection created by the talented Tobias Ahlin who developed different ways of bringing typography to life. Each effect is accompanied by a code snippet that you can easily adapt to your project.<\/p>\n\n\n\n

Plugin Page<\/strong> – http:\/\/tobiasahlin.com\/moving-letters\/<\/a><\/p><\/blockquote>\n\n\n\n

Blogger.js:<\/h4>\n\n\n\n
\"Blotter.js\"\/<\/figure>\n\n\n\n

Blotter.js is also for creating text effects with zest.<\/p>\n\n\n\n

Plugin Page<\/strong> – https:\/\/blotter.js.org\/<\/a><\/p>\n\n\n\n

PixelWave:<\/h4>\n\n\n\n
\"PixelWave\"\/<\/figure>\n\n\n\n

Pixelwave is for spicing up transitions between pages or slides with a subtle geometric effect.<\/p>\n\n\n\n

Plugin Page<\/strong> – https:\/\/github.com\/vin-ni\/PixelWave<\/a><\/p><\/blockquote>\n\n\n\n

Bubbly Bg:<\/h4>\n\n\n\n
\"Bubbly<\/figure>\n\n\n\n

And Bubbly.bg is for creating a canvas with a sweet bubbly animation that takes up the whole viewport.<\/p>\n\n\n\n

Plugin Page<\/strong> – https:\/\/github.com\/tipsy\/bubbly-bg<\/a><\/p><\/blockquote>\n\n\n\n

CSS Doodle:<\/h4>\n\n\n\n
\"CSS<\/figure>\n\n\n\n

CSS Doodle is a web component that lets you pro-grammatically draw patterns using pure CSS.<\/p>\n\n\n\n

Plugin Page<\/strong> – http:\/\/yuanchuan.name\/css-doodle\/<\/a><\/p><\/blockquote>\n\n\n\n

Draggable:<\/h4>\n\n\n\n
\"Draggable\"\/<\/figure>\n\n\n\n

Draggable is a lightweight library for adding drag-and-drop functionality to your project. It promises to be accessible, sortable, swappable and extensible.<\/p>\n\n\n\n

Plugin Page<\/strong> – https:\/\/shopify.github.io\/draggable\/<\/a><\/p><\/blockquote>\n\n\n\n

Pts.js:<\/h4>\n\n\n\n
\"Pts.js\"\/<\/figure>\n\n\n\n

In Pts.js point is a basic building block that you connect with the others in order to create a set of dots. Use it to build unique particles-based masterpieces.<\/p>\n\n\n\n

Plugin Page<\/strong> – https:\/\/ptsjs.org\/<\/a><\/p><\/blockquote>\n\n\n\n

Emergence.js:<\/h4>\n\n\n\n
\"Emergence.js\"\/<\/figure>\n\n\n\n

Unlike previous plugins that are ready-made solutions which partially dictate their rules, Emergence.js<\/strong> is a flexible tool that just provides a solid foundation for experiments. It is ideal for crafting storytelling or scroll-based experiences. Its goal is to detect visibility of certain elements in the browser giving you a freedom of further manipulations.<\/p>\n\n\n\n

Plugin Page <\/strong>– https:\/\/xtianmiller.github.io\/emergence.js\/<\/a><\/p><\/blockquote>\n\n\n\n

Obviously, SEO is important for your website, so if you are looking for a reliable company to help you increase web traffic, make use of resources at White Label Reviews<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Moon.js: This small library, whose minified version weighs just 7 KB, was created specifically to prototype interfaces. Much like Vue or React it has a component system that lets you build user interfaces in a short span of time. Plugin Page – https:\/\/kbrsh.github.io\/moon\/ Tippy.js: Tippy.js, is aimed to improve the informative side of the project by providing […]<\/p>\n","protected":false},"author":2,"featured_media":1100,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[12],"tags":[87,90],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2018\/11\/5-Canvi.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-hJ","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1099"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=1099"}],"version-history":[{"count":4,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1099\/revisions"}],"predecessor-version":[{"id":1687,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1099\/revisions\/1687"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/1100"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=1099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=1099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=1099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}