14 JavaScript functions and jQuery plugins for stylish effects

By , November 14th, 2015 , Tags: , , , , , , 0 Comments

14 JavaScript functions and jQuery plugins stylish effects

New JavaScript libraries and plugins are released almost daily. Some useful helpers and effects we have gathered in this article.


Grid Stack jQuery

With Grid stack you create dragbare and flexible layouts.

Gristack is a jQuery plugin for widget layout. So you can create, for example, dashboards with different sized tiles. These can be moved around using drag and drop and resize.


JQuery Plugin Midnight.js

With midnight.js you realize fixed header that adapt depending on the scroll position of the browser.

Midnight.js is a jQuery plugin for Onepager pages that needed differently styled header. Put simply your standard header firmly and then defining the data attribute “data-midnight” which CSS class is to receive the header once it reaches the element with the attribute when scrolling. The appearance of the header then you steer easily in CSS.



With Animsition you miss your side cool transitions.

Animsition is a jQuery plugin for animated transitions between subpages. What used to seem pretty annoying and could be represented only by some browsers, can now easily be implemented quickly with animation and CSS animations for all current browsers – and the different with a total of 58 animations also quite chic.

Material Design Preloader

Material Design Preloader

The Material Design Preloader has your visitors subtly indicate a charging process.

Your WebApp loads in the background on the data? By Material Design Preloader you can visually enhance the charging time. The little jQuery plugin allows you a Preload animation magic to the screen that you can start and stop within your own program logic.

Youtube Background Video

jQuery Youtube Background Video

With jQuery Youtube video background you miss your pages send video backgrounds.

Background Videos miss your Web projects a very nice visual touch. If you do not want to worry about the large number of different formats and hosting, a YouTube video offers. With jQuery Youtube Background Video  is the integrated fast.


jPanelMenu is a jQuery plugin for creating side navigation. Bootstrap  provides a similar function for responsive layouts. Here you click on a button, the menu runs from top to bottom and pushes the content downward. In jPanelMenu the menu from the side moves in. A similar approach is specifically designed for mobile navigation offers you Sidetap.

On the side of jPanelMenu Can you the plugin in action and try it yourself.

Effects dropdown lists

With the Simple Effects for drop-down lists plugin of Codrops can redesign the their normal select elements. The plugin improves the appearance of the element and provides it with various Aufklappeffekten and arrangements.

On the project side of the plugin  learn her how ye can use for your projects.

jQuery Scrollpath

With jQuery Scrollpath the user can be guided on the basis of a path through the web page. If the scrolling function of the browser used, the viewport follows the pre-defined path. So many possibilities for designing more interesting, interactive websites.

On the project page of jQuery Scrollpath experienced her the script live in action.


Countable.js is a JavaScript function that counts live paragraphs, words and characters in input fields. Here Countable requires no external libraries. On the project side of Countable.js can test their functions of the scripts live. On GitHub  there Countable on usenet.



With Questionmark.js you can give users of your website or web app assistance in the use of shortcuts. Captures the script typing a question mark via keyboard, a modal window opens in the Shortcuts can be grouped together.

The script runs on all modern browsers including Internet Explorer from Version 9. With an additional script can also be compatibility with Internet Explorer 8 Making.


IF visible.js demo

Ifvisible.js is a nice script that can be used to check whether a user is viewing your website or not. The script is responsive to whether just user interaction takes place with the page and whether the page is in the foreground. Using a timer can be initiated after a period of inactivity an action. Even the “Wakeup” event can be assigned an additional function, so Ifvisible.js can be best used for the realization of lock and idle screens in web apps.



Another script for handling User States is Offline.js , The slim library checks whether the user is connected to the Internet, and notifies the user if the connection should be interrupted precisely. Special for mobile applications can be a useful companion Offline.js. A particularly useful feature of Offline.js is also the possibility of Ajax requests to withhold and send back to the server after recovery from a loss of connection. Offline.js been tested with browsers such as Chrome, Firefox, Safari and Internet Explorer 8+.



Include pace.js added to your project, it complements a CSS theme of your choice and you get a chic charge indicator. Currently eleven different and customizable designs are available for download.



Pongstar  is a jQuery plugin that can be used for the presentation of current Instagram Media. The library requires Bootstrap and jQuery and can bring with the help of your User ID and Instagram Access Tokens your Instagram posts directly to your site. Here Pongstar.js differs between the last gepusteten, gelikten and corresponding tagged images.

And what JavaScript functions and jQuery plugins are your favorites? We look forward to supplements and tips in the comments!

Ashish Salunke is the Founder and Chief Editor of CSS Matter. Head on over to the contact page and follow him on Twitter: @cssmatter.

Want to write for CSS Matter?

If you're interested in becoming part of the CSS Matter team of authors, please send an email to Manish Salunke. It's best if you already have article ideas in mind – but if you don't, he'll help you find a good topic to cover.

Get Updates On Twitter

Do you want to get real-time updates, interesting web links, site news and announcements via Twitter? Follow CSS Matter on Twitter.

Subscribe to the RSS feed Today

The best way to keep up with CSS Matter articles regularly is by putting the CSS Matter RSS feed into your feed reader.