There are many web designers and developers who prefer to use javascript-developed plug-ins and libraries, but face the vexing problem that most of them are cumbersome and often slow down the performance of their sites. There are also a number of lightweight plug-ins and libraries that are light and useful without compromising the performance of your site. In this article, we’ve compiled a list of more than 30 lightweight Javascript plug-ins and libraries from 2016 that serve a specific purpose and can be very effective and efficient in achieving that purpose.

Whether you want to create an image gallery, a slider, a personalization menu, or other interface elements, you can easily do so with these plug-ins and libraries. You can also use these plug-ins to add great features to your site, such as GIFs and image previews, attractive site ICONS, and more.

These plug-ins and libraries are very simple to code and implement. You’ll definitely find them useful for your Web projects later on.

Baguettebox.js baguettebox.js is an easy-to-use, responsive image light box effect script, and supports sliding gestures on mobile devices, written entirely in Javascript. (about 2.7KB after compression)

DEMO: feimosi. Making. IO/baguetteBox…

ScrollReveal allows users to easily create web scrolling animations for desktop and mobile browsers (about 3.3KB compressed).

Please open the DEMO page to feel the animation effect. 🙂

DEMO：scrollrevealjs.org/

Marginotes Marginotes, using jQuery to add marginalia plug-in, fast, cool.

DEMO: Francisco. Dance /

LoudLinks is a lightweight JavaScript library for adding interactive sounds to your site. It does this by creating HTML5 audio elements and using them to play MP3 or OGG audio files. (about 1.5 KB)

Or please open the link below to feel the effect. 🙂

DEMO: loudlinks rocks / # examples

Bricks. Js, Bricks. Js, is a super fast “brick” layout generator for fixed width elements

You can enter the required number of blocks on the DEMO page to see the resulting effect (it will change randomly each time)

DEMO：callmecavs.com/bricks.js/

MediumEditor MediumEditor uses the Vanilla Javascript framework. MediumEditor is a lightweight (28KB) wySIWYG online editor that mimics Medium.com’s toolbar. There is also a MediumEditor extension and theme available.

DEMO: yabwe. Making. IO/medium – edit…

Philter allows you to control CSS filters by using HTML properties. With Philter, when you move the cursor over an image, the image will load the CSS filter. Both available as a jQuery plug-in and as a Vanilla Javascript framework.

DEMO: specro. Making. IO/Philter /

SuperEmbed. Js SuperEmbed. Js is a Javascript library that detects embedded videos on web pages and enables them to become responsive elements.

DEMO：jsfiddle.net/h6x04LuL/

8 Substance Substance is a Web-Based JavaScript library for content editing. It gives you all the tools you need to create custom editors and Web-based publishing systems.

DEMO: substance. IO /

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

DEMO：www.listjs.com/

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

  

DEMO:demo.sodhanalibrary.com/angular/gif…

Datedropper.js Datedropper.js is a jQuery plug-in that gives you an easy way to enter dates in the input field.

DEMO:felicegattuso.com/projects/da…

JfMagnify jfMagnify is a jQuery plugin for creating magnifying effects on any HTML element, not just images.

DEMO:github.com/fonstok/jfM…

JQuery formBuilder formBuilder is a new jQuery plugin that allows you to quickly create tables by dragging and dropping them

DEMO: formbuilder. Online /

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

  

DEMO：popper.js.org/

Image Blur Plugin The Image Blur Plugin is a lightweight cross-browser jQuery plug-in for generating Image Blur effects

DEMO: msurguy. Making. IO/background -…

16 inlinetwet.js Inlinetwet.js, which allows you to easily create a tweet link from any text on a web page. All you need to do is wrap the Tweet text in a container with data-inline-tweet

You can click on DEMO to experience the effects of this plug-in

DEMO: ireade. Making. IO/inlinetweet…

Imissyou.js is a lightweight jQuery plugin for changing the title and ICONS of your web page when you leave it

18 SweetAlert2 SweetAlert2 is a beautiful and customizable warning popup plug-in that can replace Javascript popups

DEMO: limonte. Making. IO/sweetalert2…

Turntable.js turntable.js is a responsive jQuery slider that flips when you hover your mouse (or finger) over a container containing a batch of images

DEMO: polarnotion. Making. IO/turntable

Push.js push.js is a cross-browser Javascript desktop notification plug-in

DEMO: nickersoft. Making. IO/push. Js /

Bideo.js is a Javascript library that makes it easy to add full-screen background videos to web pages

DEMO: rishabhp. Making. IO/bideo. Js /

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

DEMO: asvd. Making. IO/microlight /

Algolia Places is a Javascript library that makes it easy to auto-complete your search bar on your web page

DEMO：community.algolia.com/places/

Flatpickr is a lightweight date marker and calendar plugin based on the Vanilla Javascript framework

DEMO: CHMLN. Making. IO/flatpickr /

Slidebars is a jQuery framework for adding off-Canvas menus and sidebars to your web pages or web applications

DEMO：www.adchsm.com/slidebars/

26 Animo.js Animo.js is a flexible and lightweight JavaScript animation library. It is implemented through CSS, independent transforms, SVG, DOM attributes, and JS objects. This GIF doesn’t show what it really looks like, if you go to the home page, it’s pretty cool.

DEMO: codepen. IO/collection /…

27 Cleave.js Cleave.js will format the contents of your tags as you type

DEMO: nosir. Making. IO/cleave. Js /

Skippr is a super simple jQuery lightweight slideshow plugin

DEMO: austenpayan. Making. IO/skippr /

Izimodal. js is an elegant, responsive, flexible and lightweight jQuery plug-in.

DEMO：izimodal.marcelodolce.com/

Lightgallery.js Lightgallery.js is a fully functional JavaScript image lightbox plug-in, without any dependencies.

DEMO: sachinchoolur. Making. IO/lightgaller… && codepen. IO/sachinchool…

From: dzineship.com

There are many web designers and developers who prefer to use javascript-developed plug-ins and libraries, but face the vexing problem that most of them are cumbersome and often slow down the performance of their sites. There are also a number of lightweight plug-ins and libraries that are light and useful without compromising the performance of your site. In this article, we’ve compiled a list of more than 30 lightweight Javascript plug-ins and libraries from 2016 that serve a specific purpose and can be very effective and efficient in achieving that purpose.

Whether you want to create an image gallery, a slider, a personalization menu, or other interface elements, you can easily do so with these plug-ins and libraries. You can also use these plug-ins to add great features to your site, such as GIFs and image previews, attractive site ICONS, and more.

These plug-ins and libraries are very simple to code and implement. You’ll definitely find them useful for your Web projects later on.

Baguettebox.js baguettebox.js is an easy-to-use, responsive image light box effect script, and supports sliding gestures on mobile devices, written entirely in Javascript. (about 2.7KB after compression)

DEMO: feimosi. Making. IO/baguetteBox…

ScrollReveal allows users to easily create web scrolling animations for desktop and mobile browsers (about 3.3KB compressed).

Please open the DEMO page to feel the animation effect. 🙂

DEMO：scrollrevealjs.org/

Marginotes Marginotes, using jQuery to add marginalia plug-in, fast, cool.

DEMO: Francisco. Dance /

LoudLinks is a lightweight JavaScript library for adding interactive sounds to your site. It does this by creating HTML5 audio elements and using them to play MP3 or OGG audio files. (about 1.5 KB)

Or please open the link below to feel the effect. 🙂

DEMO: loudlinks rocks / # examples

Bricks. Js, Bricks. Js, is a super fast “brick” layout generator for fixed width elements

You can enter the required number of blocks on the DEMO page to see the resulting effect (it will change randomly each time)

DEMO：callmecavs.com/bricks.js/

MediumEditor MediumEditor uses the Vanilla Javascript framework. MediumEditor is a lightweight (28KB) wySIWYG online editor that mimics Medium.com’s toolbar. There is also a MediumEditor extension and theme available.

DEMO: yabwe. Making. IO/medium – edit…

Philter allows you to control CSS filters by using HTML properties. With Philter, when you move the cursor over an image, the image will load the CSS filter. Both available as a jQuery plug-in and as a Vanilla Javascript framework.

DEMO: specro. Making. IO/Philter /

SuperEmbed. Js SuperEmbed. Js is a Javascript library that detects embedded videos on web pages and enables them to become responsive elements.

DEMO：jsfiddle.net/h6x04LuL/

8 Substance Substance is a Web-Based JavaScript library for content editing. It gives you all the tools you need to create custom editors and Web-based publishing systems.

DEMO: substance. IO /

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

DEMO：www.listjs.com/

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

  

DEMO:demo.sodhanalibrary.com/angular/gif…

Datedropper.js Datedropper.js is a jQuery plug-in that gives you an easy way to enter dates in the input field.

DEMO:felicegattuso.com/projects/da…

JfMagnify jfMagnify is a jQuery plugin for creating magnifying effects on any HTML element, not just images.

DEMO:github.com/fonstok/jfM…

JQuery formBuilder formBuilder is a new jQuery plugin that allows you to quickly create tables by dragging and dropping them

DEMO: formbuilder. Online /

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

  

DEMO：popper.js.org/

Image Blur Plugin The Image Blur Plugin is a lightweight cross-browser jQuery plug-in for generating Image Blur effects

DEMO: msurguy. Making. IO/background -…

16 inlinetwet.js Inlinetwet.js, which allows you to easily create a tweet link from any text on a web page. All you need to do is wrap the Tweet text in a container with data-inline-tweet

You can click on DEMO to experience the effects of this plug-in

DEMO: ireade. Making. IO/inlinetweet…

Imissyou.js is a lightweight jQuery plugin for changing the title and ICONS of your web page when you leave it

18 SweetAlert2 SweetAlert2 is a beautiful and customizable warning popup plug-in that can replace Javascript popups

DEMO: limonte. Making. IO/sweetalert2…

Turntable.js turntable.js is a responsive jQuery slider that flips when you hover your mouse (or finger) over a container containing a batch of images

DEMO: polarnotion. Making. IO/turntable

Push.js push.js is a cross-browser Javascript desktop notification plug-in

DEMO: nickersoft. Making. IO/push. Js /

Bideo.js is a Javascript library that makes it easy to add full-screen background videos to web pages

DEMO: rishabhp. Making. IO/bideo. Js /

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

DEMO: asvd. Making. IO/microlight /

Algolia Places is a Javascript library that makes it easy to auto-complete your search bar on your web page

DEMO：community.algolia.com/places/

Flatpickr is a lightweight date marker and calendar plugin based on the Vanilla Javascript framework

DEMO: CHMLN. Making. IO/flatpickr /

Slidebars is a jQuery framework for adding off-Canvas menus and sidebars to your web pages or web applications

DEMO：www.adchsm.com/slidebars/

26 Animo.js Animo.js is a flexible and lightweight JavaScript animation library. It is implemented through CSS, independent transforms, SVG, DOM attributes, and JS objects. This GIF doesn’t show what it really looks like, if you go to the home page, it’s pretty cool.

DEMO: codepen. IO/collection /…

27 Cleave.js Cleave.js will format the contents of your tags as you type

DEMO: nosir. Making. IO/cleave. Js /

Skippr is a super simple jQuery lightweight slideshow plugin

DEMO: austenpayan. Making. IO/skippr /

Izimodal. js is an elegant, responsive, flexible and lightweight jQuery plug-in.

DEMO：izimodal.marcelodolce.com/

Lightgallery.js Lightgallery.js is a fully functional JavaScript image lightbox plug-in, without any dependencies.

DEMO: sachinchoolur. Making. IO/lightgaller… && codepen. IO/sachinchool…

From: dzineship.com