Line25

25 New Javascript and jQuery plugins for your Web & Mobile Projects

Read the full post

Looking for the latest Javascript and jQuery plugins for your web & mobile projects? Here they are! We selected some new Javascript and jQuery plugins for you, which will help you add awesome functionalities to your websites!

Below, we’ll feature some new and useful JavaScript and jQuery plugins and libraries which can help you discover cool tools that you could use in your next projects.

These Javascript and jQuery plugins and libraries will help you solve some specific problems you may encounter why web developing. They were created to solve some frequently occurring problems for web developers and you should have them bookmarked or downloaded for later use.

Here they are!

Lightgallery.js

Lightgallery.js is a flexible JavaScript plugin that will help you create awesome lightbox galleries. This plugin is fully responsive, supports touch gestures and includes many useful options. It has a very modern and minimal look at it was created by Sachin, a UI/UX designer and FrontEnd developer from India.

1 Full featured JS plugin for lightbox galleries Javascript and jQuery plugins

Flatpickr

Flatpickr is a plugin built with javascript that generates date/time pickers that can be included on your website or app. This is a very powerful and lightweight plugin. We recommend it for its minimal UI with multiple themes. Best of all, it doesn’t depend on other libraries.

2 lightweight javascript datetime picker

ScrollTrigger

ScrollTrigger is a lightweight javascript library that you can use to trigger classes on HTML elements based on scroll position. Create nice scroll animations with just few custom lines of CSS, with this great library. ScrollTrigger doesn’t affect the original scroll behavior of the user. It’s also very easy to implement and use!

3 small library for scroll animations

Switch

Switch is a simple javascript plugin for creating iOS-style switches from simple checkboxes. It also has a set of options (size, color, text, etc.) and callbacks. It’s very similar to the original iOS design, so it’s a perfect match if you’re looking for something like that.

4 simple javascript plugin

Auto-hiding header with CSS and jQuery

This is a cool tutorial that will show you how to easily create a Medium-style auto-hiding header with few lines of CSS and jQuery. The whole idea behind this UX pattern is that the navigation bar automatically hides when the user scrolls down and it becomes visible again when the user scrolls up again.

5 Auto hiding header with CSS and jQuery

Algolia Places

Algolia Places is a JavaScript plugin that turns any input into a beautiful and easy-to-use address with an autocomplete component. It uses OpenStreetMap’s open source database. This is a very strong and fast option if you’re looking to create something that needs address auto-completion.

6 Address autocomplete plugin Javascript and jQuery plugins

Barba.js

Barba.js is a lightweight and dependency-free javascript plugin. You can use it to create smooth transitions on your website. It uses a 4.4kb library that also helps to reduce the delay between the pages of your website.

7 plugin for page transitions

Pointy Slider

Pointy Slider is a CSS and jQuery powered slideshow with sliding panels that unveil background images. This is a very responsive and modern-looking slider with a very nice motion effect.

8-slideshow-based-on-panels Javascript and jQuery plugins

Presentation slideshow template

This is a simple presentation template, coded with few lines of CSS and jQuery. You can use it to create beautiful web slides. A free snippet is offered. We recommend this useful tool if you need an alternative to classic presentations created using native apps.

9 Presentation slideshow template Javascript and jQuery plugins

mojs 

Mojs is a motion graphics javascript library for the web for creating stunning animations. You’ll also have access to some useful tutorials for creating shape & swirl, burst, icon animations and more! This tool is compatible with most target browsers including Chrome, Firefox, Opera, Safari and IE.

10 mojs – Motion graphics library

Sliding out panels with HTML & CSS

This is a quick tutorial that teaches you how to create a website hero made of sliding panels with few lines of HTML, CSS and javascript. This works absolutely great for portfolio websites for agencies or any other type or creatives and it gives you a nice, modern alternative to presenting your projects.

12 Sliding out panels

Roll.js 

Roll.js is a tiny javascript library that helps you keep track of position, scrolling, and pagination. It’s non-dependent and it’s very simple to install and customize. Nothing too fancy, but with a great visual effect!

13 Scroll tracking with javascript

Minigrid 

Minigrid is a minimal and lightweight javascript plugin for creating masonry grid layouts. It’s extremely easy to use and it creates a nice, customizable gallery to showcase your work and projects.

14 Minigrid – Minimal cascading grid layout

Chocolat.js 

Chocolat.js is a free jQuery plugin for creating lightboxes. This is a lightweight, responsive and very powerful plugin. It lets you display one or multiple images staying on the same page. You also get the possibility to choose whether your images will appear as a link or as thumbnails.

15 Lightbox jQuery plugin

Pt

Pt.js is a javascript plugin for creating interactive backgrounds with points, forms, and spaces. Use this tool if you want to make your website special by adding a mesmerizing, eye-catching and interactive element that will make your visitors stay.

16 Pt – Create points, forms and spaces 

Animated page transition with Ajax

This is a tutorial that shows you how to create an Ajax powered page transition, with a slide-in content animation triggered by a side tabbed navigation. Best part of it? You can easily follow this step-by-step tutorial to achieve the desired result even though you’re not an expert in coding.

17 Animated page transition with Ajax

Product grid with filter system

Check out this ready-made example of a product grid with filtering system using Isotope. It comes as a tutorial with free snippets. Also, a nice small cart icon activates when an item is added to the shopping cart, which makes this tool perfect for eCommerce websites.

18 Product grid wit

Color extraction effect with Vibrant.js

This is another great tutorial about creating a little slideshow with a color palette creation effect using CSS Filters and Vibrant.js. The color background has a cool, subtle animation that simulates the item being ‘filled’ with the extracted color.

19 Color extraction effect with Vibrant

iconate.js 

iconate.js is a powerful and small javascript library for cross-browser icon transformation animations. It’s a very modern and cool effect that uses several animation types such as zoom in, zoom out, fade, horizontal or vertical flip, bounce, rotate and more!

20 animations for icons

Page scroll effects

Check out this mini-library including 8-page scroll effects you can use for your sliders. These cool effects take place when the user is surfing through any section of a website. Use this if you want to create a mesmerizing experience for your users.

21 Page scroll effects

ReadRemaining.js jQuery plugin

ReadRemaining.js is a jQuery plugin that tells your readers how long they’ll need to read your article. This plugin is very useful especially for news or magazine websites, as well as personal blogs that feature big blocks of text that require a certain time for reading.

22 jQuery plugin

Slideout.js 

Slideout.js is a lightweight and dependency-free plugin for creating a slide navigation menu for web and mobile apps. It includes native scrolling and it’s very easy to customize using different CSS transitions.

23 Touch navigation menu

Grid item animation layout

This is a responsive website layout with a grid item animation effect that triggers when opening the content. This one is a simple effect with a responsive layout that gives you the possibility to control the transitions of all the elements you need.

24 Grid item animation layout

Layzr.js 

Layzr.js is a small, fast, and dependency-free library for lazy loading images. It maximizes speed by keeping options to a minimum. You’ll see that by using this step-by-step tutorial it will be very easy to install and set up your images using some simple code lines.

25 Lazy load plugin

  • 187
100 HD Blurred Backgrounds

Written by Iggy

Iggy is the main person behind Line25. Iggy is a designer who loves experimenting with new web design techniques, collating creative website designs and writing about latest design trends, inspiration, design freebies and more. You can follow Iggy on Twitter.

3 Comments

  1. Gavin says:

    Superb list Iggy, love the way you included latest JQuery resources.

  2. Brandon says:

    Great list! I have actually been looking for a few good mobile nav options. Going to give these a try!

  3. Aaron Knight says:

    Thanks Iggy, that product grid with filter is going to save me some serious time!

Leave a response