50 Amazing jQuery Plugins That You Should Start Using Right Now

<div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;">jQuery has a wonderful community of programmers that create incredible things. However, it may become difficult to sift through everything that is released and find the gems that are absolute must-haves. This is why, in this post, you will find a collection of 50 new jQuery plugins and JavaScript libraries that, when applied with good measure, can make your sites a joy to use. The plugins are organized into categories for easier browsing. Enjoy!</div><h3 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; margin: 1.5em 0px 0.75em; padding: 0px;">Dialogs</h3><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;">The browser’s built-in dialogs are easy to use but are ugly and non-customizable. If you want your application to look sharp and professional, you will have to part with the loathed default look. The plugins in this section can substitute the built-in dialogs and can be readily customized.</div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">1. Alertify.js</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://fabien-d.github.com/alertify.js/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Alertify</a> (<a href="https://github.com/fabien-d/alertify.js" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is small library for presenting beautiful dialog windows and notifications. It is easy to customize with CSS, has a simple API and doesn’t depend on third party libraries (but plays nicely with them). To use it, include the js file and call the methods of the global alertify object:</div><pre class="brush:js" data-lines="1 2 3 4 5 6 7 8 9 10 11 " style="background-color: white; color: #666666; font-size: 0.8em; margin-bottom: 1.5em; padding: 0px; position: relative; word-wrap: normal;"><code class="javascript" style="border: 1px solid rgb(249, 249, 249); color: #4d4d4c; display: block; margin: 0px; overflow-y: auto; padding: 0.5em;"><span class="comment" style="color: #8e908c; margin: 0px; padding: 0px;">// alert dialog</span><br />alertify.alert(<span class="string" style="color: #718c00; margin: 0px; padding: 0px;">"Message"</span>);<br /><br /><span class="comment" style="color: #8e908c; margin: 0px; padding: 0px;">// confirm dialog</span><br />alertify.confirm(<span class="string" style="color: #718c00; margin: 0px; padding: 0px;">"Message"</span>, <span class="function" style="color: #8959a8; margin: 0px; padding: 0px;"><span class="keyword" style="margin: 0px; padding: 0px;">function</span> <span class="params" style="color: #f5871f; margin: 0px; padding: 0px;">(e)</span> {</span><br /> <span class="keyword" style="color: #8959a8; margin: 0px; padding: 0px;">if</span> (e) {<br /> <span class="comment" style="color: #8e908c; margin: 0px; padding: 0px;">// user clicked "ok"</span><br /> } <span class="keyword" style="color: #8959a8; margin: 0px; padding: 0px;">else</span> {<br /> <span class="comment" style="color: #8e908c; margin: 0px; padding: 0px;">// user clicked "cancel"</span><br /> }<br />});</code></pre><div class="wp-caption alignnone" id="attachment_2800" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://fabien-d.github.com/alertify.js/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Alertify.js" class="size-full wp-image-2800" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0048_2.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Alertify.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Alertify.js</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">2. jQuery Avgrund</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://labs.voronianski.com/jquery.avgrund.js/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">jQuery Avgrund</a> (<a href="https://github.com/voronianski/jquery.avgrund.js" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;" target="_blank">github</a>) is another cool dialog solution. It is not as feature-rich as alertify, but it has the Wow! factor that your web app needs. The dialog is shown with an impressive animation that brings it into focus, while blurring and darkening the background.</div><div class="wp-caption alignnone" id="attachment_2799" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://labs.voronianski.com/jquery.avgrund.js/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="jQuery Avgrund" class="size-full wp-image-2799 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0047_3.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="jQuery Avgrund" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">jQuery Avgrund</div></div><h3 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; margin: 1.5em 0px 0.75em; padding: 0px;">Forms</h3><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;">Forms are tedious and boring. Everyone hates filling them. It is even a bigger deal if no client-side validation is present and we are forced to enter the data a second time. The plugins in this section attempt to make things better by enhancing your forms with useful functionality.</div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">3. iCheck</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://damirfoy.com/iCheck/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">iCheck</a> (<a href="https://github.com/damirfoy/iCheck/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a jQuery plugin that enhances your form controls. It is perfectly customizable, works on mobile and comes with beautiful flat-style skins. To use it, include the js and css files in your page, and convert all your radio and checkboxes with a few lines of jQuery.</div><pre class="brush:js" data-lines="1 2 3 4 5 6 " style="background-color: white; color: #666666; font-size: 0.8em; margin-bottom: 1.5em; padding: 0px; position: relative; word-wrap: normal;"><code class="javascript" style="border: 1px solid rgb(249, 249, 249); color: #4d4d4c; display: block; margin: 0px; overflow-y: auto; padding: 0.5em;">$(document).ready(<span class="keyword" style="color: #8959a8; margin: 0px; padding: 0px;">function</span>(){<br /> $(<span class="string" style="color: #718c00; margin: 0px; padding: 0px;">'input'</span>).iCheck({<br /> checkboxClass: <span class="string" style="color: #718c00; margin: 0px; padding: 0px;">'icheckbox_minimal'</span>,<br /> radioClass: <span class="string" style="color: #718c00; margin: 0px; padding: 0px;">'iradio_minimal'</span><br /> });<br />});</code></pre><div class="wp-caption alignnone" id="attachment_2798" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://damirfoy.com/iCheck/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="iCheck" class="size-full wp-image-2798 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0046_4.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="iCheck" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">iCheck</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">4. Long Press</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://toki-woki.net/lab/long-press/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Long Press</a> is a jQuery plugin that eases the writing of accented or rare characters. Holding down a key while typing will bring a bar with alternative characters that you can use. The plugin also has a <a href="https://github.com/quentint/long-press" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a> page.</div><div class="wp-caption alignnone" id="attachment_2797" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://toki-woki.net/lab/long-press/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Long Press" class="size-full wp-image-2797 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0045_5.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Long Press" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Long Press</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">5. jQuery File Upload</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://blueimp.github.com/jQuery-File-Upload/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">jQuery File Upload</a> (<a href="https://github.com/blueimp/jQuery-File-Upload" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a widget with multiple file selection, drag&drop support, progress bars and preview images. It supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) and is easy to embed into your application thanks to a number of hooks and callbacks.</div><div class="wp-caption alignnone" id="attachment_2796" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://blueimp.github.com/jQuery-File-Upload/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="jQuery File Upload" class="size-full wp-image-2796 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0044_6.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="jQuery File Upload" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">jQuery File Upload</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">6. Complexify</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://danpalmer.me/jquery-complexify/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Complexify</a> (<a href="https://github.com/danpalmer/jquery.complexify.js/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a jQuery plugin that aims to assess how complex passwords are. You can use it in signup forms to present a percentage to users (like we did in <a href="http://tutorialzine.com/2012/06/beautiful-password-strength-indicator/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">this tutorial</a>). With this plugin you can force passwords to contain a combination of upper/lowercase letters, numbers, special symbols and more. I should note that this is purely a client-side solution, which means that it can be circumvented. This is why you should also check the password complexity on the server side.</div><div class="wp-caption alignnone" id="attachment_2795" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://danpalmer.me/jquery-complexify/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Complexify" class="size-full wp-image-2795 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0043_7.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Complexify" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Complexify</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">7. jQuery Knob</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://anthonyterrien.com/knob/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">jQuery Knob</a> (<a href="https://github.com/aterrien/jQuery-Knob" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a plugin for turning input elements into touchable jQuery dials. It is built using canvas, and is fully customizable by setting data attributes on the inputs like this:</div><pre class="brush:html" style="background-color: white; color: #666666; font-size: 0.8em; margin-bottom: 1.5em; padding: 0px; position: relative; word-wrap: normal;"><code class="html xml" style="border: 1px solid rgb(249, 249, 249); color: #4d4d4c; display: block; margin: 0px; overflow-y: auto; padding: 0.5em;"><span class="tag" style="color: #c82829; margin: 0px; padding: 0px;"><<span class="title" style="margin: 0px; padding: 0px;">input</span> <span class="attribute" style="margin: 0px; padding: 0px;">class</span>=<span class="value" style="color: #718c00; margin: 0px; padding: 0px;">"knob"</span> <span class="attribute" style="margin: 0px; padding: 0px;">data-width</span>=<span class="value" style="color: #718c00; margin: 0px; padding: 0px;">"150"</span> <span class="attribute" style="margin: 0px; padding: 0px;">data-cursor</span>=<span class="value" style="color: #718c00; margin: 0px; padding: 0px;">true</span> <span class="attribute" style="margin: 0px; padding: 0px;">data-fgColor</span>=<span class="value" style="color: #718c00; margin: 0px; padding: 0px;">"#222222"</span> <span class="attribute" style="margin: 0px; padding: 0px;">data-thickness</span>=<span class="value" style="color: #718c00; margin: 0px; padding: 0px;">"0.3"</span> <span class="attribute" style="margin: 0px; padding: 0px;">value</span>=<span class="value" style="color: #718c00; margin: 0px; padding: 0px;">"29"</span>></span></code></pre><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;">The dials can be controlled using the mouse (click and drag; mousewheel), the keyboard, and by using touch on mobile devices.</div><div class="wp-caption alignnone" id="attachment_2794" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://anthonyterrien.com/knob/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="jQuery Knob" class="size-full wp-image-2794 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0042_8.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="jQuery Knob" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">jQuery Knob</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">8. Pickadate.js</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://amsul.ca/pickadate.js/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Pickadate.js</a> (<a href="https://github.com/amsul/pickadate.js" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a jQuery plugin that creates a responsive and mobile friendly date selection widget. It is very easy to use and can be customized with CSS. To use it, include the js file and the stylesheet, and call the plugin on your input element:</div><pre class="brush:js" style="background-color: white; color: #666666; font-size: 0.8em; margin-bottom: 1.5em; padding: 0px; position: relative; word-wrap: normal;"><code class="javascript" style="border: 1px solid rgb(249, 249, 249); color: #4d4d4c; display: block; margin: 0px; overflow-y: auto; padding: 0.5em;">$(<span class="string" style="color: #718c00; margin: 0px; padding: 0px;">'.datepicker'</span>).pickadate();</code></pre><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;">The plugin takes lots of options which you can find in the <a href="http://amsul.ca/pickadate.js/docs.htm" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">docs</a>.</div><div class="wp-caption alignnone" id="attachment_2793" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://amsul.ca/pickadate.js/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Pickadate.js" class="size-full wp-image-2793 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0041_9.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Pickadate.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Pickadate.js</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">9. Chosen</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://harvesthq.github.com/chosen/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Chosen</a> (<a href="https://github.com/harvesthq/chosen" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a powerful widget which converts a select input into a searchable dropdown list. It is easy to customize with CSS, and you can hook your own code thanks to a number of callbacks. The plugin also updates the original element (which is hidden) so that submitting it as a part of a form or reading it with JS will give you the correct result.</div><div class="wp-caption alignnone" id="attachment_2792" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://harvesthq.github.com/chosen/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Chosen" class="size-full wp-image-2792 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0040_10.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Chosen" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Chosen</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">10. Fancy Input</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://dropthebit.com/demos/fancy_input/fancyInput.html" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Fancy Input</a> (<a href="https://github.com/yairEO/fancyInput" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a jQuery plugin that makes entering or deleting text in a textboox uber cool. It uses CSS3 animations to achieve the effect. To use it, simply include the JS file after jQuery, and call the plugin:</div><pre class="brush:js" style="background-color: white; color: #666666; font-size: 0.8em; margin-bottom: 1.5em; padding: 0px; position: relative; word-wrap: normal;"><code class="javascript" style="border: 1px solid rgb(249, 249, 249); color: #4d4d4c; display: block; margin: 0px; overflow-y: auto; padding: 0.5em;">$(<span class="string" style="color: #718c00; margin: 0px; padding: 0px;">'div :input'</span>).fancyInput();</code></pre><div class="wp-caption alignnone" id="attachment_2791" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://dropthebit.com/demos/fancy_input/fancyInput.html" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Fancy Input" class="size-full wp-image-2791 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0039_11.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Fancy Input" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Fancy Input</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">11. Typeahead.js</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://twitter.github.com/typeahead.js/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Typeahead</a> (<a href="https://github.com/twitter/typeahead.js/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a fast autocomplete library by twitter. It is inspired by twitter.com’s search box and is full of features. It displays suggestions as users type, and shows the top suggestion as a hint. The plugin works with hardcoded data as well as remote data, and rate-limits network requests to lighten the load.</div><div class="wp-caption alignnone" id="attachment_2790" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://twitter.github.com/typeahead.js/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Typeahead.js" class="size-full wp-image-2790 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0038_12.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Typeahead.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Typeahead.js</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">12. Parsley.js</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://parsleyjs.org/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Parsley.js</a> (<a href="https://github.com/guillaumepotier/Parsley.js/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is an unobtrusive form validation library. It lets you validate form fields without having to write a single line of JavaScript. Instead, you have to place <strong style="margin: 0px; padding: 0px;">data</strong> attributes in the input fields that you need to be validated, and Parsley handles the rest. The library works with either jQuery or Zepto and is less than 800 lines long.</div><div class="wp-caption alignnone" id="attachment_2789" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://parsleyjs.org/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Parsley.js" class="size-full wp-image-2789 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0037_13.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Parsley.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Parsley.js</div></div><h3 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; margin: 1.5em 0px 0.75em; padding: 0px;">Page scrolling and Parallax</h3><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;">Single page websites that feature a parallax scrolling effect are popular these days. They will probably stay in fashion for some time, as they are perfect for sites with low information density and lots of photos – marketing sites, portfolios and more. These plugins aim to make them easier to develop.</div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">13. Windows</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://nick-jonas.github.com/windows/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Windows</a> (<a href="https://github.com/modernassembly/windows/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a plugin that lets you build single page websites with sections that take up the whole screens. The plugin gives you callbacks that are called when new sections come into visibility and handles snapping, so you can easily extend it with custom navigation menus or more. Here is an example:</div><pre class="brush:js" data-lines="1 2 3 4 5 6 7 8 9 10 11 12 13 14 " style="background-color: white; color: #666666; font-size: 0.8em; margin-bottom: 1.5em; padding: 0px; position: relative; word-wrap: normal;"><code class="javascript" style="border: 1px solid rgb(249, 249, 249); color: #4d4d4c; display: block; margin: 0px; overflow-y: auto; padding: 0.5em;">$(<span class="string" style="color: #718c00; margin: 0px; padding: 0px;">'.window'</span>).windows({<br /> snapping: <span class="literal" style="color: #f5871f; margin: 0px; padding: 0px;">true</span>,<br /> snapSpeed: <span class="number" style="color: #f5871f; margin: 0px; padding: 0px;">500</span>,<br /> snapInterval: <span class="number" style="color: #f5871f; margin: 0px; padding: 0px;">1100</span>,<br /> onScroll: <span class="keyword" style="color: #8959a8; margin: 0px; padding: 0px;">function</span>(scrollPos){<br /> <span class="comment" style="color: #8e908c; margin: 0px; padding: 0px;">// scrollPos:Number</span><br /> },<br /> onSnapComplete: <span class="keyword" style="color: #8959a8; margin: 0px; padding: 0px;">function</span>($el){<br /> <span class="comment" style="color: #8e908c; margin: 0px; padding: 0px;">// after window ($el) snaps into place</span><br /> },<br /> onWindowEnter: <span class="keyword" style="color: #8959a8; margin: 0px; padding: 0px;">function</span>($el){<br /> <span class="comment" style="color: #8e908c; margin: 0px; padding: 0px;">// when new window ($el) enters viewport</span><br /> }<br />});</code></pre><div class="wp-caption alignnone" id="attachment_2788" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://nick-jonas.github.com/windows/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Windows" class="size-full wp-image-2788 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0036_14.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Windows" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Windows</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">14. Cool Kitten</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://jalxob.com/cool-kitten/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Cook Kitten</a> (<a href="https://github.com/jalxob/cool-kitten" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a responsive framework for parallax scrolling websites. It organizes the sections of your site into slides and uses the <a href="https://github.com/imakewebthings/jquery-waypoints" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">jQuery Waypoints</a> plugin to detect when they come into visibility, which causes the navigation menu to get updated.</div><div class="wp-caption alignnone" id="attachment_2787" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://jalxob.com/cool-kitten/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Cook Kitten" class="size-full wp-image-2787 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0035_15.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Cook Kitten" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Cook Kitten</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">15. Sticky</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://stickyjs.com/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Sticky</a> (<a href="https://github.com/garand/sticky" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a jQuery plugin that gives you the ability to make any element on your page always stay visible when scrolling the page. This can come handy in your single-page website to present a sticky navigation menu or sharing bar. It is straightforward to use, the only option you may pass is a top offset:</div><pre class="brush:js" style="background-color: white; color: #666666; font-size: 0.8em; margin-bottom: 1.5em; padding: 0px; position: relative; word-wrap: normal;"><code class="javascript" style="border: 1px solid rgb(249, 249, 249); color: #4d4d4c; display: block; margin: 0px; overflow-y: auto; padding: 0.5em;">$(<span class="string" style="color: #718c00; margin: 0px; padding: 0px;">"#sticker"</span>).sticky({topSpacing:<span class="number" style="color: #f5871f; margin: 0px; padding: 0px;">0</span>});</code></pre><div class="wp-caption alignnone" id="attachment_2786" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://stickyjs.com/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Sticky" class="size-full wp-image-2786 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0034_16.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Sticky" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Sticky</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">16. Super Scrollorama</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://johnpolacek.github.com/superscrollorama/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Super Scrollorama</a> (<a href="https://github.com/johnpolacek/superscrollorama" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a jQuery plugin for cool scroll animations. It lets you define tweens and animations that are triggered when an element comes into view, or on specific scroll points.</div><pre class="brush:js" data-lines="1 2 3 4 5 " style="background-color: white; color: #666666; font-size: 0.8em; margin-bottom: 1.5em; padding: 0px; position: relative; word-wrap: normal;"><code class="javascript" style="border: 1px solid rgb(249, 249, 249); color: #4d4d4c; display: block; margin: 0px; overflow-y: auto; padding: 0.5em;">$(document).ready(<span class="keyword" style="color: #8959a8; margin: 0px; padding: 0px;">function</span>() {<br /> <span class="keyword" style="color: #8959a8; margin: 0px; padding: 0px;">var</span> controller = $.superscrollorama();<br /> controller.addTween(<span class="string" style="color: #718c00; margin: 0px; padding: 0px;">'#fade'</span>,<br /> TweenMax.from($(<span class="string" style="color: #718c00; margin: 0px; padding: 0px;">'#fade'</span>), <span class="number" style="color: #f5871f; margin: 0px; padding: 0px;">.5</span>, {css:{opacity:<span class="number" style="color: #f5871f; margin: 0px; padding: 0px;">0</span>}}));<br />});</code></pre><div class="wp-caption alignnone" id="attachment_2785" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://johnpolacek.github.com/superscrollorama/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Super Scrollorama" class="size-full wp-image-2785 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0033_17.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Super Scrollorama" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Super Scrollorama</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">17. Stellar.js</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://markdalgleish.com/projects/stellar.js/demos/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Stellar.js</a> (<a href="https://github.com/markdalgleish/stellar.js" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a jQuery plugin that provides parallax scrolling effects to any scrolling element. It looks for any parallax backgrounds or elements within the specified element, and repositions them when the element scrolls. You can control the scroll speed of the elements by using <strong style="margin: 0px; padding: 0px;">data</strong> attributes for a true parallax effect. To trigger the plugin, simply call it on your root element (or on <em style="margin: 0px; padding: 0px;">window</em>):</div><pre class="brush:js" style="background-color: white; color: #666666; font-size: 0.8em; margin-bottom: 1.5em; padding: 0px; position: relative; word-wrap: normal;"><code class="javascript" style="border: 1px solid rgb(249, 249, 249); color: #4d4d4c; display: block; margin: 0px; overflow-y: auto; padding: 0.5em;">$(<span class="string" style="color: #718c00; margin: 0px; padding: 0px;">'#main'</span>).stellar();</code></pre><div class="wp-caption alignnone" id="attachment_2784" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://markdalgleish.com/projects/stellar.js/demos/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Stellar.js" class="size-full wp-image-2784 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0032_18.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Stellar.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Stellar.js</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">18. Scrollpath</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://joelb.me/scrollpath/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Scrollpath</a> (<a href="https://github.com/JoelBesada/scrollpath" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is another scrolling plugin, but what it gives you that the previous plugin does not, is the ability to define your own custom scroll path. The plugin uses canvas flavored syntax for drawing paths, using the methods <strong style="margin: 0px; padding: 0px;">moveTo</strong>,<strong style="margin: 0px; padding: 0px;"> lineTo</strong> and <strong style="margin: 0px; padding: 0px;">arc</strong>. To help with getting the path right, a canvas overlay with the path can be enabled when initializing the plugin.</div><div class="wp-caption alignnone" id="attachment_2783" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://joelb.me/scrollpath/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Scrollpath" class="size-full wp-image-2783 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0031_19.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Scrollpath" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Scrollpath</div></div><h3 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; margin: 1.5em 0px 0.75em; padding: 0px;">Text effects</h3><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;">There has been a huge improvement in web typography in the last few years. From just a handful of web-safe fonts that we could use not long ago, we now can embed custom fonts and enhance them with CSS3. The plugins in this section give you a great deal of control over text.</div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">19. Textillate.js</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://jschr.github.com/textillate/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Textillate.js</a> (<a href="https://github.com/jschr/textillate" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a jQuery plugin that combines the power of <a href="http://daneden.me/animate/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;" target="_blank">animate.css</a> and <a href="http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/#23" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">lettering.js</a>, to apply advanced animations on text elements. The animations are CSS3 based, which makes them smooth even on mobile devices. There is a large number of effects to choose from.</div><div class="wp-caption alignnone" id="attachment_2782" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://jschr.github.com/textillate/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Textillate.js" class="size-full wp-image-2782 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0030_20.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Textillate.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Textillate.js</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">20. Arctext.js</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Arctext.js</a> (<a href="http://tympanus.net/Development/Arctext/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">demo</a>) is a jQuery plugin that lets you arrange each letter of a text element along a curved path. Based on lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius, and applies the proper CSS3 rotation.</div><div class="wp-caption alignnone" id="attachment_2781" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://tympanus.net/Development/Arctext/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Artctext.js" class="size-full wp-image-2781 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0029_21.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Artctext.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Artctext.js</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">21. Bacon</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://baconforme.com/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Bacon</a> (<a href="https://github.com/hudsonfoo/jQuery-Bacon" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">githug</a>) is a jQuery plugin that allows you to wrap text around a bezier curve or a line. This gives you a great deal of typographic control, and as illustrated by the plugin’s home page, the ability to put bacon strips in the middle of your designs (finally!).</div><div class="wp-caption alignnone" id="attachment_2779" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://baconforme.com/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Bacon.js" class="size-full wp-image-2779 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0027_23.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Bacon.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Bacon.js</div></div><h4 id="23" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">22. Lettering.js</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://letteringjs.com/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Lettering.js</a> (<a href="https://github.com/davatron5000/Lettering.js" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a simple but effective jQuery plugin for better web typography. What it does, is split the textual content of an element into individual spans with ordinal <strong style="margin: 0px; padding: 0px;">.char#</strong> classes, so you can style each letter individually.</div><div class="wp-caption alignnone" id="attachment_2778" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://letteringjs.com/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Lettering.js" class="size-full wp-image-2778" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0026_24.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Lettering.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Lettering.js</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">23. jQuery Shuffle Letters</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://tutorialzine.com/2011/09/shuffle-letters-effect-jquery/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">jQuery Shuffle Letters</a> (<a href="http://demo.tutorialzine.com/2011/09/shuffle-letters-effect-jquery/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">demo</a>) is one of our experiments. It creates an interesting effect that randomizes the content of a text element. Here is how to use it:</div><pre class="brush:js" data-lines="1 2 3 4 " style="background-color: white; color: #666666; font-size: 0.8em; margin-bottom: 1.5em; padding: 0px; position: relative; word-wrap: normal;"><code class="javascript" style="border: 1px solid rgb(249, 249, 249); color: #4d4d4c; display: block; margin: 0px; overflow-y: auto; padding: 0.5em;"><span class="comment" style="color: #8e908c; margin: 0px; padding: 0px;">// Shuffle the container with custom text</span><br />$(<span class="string" style="color: #718c00; margin: 0px; padding: 0px;">'h1'</span>).shuffleLetters({<br /> <span class="string" style="color: #718c00; margin: 0px; padding: 0px;">"text"</span>: <span class="string" style="color: #718c00; margin: 0px; padding: 0px;">"show this text!"</span> <span class="comment" style="color: #8e908c; margin: 0px; padding: 0px;">// optional</span><br />});</code></pre><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;">The text parameter is optional – if it is missing, the plugin will take the content of the element.</div><div class="wp-caption alignnone" id="attachment_2777" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://demo.tutorialzine.com/2011/09/shuffle-letters-effect-jquery/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="jQuery Shuffle Letters" class="size-full wp-image-2777" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0025_25.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="jQuery Shuffle Letters" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">jQuery Shuffle Letters</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">24. FitText.js</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://fittextjs.com/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">FitText.js</a> (<a href="https://github.com/davatron5000/FitText.js" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a jQuery plugin for inflating web type. It automatically scales the text of an element to take up the full width of its container. This makes the layout responsive and looking sharp on any device.</div><div class="wp-caption alignnone" id="attachment_2776" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://fittextjs.com/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="FitText.js" class="size-full wp-image-2776" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0024_26.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="FitText.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">FitText.js</div></div><h3 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; margin: 1.5em 0px 0.75em; padding: 0px;">Grids</h3><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;">The plugins in this section make it easy to organize content into grids. They calculate the best way to pack your items densely and align them in real time.</div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">25. Gridster.js</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://gridster.net/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Gridster.js</a> (<a href="https://github.com/ducksboard/gridster.js" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. Dragging an element causes the others to rearrange and free up place for it, which can be great for user-controlled layouts and dashboards.</div><div class="wp-caption alignnone" id="attachment_2775" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://gridster.net/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Gridster.js" class="size-full wp-image-2775 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0023_27.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Gridster.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Gridster.js</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">26. Freetile</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://yconst.com/web/freetile/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Freetile</a> (<a href="https://github.com/yconst/Freetile" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it’s children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement.</div><div class="wp-caption alignnone" id="attachment_2774" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://yconst.com/web/freetile/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Freetile" class="size-full wp-image-2774" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0022_28.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Freetile" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Freetile</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">27. Stalactite</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://jonobr1.github.com/stalactite/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Stalactite</a> (<a href="https://github.com/jonobr1/stalactite" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a library that packs page content depending on the available space. It takes a lazy approach and sorts the elements sequentially with the scrolling of the page, which makes for an interesting effect.</div><div class="wp-caption alignnone" id="attachment_2773" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://jonobr1.github.com/stalactite/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Stalactite" class="size-full wp-image-2773" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0021_29.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Stalactite" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Stalactite</div></div><h3 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; margin: 1.5em 0px 0.75em; padding: 0px;">Custom scrollbars</h3><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;">Something that we have all wanted to do in one point or another is to customize the appearance of the default browser scrollbars. Some browsers allow this, but it doesn’t work everywhere. The two plugins below make that possible.</div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">28. nanoScroller.js</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://jamesflorentino.github.com/nanoScrollerJS/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">nanoScroller.js</a> (<a href="https://github.com/jamesflorentino/nanoScrollerJS" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a jQuery plugin that offers a simplistic way of implementing Mac OS X Lion-styled scrollbars for your website. It uses minimal HTML markup and utilizes native scrolling. The plugin works on iPad, iPhone, and some Android Tablets.</div><div class="wp-caption alignnone" id="attachment_2772" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://jamesflorentino.github.com/nanoScrollerJS/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="nanoScroller.js" class="size-full wp-image-2772 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0020_30.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="nanoScroller.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">nanoScroller.js</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">29. jQuery Custom Content Scroller</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://manos.malihu.gr/jquery-custom-content-scroller/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">jQuery Custom Content Scroller</a> (<a href="https://github.com/malihu/malihu-custom-scrollbar-plugin" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a custom scrollbar plugin that’s fully customizable with CSS. Features vertical/horizontal scrolling, mouse-wheel support (via the <a href="https://github.com/brandonaaron/jquery-mousewheel" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;" target="_blank">jQuery mousewheel plugin</a>), scrolling buttons, scroll inertia with easing, auto-adjustable scrollbar length, nested scrollbars, scroll-to functionality, user defined callbacks and more.</div><div class="wp-caption alignnone" id="attachment_2771" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://manos.malihu.gr/tuts/custom-scrollbar-plugin/complete_examples.html" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="jQuery Custom Content Scroller" class="size-full wp-image-2771 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0019_31.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="jQuery Custom Content Scroller" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">jQuery Custom Content Scroller</div></div><h3 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; margin: 1.5em 0px 0.75em; padding: 0px;">Backgrounds</h3><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;">Full screen backgrounds are another popular design trend. The plugins listed here aim to make it easier to set a single image, a gallery or even a video as a background.</div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">30. Tubular.js</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://www.seanmccambridge.com/tubular/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Tubular.js</a> is a jQuery plugin that lets you set a YouTube video as your page background. Just attach it to your page wrapper element, set some options, and you’re on your way:</div><pre class="brush:js" style="background-color: white; color: #666666; font-size: 0.8em; margin-bottom: 1.5em; padding: 0px; position: relative; word-wrap: normal;"><code class="javascript" style="border: 1px solid rgb(249, 249, 249); color: #4d4d4c; display: block; margin: 0px; overflow-y: auto; padding: 0.5em;">$(<span class="string" style="color: #718c00; margin: 0px; padding: 0px;">'#wrapper'</span>).tubular({videoId: <span class="string" style="color: #718c00; margin: 0px; padding: 0px;">'0Bmhjf0rKe8'</span>});</code></pre><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;">The plugin also supports controlling the video with play/pause, setting the volume and more.</div><div class="wp-caption alignnone" id="attachment_2769" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://www.seanmccambridge.com/tubular/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Tubular.js" class="size-full wp-image-2769" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0017_33.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Tubular.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Tubular.js</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">31. Backstretch</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://srobbin.com/jquery-plugins/backstretch/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Backstretch</a> (<a href="https://github.com/srobbin/jquery-backstretch" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. It will stretch any image to fit the page or block-level element, and will automatically resize as the window or element size changes. Images are fetched after your page is loaded, so your users won’t have to wait for the (often large) image to download before using your site. For the curious, and those that don’t want to use plugins, there is also a technique that can <a href="http://tutorialzine.com/2012/06/quick-tip-fullscreen-backgrounds/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;" title="Quick Tip – Make a Full Screen Image Background With a Line of CSS">set a full screen background image purely with CSS</a>.</div><div class="wp-caption alignnone" id="attachment_2768" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://srobbin.com/jquery-plugins/backstretch/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Backstretch" class="size-full wp-image-2768" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0016_34.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Backstretch" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Backstretch</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">32. Supersized</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://buildinternet.com/project/supersized/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Supersized</a> (<a href="https://github.com/buildinternet/supersized" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is an advanced full screen background plugin for jQuery. With it, you can show a set of photos as a slideshow that takes the full width and height of the page. This makes it perfect for photography sites, portfolios, or event sites. The plugin comes with lots of options, supports multiple transition effects and can be extended with custom themes.</div><div class="wp-caption alignnone" id="attachment_2804" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://buildinternet.com/project/supersized/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Supersized" class="size-full wp-image-2804" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/supersized.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Supersized" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Supersized</div></div><h3 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; margin: 1.5em 0px 0.75em; padding: 0px;">Galleries and image effects</h3><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;">The plugins listed here aim to enhance the way visitors browse images on your site, and let you apply interesting effects that will make your galleries stand out.</div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">33. jQuery TouchTouch</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://tutorialzine.com/2012/04/mobile-touch-gallery/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">jQuery TouchTouch</a> (<a href="http://demo.tutorialzine.com/2012/04/mobile-touch-gallery/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">demo</a>) is a plugin we released last year that aims to be simple to use and to work on mobile devices. It uses CSS transitions to make animations smoother, and preloads images dynamically. Also, it can be completely restyled by modifying a single CSS file.</div><div class="wp-caption alignnone" id="attachment_2759" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://demo.tutorialzine.com/2012/04/mobile-touch-gallery/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="jQuery TouchTouch" class="size-full wp-image-2759" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0007_43.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="jQuery TouchTouch" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">jQuery TouchTouch</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">34. iPicture</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://ipicture-square.justmybit.com/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">iPicture</a> is a jQuery plugin that can create interactive image walkthroughs. It can overlay tooltips and hints on top of the image, and presents rich content like HTML, photos and videos. It is easy to integrate into your site and can be customized and extended with CSS.</div><div class="wp-caption alignnone" id="attachment_2758" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://ipicture-square.justmybit.com/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="iPicture" class="size-full wp-image-2758" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0006_44.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="iPicture" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">iPicture</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">35. Adipoli jQuery Image Hover Plugin</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://cube3x.com/adipoli-jquery-image-hover-plugin/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;" target="_blank">Adipoli</a> (<a href="http://cube3x.com/demo/adipoli-jquery-image-hover-plugin/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">demo</a>) is a jQuery plugin for creating stylish image hover effects. With it, you can turn images black and white, apply popout, slice and box transitions. To use the plugin, you only need to include the necessary files and define the start and hover effects:</div><pre class="brush:js" data-lines="1 2 3 4 " style="background-color: white; color: #666666; font-size: 0.8em; margin-bottom: 1.5em; padding: 0px; position: relative; word-wrap: normal;"><code class="javascript" style="border: 1px solid rgb(249, 249, 249); color: #4d4d4c; display: block; margin: 0px; overflow-y: auto; padding: 0.5em;">$(<span class="string" style="color: #718c00; margin: 0px; padding: 0px;">'#image1'</span>).adipoli({<br /> <span class="string" style="color: #718c00; margin: 0px; padding: 0px;">'startEffect'</span> : <span class="string" style="color: #718c00; margin: 0px; padding: 0px;">'normal'</span>,<br /> <span class="string" style="color: #718c00; margin: 0px; padding: 0px;">'hoverEffect'</span> : <span class="string" style="color: #718c00; margin: 0px; padding: 0px;">'popout'</span><br />});</code></pre><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;">This makes it the perfect addition to your gallery or portfolio page.</div><div class="wp-caption alignnone" id="attachment_2757" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://cube3x.com/demo/adipoli-jquery-image-hover-plugin/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Adipoli jQuery Image Hover Plugin" class="size-full wp-image-2757" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0005_45.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Adipoli jQuery Image Hover Plugin" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Adipoli jQuery Image Hover Plugin</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">36. Swipebox</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://brutaldesign.github.com/swipebox/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Swipebox</a> (<a href="https://github.com/brutaldesign/swipebox" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a lightbox plugin that supports desktop, mobile devices and tablet browsers. It understands swipe gestures and keyboard navigaton and is retina-ready. To enable it, include the plugin JS/CSS files, and add the <em style="margin: 0px; padding: 0px;">swipebox</em> class to the images that you want to show in a lightbox:</div><pre class="brush:js" data-lines="1 2 3 " style="background-color: white; color: #666666; font-size: 0.8em; margin-bottom: 1.5em; padding: 0px; position: relative; word-wrap: normal;"><code class="javascript" style="border: 1px solid rgb(249, 249, 249); color: #4d4d4c; display: block; margin: 0px; overflow-y: auto; padding: 0.5em;"><a href=<span class="string" style="color: #718c00; margin: 0px; padding: 0px;">"big/image.jpg"</span> title=<span class="string" style="color: #718c00; margin: 0px; padding: 0px;">"My Caption"</span>><br /> <span class="xml" style="margin: 0px; opacity: 0.5; padding: 0px;"><span class="tag" style="color: #c82829; margin: 0px; padding: 0px;"><<span class="title" style="margin: 0px; padding: 0px;">img</span> <span class="attribute" style="margin: 0px; padding: 0px;">src</span>=<span class="value" style="color: #718c00; margin: 0px; padding: 0px;">"small/image.jpg"</span> <span class="attribute" style="margin: 0px; padding: 0px;">alt</span>=<span class="value" style="color: #718c00; margin: 0px; padding: 0px;">"image"</span>></span><br /><span class="tag" style="color: #c82829; margin: 0px; padding: 0px;"></<span class="title" style="margin: 0px; padding: 0px;">a</span>></span></span></code></pre><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;">Like the rest of the plugins in this collection, it can be customized entirely with CSS.</div><div class="wp-caption alignnone" id="attachment_2756" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://brutaldesign.github.com/swipebox/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Swipebox" class="size-full wp-image-2756" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0004_46.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Swipebox" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Swipebox</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">37. TiltShift.js</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://www.noeltock.com/tilt-shift-css3-jquery-plugin/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">TiltShift.js</a> (<a href="https://github.com/noeltock/tiltShift.js" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a neat plugin that replicates the tilt-shift effect (which causes real-life object to appear as miniatures) using CSS3 image filters. The bad news is that this only works on Chrome and Safari at the moment, but support should gradually land in other browsers as well.</div><div class="wp-caption alignnone" id="attachment_2755" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://www.noeltock.com/tilt-shift-css3-jquery-plugin/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="TiltShift.js" class="size-full wp-image-2755" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0003_47.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="TiltShift.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">TiltShift.js</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">38. Threesixty.js</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://nick-jonas.github.com/threesixtyjs/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Threesixty.js</a> (<a href="https://github.com/modernassembly/threesixtyjs/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a jQuery plugin that creates draggable 360 degree views. You have to provide the plugin with the path to a collection of images of your product (shot from different angles) and Threesixty.js will assemble them into a interactive view. You can drag or use the arrow keys to explore the object from different angles.</div><div class="wp-caption alignnone" id="attachment_2754" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://nick-jonas.github.com/threesixtyjs/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Threesixty.js" class="size-full wp-image-2754" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0002_48.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Threesixty.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Threesixty.js</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">39. Swipe.js</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://swipejs.com/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Swipe.js</a> (<a href="https://github.com/bradbirdsall/Swipe" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is another responsive slider. What makes it stand apart is that it is specifically targeted at touch devices. This allows it to not only understand gestures, but to also react to touch similarly to a native application. It has resistant bounds and  scroll prevention and is compatible with browsers from IE7 onward.</div><div class="wp-caption alignnone" id="attachment_2803" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://swipejs.com/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Swipe.js" class="size-full wp-image-2803" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/swipe.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Swipe.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Swipe.js</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">40. CamanJS</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://camanjs.com/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">CamanJS</a> (<a href="https://github.com/meltingice/CamanJS/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a powerful image manipulation library, built on top of the canvas element. With it, you can manipulate the pixels of an image and achieve an almost Photoshop-like control. If you can remember, this is the library we used a few months ago to build a <a href="http://tutorialzine.com/2013/02/instagram-filter-app/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;" target="_blank">web app with filters similar to Instagram</a>.</div><div class="wp-caption alignnone" id="attachment_2753" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://camanjs.com/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="CamanJS" class="size-full wp-image-2753" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0001_49.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="CamanJS" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">CamanJS</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">41. SpectragramJS</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://lab.adrianquevedo.com/jquery-spectragram/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Spectragram</a> (<a href="https://github.com/adrianengine/jquery-spectragram" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a jQuery plugin that aims to make working with the Instagram API easier. It can fetch user feeds, popular photos, photos with specific tags and more.</div><div class="wp-caption alignnone" id="attachment_2752" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://lab.adrianquevedo.com/jquery-spectragram/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="SpectragramJS" class="size-full wp-image-2752" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0000_50.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="SpectragramJS" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">SpectragramJS</div></div><h3 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; margin: 1.5em 0px 0.75em; padding: 0px;">Misc</h3><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;">This section holds plugins and libraries that don’t belong in the other categories but are worth the look.</div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">42. jQuery Countdown</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://tutorialzine.com/2011/12/countdown-jquery/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;" title="Making a jQuery Countdown Timer">jQuery Countdown</a> (<a href="http://demo.tutorialzine.com/2011/12/countdown-jquery/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">demo</a>) is a jQuery plugin that shows the remaining days, hours, minutes and seconds to an event, and updates the remaining time with an animation every second. It is easy to use – include the plugin JS and CSS files, and trigger it on document ready:</div><pre class="brush:js" data-lines="1 2 3 " style="background-color: white; color: #666666; font-size: 0.8em; margin-bottom: 1.5em; padding: 0px; position: relative; word-wrap: normal;"><code class="javascript" style="border: 1px solid rgb(249, 249, 249); color: #4d4d4c; display: block; margin: 0px; overflow-y: auto; padding: 0.5em;">$(<span class="string" style="color: #718c00; margin: 0px; padding: 0px;">'#countdown'</span>).countdown({<br /> timestamp : <span class="keyword" style="color: #8959a8; margin: 0px; padding: 0px;">new</span> Date(<span class="number" style="color: #f5871f; margin: 0px; padding: 0px;">2015</span>, <span class="number" style="color: #f5871f; margin: 0px; padding: 0px;">0</span>, <span class="number" style="color: #f5871f; margin: 0px; padding: 0px;">3</span>) <span class="comment" style="color: #8e908c; margin: 0px; padding: 0px;">// January 3rd, 2015</span><br />}</code></pre><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;">The countdown will be presented in the <strong style="margin: 0px; padding: 0px;">#countdown</strong> div.</div><div class="wp-caption alignnone" id="attachment_2780" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://demo.tutorialzine.com/2011/12/countdown-jquery/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="jQuery Countdown" class="size-full wp-image-2780 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0028_22.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="jQuery Countdown" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">jQuery Countdown</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">43. List.js</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://listjs.com/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">List.js</a> (<a href="https://github.com/javve/list/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a library that enhances a plain HTML list with features for searching, sorting and filtering the items inside it. You can add, edit and remove items dynamically. List.js is standalone and doesn’t depend on jQuery or other libraries to work.</div><div class="wp-caption alignnone" id="attachment_2767" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://listjs.com/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="List.js" class="size-full wp-image-2767 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0015_35.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="List.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">List.js</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">44. jQuery PointPoint</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://tutorialzine.com/2011/09/jquery-pointpoint-plugin/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">jQuery PointPoint</a> (<a href="http://demo.tutorialzine.com/2011/09/jquery-pointpoint-plugin/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">demo</a>) is a plugin that helps you draw users’ attention to a specific part of the page. It presents a small arrow next to the mouse cursor. This can be useful for pointing to missed form fields, buttons that need to be pressed, or validation errors that need to be scrolled into view.</div><div class="wp-caption alignnone" id="attachment_2770" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://demo.tutorialzine.com/2011/09/jquery-pointpoint-plugin/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="jQuery PointPoint" class="size-full wp-image-2770" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0018_32.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="jQuery PointPoint" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">jQuery PointPoint</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">45. Social Feed</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://gitbox.ru/Social-feed/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Social Feed</a> (<a href="https://github.com/pavelk2/social-feed" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a jQuery plugin that presents a feed of the latest public updates on your social accounts. It has a clean design that is built using a template, which you can easily customize.</div><div class="wp-caption alignnone" id="attachment_2766" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://gitbox.ru/Social-feed/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Social Feed" class="size-full wp-image-2766" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0014_36.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Social Feed" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Social Feed</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">46. Hook.js</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://usehook.com/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Hook.js</a> (<a href="https://github.com/jordansinger/Hook.js" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is an interesting experiment that brings the “pull to refresh” feature you often see in mobile apps, to the web. You can use this to update your mobile site with new content, fetch new posts and more.</div><div class="wp-caption alignnone" id="attachment_2765" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://usehook.com/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Hook.js" class="size-full wp-image-2765" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0013_37.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Hook.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Hook.js</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">47. jQuery PercentageLoader</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://widgets.better2web.com/loader/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">PercentageLoader</a> (<a href="https://bitbucket.org/Better2Web/jquery.percentageloader" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;" target="_blank">bitbucket</a>) is a jQuery plugin for displaying a progress widget in more visually striking way than the ubiquitous horizontal progress bar / textual counter. It makes use of HTML5 canvas for a rich graphical appearance with only a 10kb (minified) javascript file necessary, using vectors rather than images so can be easily deployed at various sizes.</div><div class="wp-caption alignnone" id="attachment_2764" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://widgets.better2web.com/loader/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Loader.js" class="size-full wp-image-2764 " height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0012_38.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Loader.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Loader.js</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">48. Chart.js</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://www.chartjs.org/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Chart.js</a> (<a href="https://github.com/nnnick/Chart.js" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a new charting library that uses the HTML5 canvas element and provides fallbacks for IE7/8. The library supports 6 chart types that are animated and fully customizable. Chart.js doesn’t have any dependencies and is less than 5kb in size. Say goodbye to flash!</div><div class="wp-caption alignnone" id="attachment_2763" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://www.chartjs.org/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Chart.js" class="size-full wp-image-2763" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0011_39.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Chart.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Chart.js</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">49. Tooltipster</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://calebjacob.com/tooltipster/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Tooltipster</a> (<a href="https://github.com/iamceege/tooltipster" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a powerful jQuery plugin for displaying tooltips. It works on desktop and mobile browsers, gives you full control over the contents of the tooltips and supports a number of callback functions so you can hook it into your application. If you need something even more lightweght that doesn’t use JS at all, you can give a try to <a href="http://kushagragour.in/lab/hint/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">hint.css</a>.</div><div class="wp-caption alignnone" id="attachment_2762" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://calebjacob.com/tooltipster/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Tooltipster" class="size-full wp-image-2762" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0010_40.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Tooltipster" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Tooltipster</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">50. Toolbar.js</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://paulkinzett.github.com/toolbar/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">Toolbar.js</a> (<a href="https://github.com/paulkinzett/toolbar" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is a jQuery plugin that lets you display a neat pop-up menu. You can choose the actions and icons that are presented in the menu and listen for events. This is perfect for making more of the limited space of a mobile web app interface.</div><div class="wp-caption alignnone" id="attachment_2761" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://paulkinzett.github.com/toolbar/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Toolbar.js" class="size-full wp-image-2761" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0009_41.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Toolbar.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Toolbar.js</div></div><h4 style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 0px 0px 1em; padding: 0px;">51. gmaps.js</h4><div style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.5em; padding: 0px;"><a href="http://hpneo.github.com/gmaps/" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">gmaps.js</a> (<a href="https://github.com/hpneo/gmaps" style="color: #d23f4d; margin: 0px; outline: none; padding: 0px;">github</a>) is such a useful library that I decided to include it in addition to the 50 plugins above. Gmaps is a powerful library that makes working with Google Maps a great deal easier. You can place markers, listen for events, set the coordinates, zoom level and more, all with a fluid jQuery-like syntax. This is like a breath of fresh air compared to the regular maps JS API, and I highly recommend it.</div><div class="wp-caption alignnone" id="attachment_2760" style="background-color: white; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; margin: 2em auto; padding: 0px; text-align: center; width: 630px;"><a href="http://hpneo.github.com/gmaps/" style="color: #d23f4d; display: inline-block; margin: 0px; outline: none; padding: 0px;" target="_blank"><img alt="Gmaps.js" class="size-full wp-image-2760" height="400" src="http://cdn.tutorialzine.com/wp-content/uploads/2013/03/i_0008_42.jpg" style="border: none; box-shadow: rgb(136, 136, 136) 0px 0px 1px; display: block; height: auto !important; margin: 0px; max-width: 100%; padding: 0px; width: auto !important;" title="Gmaps.js" width="620" /></a><div class="wp-caption-text" style="color: #777777; font-size: 13px; margin-bottom: 1.5em; padding: 5px 0px 0px;">Gmaps.js</div><div><br /></div></div>

50 Amazing jQuery Plugins That You Should Start Using Right Now

jQuery has a wonderful community of programmers that create incredible things. However, it may become difficult to sift through everything t...

Read more »