31 Lightweight and Efficient Open Source JavaScript Plugins and Libraries

31 Lightweight and Efficient Open Source JavaScript Plugins and

Libraries There are many website designers and developers who like to use plugins and libraries developed in JavaScript , but at the same time face a painful problem: most of them are too cumbersome and often reduce website performance. In fact, there are also many lightweight plugins and libraries, which are not only lightweight and useful, but also do not affect the performance of the website. In this article, I have compiled a list of more than 30 lightweight Javascript plugins and libraries that serve specific goals and are very effective and efficient to achieve them.

Whether you want to create a photo gallery, a sliding effect, a personalized menu or other interface elements, you can easily do it with these plugins and libraries. At the same time, you can also use these plugins to add great features to your website, such as GIF and image previews, attractive favicons, and more.

These plugins and libraries are very simple to code and can be easily implemented. You will surely find them useful for your web projects later on.

0  baguetteBox.js
baguetteBox.js is a simple and easy to use responsive image lightbox effect script, and supports swipe gestures on mobile devices, completely written in Javascript. (approximately 2.7KB compressed)



DEMO: https://feimosi.github.io/baguetteBox.js/

1  ScrollReveal The
ScrollReveal plugin enables users to create web page scrolling animations for desktop and mobile browsers with incredible ease (approximately 3.3KB compressed)



Please open the DEMO page by yourself to experience the animation effect. : )

DEMO: https://scrollrevealjs.org/

2  Marginotes
Marginotes, a plugin for adding sidenotes implemented using jQuery, is fast and 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 an HTML5 audio element and using it to play MP3 or OGG audio files. (About 1.5KB)

Or please open the link below to experience the effect. : )

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

4  Bricks.js
Bricks.js is a super fast "bricks" layout generator for fixed width elements



You can enter the required bricks on the DEMO page The number of blocks, check the generated effect (it will change randomly each time)

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

5  MediumEditor
MediumEditor uses the Vanilla Javascript framework. MediumEditor is a lightweight (28KB) WYSIWYG online editor toolbar like Medium.com. There is also a MediumEditor extension and theme available.



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

6  Philter
Philter allows you to control CSS filters by using HTML attributes. After using it, when you move the cursor over an image, the CSS filter will be loaded on the image. 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 videos on web pages and enables them to become responsive elements (~1.6KB compressed )

DEMO: https://jsfiddle.net/h6x04LuL/

8  Substance
Substance is a web-based content editing JavaScript library. It gives you 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 search, sorting, filters and flexibility to lists, tables or any other HTMLL tags Elements like sex



DEMO: http://www.listjs.com/

10  jqGifPreview
jqGifPreview is a simple jQuery plugin for creating GIF previews like you see on Facebook.

  

DEMO: http://demo.sodhanalibrary.com/angular/gif_preview/jqGifPreview/demo.html

11  Datedropper.js
Datedropper.js is a jQuery plugin that gives you an easy way to enter dates in input fields.



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

12  jfMagnify
jfMagnify is a jQuery plugin for creating a magnifying glass effect on 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 can quickly generate forms by dragging and dropping



DEMO: https://formbuilder.online/

14  Popper.js
Popper.js is a lightweight library for managing tooltips and popup effects. You can place tooltip controls quickly and easily with a single line of code. (About 4KB after compression)

  

DEMO: https://popper.js.org/

15  Image Blur Plugin
Image Blur Plugin is a lightweight cross-browser jQuery plugin for generating image blur effect





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

16  InlineTweet.js
InlineTweet.js, you can easily pass it easily create a twitter link from any text on a webpage. All you need to do is wrap the tweet text into a container with data-inline-tweet.

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

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

17  iMissYou.js
iMissYou.js It is a lightweight and compact jQuery plugin for changing the title and icon of



the  web page when the user leaves your web page . ://limonte.github.io/sweetalert2/ 19  Turntable.js Turntable.js is a responsive jQuery slider plugin that is generated when your mouse (or finger) swipes over a container that holds a batch of images Flip effect 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 web pages



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

22  Microlight.js
Microlight.js is a lightweight code highlighting library for any programming language, which greatly improves code readability (approx. 2.2KB)



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

23  Algolia Places
Algolia Places is a Javascript library that allows you to easily implement the auto-complete function of the search bar on web pages



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

24  flatpickr Flatpickr
is a lightweight date marker and calendar plugin



DEMO based on the vanilla Javascript framework: https://chmln.github.io/flatpickr/

25  Slidebars
Slidebars is a jQuery framework for your web pages Or add off-canvas menus and sidebars to web applications



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

26  anime.js
anime.js is a flexible and lightweight JavaScript animation library. It is implemented via CSS, independent transforms, SVG, DOM properties and JS objects. This GIF does not show its real effect, you can visit homepage to see, the animation is quite cool.



DEMO: http://codepen.io/collection/XLebem/

27  Cleave.js
Cleave.js will format your <input/> tag as you type



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 a lightweight jQuery plugin .



DEMO: http://izimodal.marcelodolce.com/

30  Lightgallery.js
Lightgallery.js is a fully functional JavaScript image lightbox plugin without any dependencies.



DEMO: https://sachinchoolur.github.io/lightgallery.js/ && https://codepen.io/sachinchoolur/pen/qNyvGW

Original link: http://www.kubiji.cn/topic-id2572.html