2016 31 lightweight and efficient open source JavaScript plugins and libraries

There are many web designers and developers who prefer to use JavaScript-developed plugins and libraries, but at the same time face a vexed question: most of them are too cumbersome and often degrade the performance of the site. In fact, there are a lot of lightweight plug-ins and libraries, they are not only lightweight and useful, and will not affect the performance of the site. This article has compiled a list of more than 30 lightweight JavaScript plugins and libraries since 2016 that serve specific goals, and they are able to achieve their goals very effectively and efficiently.

Whether you want to create a picture library, a sliding effect, a personalized menu, or other interface elements, you can easily implement them with these plugins and libraries. You can also use these plugins to add great features to your site, such as GIF and picture previews, attractive site icons, and others.

These plugins and libraries are very simple to code and can be easily implemented. You'll definitely find them useful for your Web project later on.

0, Baguettebox.js

Baguettebox.js is an easy-to-use responsive image Lightbox effect script that supports swipe gestures on mobile devices and is written entirely in JavaScript. (approximately 2.7KB after compression)

demo:https://feimosi.github.io/baguettebox.js/

1, Scrollreveal

The Scrollreveal plugin makes it extremely easy for users to create Web scrolling animations for desktop and mobile browsers (approximately 3.3KB after compression)

Please open the demo page yourself to feel the animation effect. ：）

demo:https://scrollrevealjs.org/

2, Marginotes

Marginotes, using jquery to add a side note plugin, fast, cool.

demo:http://francisco.dance/

3. Loud Links

Loudlinks is a lightweight JavaScript library for adding interactive sounds to your site. It does this by creating HTML5 audio elements and using it to play MP3 or Ogg audio files. (approx. 1.5KB)

Or would you please open the following link to feel the effect. ：）

demo:http://loudlinks.rocks/#examples

4, Bricks.js

Bricks.js is an ultra-fast "masonry" layout builder for fixed-width elements

You can enter the number of bricks you want on the demo page to see the resulting effect (random changes each time)

demo:http://callmecavs.com/bricks.js/

5, Mediumeditor

Mediumeditor, using the vanilla JavaScript framework. Mediumeditor is a lightweight (28KB) medium.com-WYSIWYG Online Editor toolbar. There is also an available mediumeditor extension and theme.

demo:https://yabwe.github.io/medium-editor/

6, Philter

Philter allows you to control CSS filters by using HTML attributes, and after using it, when you move the cursor over the image, the CSS filter is loaded on the image. This is available either as a jquery plugin or as a vanilla JavaScript framework.

demo:http://specro.github.io/philter/

7, Superembed.js

Superembed.js is a JavaScript library that detects embedded video on a Web page and enables them to become responsive elements (approximately 1.6KB after compression)

demo:https://jsfiddle.net/h6x04lul/

8, substance

Substance is a web-based content editing JavaScript library. It provides you with all the tools you need to create custom editors and Web-based publishing systems.

demo:http://substance.io/

9 List.js

List.js is a lightweight and fast vanilla JavaScript framework script that adds elements such as search, sorting, filters, and flexibility to lists, tables, or any other HTMLL tag.

demo:http://www.listjs.com/

10, Jqgifpreview

Jqgifpreview is a simple jquery plugin for creating GIF previews as you can see on Facebook.

Demo:http://demo.sodhanalibrary.com/angular/gif_preview/jqgifpreview/demo.html

11, Datedropper.js

Datedropper.js is a jquery plugin that provides you with an easy way to enter dates in the input area.

demo:http://felicegattuso.com/projects/datedropper/

12, Jfmagnify

Jfmagnify is a jquery plugin used to create Magnifier effects in any HTML element, not just images.

Demo:https://github.com/fonstok/jfmagnify/tree/master/demo

13. JQuery Formbuilder

jquery Formbuilder is a new jquery plugin that allows you to quickly generate tables with drag-and-drop

demo:https://formbuilder.online/

14, Popper.js

Popper.js is a lightweight library for managing ToolTips and pop-up effects. You can quickly and easily place a ToolTip control with a single line of code. (approx. 4KB after compression)

demo:https://popper.js.org/

15. Image Blur Plugin

Image Blur Plugin is a lightweight, cross-browser jquery plugin for creating image blur effects

demo:https://msurguy.github.io/background-blur/

16, Inlinetweet.js

Inlinetweet.js, you can easily create a tweet link with any text on the page. All you need to do is wrap the tweet into a container with data-inline-tweet.

You can click the demo to experience the effect of the plugin.

demo:http://ireade.github.io/inlinetweetjs/

17, Imissyou.js

Imissyou.js is a lightweight and compact jquery plugin for changing the title and icon of a page when a user leaves your page

18, SweetAlert2

SweetAlert2 is a high-value and customizable warning pop-up plugin that can be used in place of JavaScript pop-up windows

demo:https://limonte.github.io/sweetalert2/

19, Turntable.js

Turntable.js is a responsive jquery slider plugin that flips when your mouse (or finger) sweeps through a container that holds a batch of pictures.

demo:http://polarnotion.github.io/turntable/

20, Push.js

Push.js is a cross-browser JavaScript desktop notification plugin

demo:http://nickersoft.github.io/push.js/

21, Bideo.js

Bideo.js is a JavaScript library that can easily add full-screen background video to a Web page

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

22, Microlight.js

Microlight.js is a lightweight code Gao Lianku for any programming language, which greatly improves code readability (about 2.2KB)

demo:https://asvd.github.io/microlight/

23, Algolia Places

Algolia places is a JavaScript library that allows you to easily implement the search bar AutoComplete feature on your Web page.

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

24, Flatpickr

Flatpickr based on the vanilla JavaScript Framework, is a lightweight date marker and calendar plugin

demo:https://chmln.github.io/flatpickr/

25, Slidebars

Slidebars is a jquery framework for adding Off-canvas menus and sidebar to your Web page or Web App

demo:https://www.adchsm.com/slidebars/

26, Anime.js

Anime.js is a flexible and lightweight JavaScript animation library. It is implemented through CSS, independent transformations, svg,dom attributes and JS objects. This GIF does not show its real effect, you can visit the homepage to see, the animation is quite cool.

demo:http://codepen.io/collection/xlebem/

27, Cleave.js

Cleave.js will format you as you type.What's inside the label

demo:http://nosir.github.io/cleave.js/

28, SKIPPR

SKIPPR is a super simple jquery lightweight Slideshow Plugin

demo:http://austenpayan.github.io/skippr/

29, Izimodal.js

Izimodal.js is an elegant, responsive, flexible and lightweight jquery plugin.

demo:http://izimodal.marcelodolce.com/

30, Lightgallery.js

Lightgallery.js is a full-featured JavaScript image Lightbox plugin that has no dependencies.

demo:https://sachinchoolur.github.io/lightgallery.js/

&& Https://codepen.io/sachinchoolur/pen/qNyvGW

2016 31 lightweight and efficient open source JavaScript plugins and libraries