15 Awesome jQuery Animation Plugins


There’s no doubt about it, animation is pleasing to the eye. When a computer user thinks about Animation, "Flash" is often the first program that comes to mind. However, computer savvy folks know that Flash is already the history of animation, today there are newer more powerful tools and technologies for generating animations. jQuery has several plugins for creating various types of animation with ease. This post lists 15 awesome jQuery animation plugins for animating various DOM objects, images, page titles and text. Some plugins also allows you to generate animations like star effects, fireworks, explosions, cross fading, gradients and various text effects. Enjoy!

RollingBorder is a jQuery and CSS3 based plugin for showing focus status by adding a rolling border to the container. It also makes use of the CSS3 @keyframe rule. The @keyframes CSS rule allows you to control the intermediate steps in a CSS animation sequence by establishing keyframes along the animation sequence that must be reached by certain points during the animation.

Reanimator is a lightweight jQuery plugin that allows you to create image-based slideshow movies. These movies are intended to be embedded into larger scrolling content, and will animate as you scroll the page. This is different than a regular slideshow as the image cycling happens upon page scrolling and has no specific transitions so it's super smooth and provides swift performance. Remember, it is based on the idea of scrolling the page content to activate the animations. If the page has insufficient content for scrolling, the effect will be greatly diminished.

Bringins is a jQuery plugin that is implemented to show the contents on a webpage as an animated page. These pages will be positioned 'fixed' with scrollable data. You can have your custom CSS content appear in the bringins pages. This plugin allows you to choose from three possible intro animations: animate on the left, right or center of the webpage. The plugin also provides options to specify the color of the page, width, z-index, margin and color of the close button for the page.

Textflow is a simple jQuery plugin for showing animated texts. You can pass the texts as a simple comma separated string or in an array of texts through the settings in code. Alternatively, you can also pass a comma separated string in the data-texts option. This will override the settings defined in the code.
5. jStars

jStars is a simple and lightweight jQuery plugin that implements effects to show shine stars on mouse hover over some page elements. The plugin creates the stars effect on mouse move for elements from jQuery selector. The plugin has different styles of stars (in different colours) so you can choose what style suits your site’s background colour best. It is compatible with all of the latest browsers, including: Firefox, Google Chrome, Safari, and Internet Explorer 9+.

animateClick is a jQuery plugin that allows you to produce animations triggered by mouse clicks. animateClick comes with 5 animations for enhancing your button clicks or clicks on any element in your webpage. The plugin allows you to define the colour and size of the animations as well.

Fireworks is a simple and configurable jQuery plugin used to create dazzling fireworks animations with explosions. You can also add sound effects to the fireworks if it suits your webpage.

Magic Display is a jQuery plugin that makes the content of your website appear only upon scrolling of the page. Using Magic display is very simple, you only need to initialise the plugin and then add class ‘.magic-display’ to each element you want to animate. It also supports setting the duration of the animation. The default is 1 second.

Granim.js a small and lightweight jQuery plugin used to create fluid and interactive gradient animations. It supports basic gradient animations, radial gradient animations, gradients with an image and gradients with an image mask.
spriteAnimator is a simple jQuery sprite animation plugin which allows you to create an image sequence animation using background sprites. Define an html-tag on the page and give it a sprite-sheet as the background-image. Then attach the spriteAnimator plugin on the jQuery wrapper, providing some information about the sprite-sheet and where it should appear on the page. Finally, call .play() on it with some optional parameters.

Page Crossfade is a jQuery/CSS3 plugin that creates a crossfade effect when navigating between pages. Content fades in with CSS3 animation, and fades out with jQuery. Your page will still work with JavaScript disabled. The CSS for this plugin is not supported by Internet Explorer 9 or any previous programs. My suggestion is to only serve this CSS to modern browsers, with Modernizr or another solution. You can control the duration and easing of the animation in the file pagecrossfade.css.

Typewriter is a lightweight jQuery plugin that types text, erases, and emulates terminal typing style. It works on an array of texts, with prefix and blinking cursor support. It is an ideal choice for displaying rotating text on a website.
13. Boomjs
Boomjs is a lightweight, configurable jQuery plugin which can add an explosion animation to the DOM object. It simply breaks the object into smaller pieces which creates an explosion animation.

AnimateCSS.js is a compact jQuery plugin which makes it easier to use the Animate.css plugin with jQuery. Using this plugin, one can apply any animate.css effect, add custom duration, or add an optional delay before animation. It also provides a callback when the animation is completed.

mFancyTitle is a jQuery plugin that allows you to animate your document <title> & favicon easily with style. This is quite useful when your document title is too long and doesn’t fit in the browser title display space. It also allows you to add a title that is only displayed when the user leaves the page and opens another tab in the browser. Similarly, the favicon icon can also be changed when a user leaves the site.

Conclusion

To conclude, these jQuery animation plugins can help to animate specific DOM objects, letters and images. These plugins can also generate effects like fireworks, explosion, stars and animate the container’s border. These plugins are easy to integrate, they only require you to download their library, include attribution, and make a call to the library from your code. These plugins are all pretty lightweight and offer great customization to modify the default implementation.












7 Lightweight jQuery Plugins for File Uploads

Creating your own file uploading functionality on your website is more trouble than its worth in most scenarios.  With dozens of different free, lightweight, and customizable jQuery plugins available to add that functionality to your site, there's even less reason to try and do it for yourself. Take a look at the list below of some of the best jQuery file upload plugins around and see if any of them are right for your project.

1. Uppy

Uppy is a lightweight, sleek file uploader that has a beautiful user interface and a very nice and modern design.



Dropzone is a file upload plugin that comes with drag and drop functionality. Your users simply have to drop the images or files into the designated drop zone and they'll be good to go. The plugin also has support for image previews.



This file upload plugin supports multiple file selection and drag and drop functionality. It also includes a progress bar so your users will know roughly how much time is left in their upload.


Fine Uploader is a feature-rich file uploading plugin that gives your users the ability to upload all your files easily. It has a drag and drop feature, a retry option for when a file fails to upload the first time around, a progress bar, and more.



This plugin provides you with simple code that will allow your users to upload an image and preview the image before upload.


This simple file uploader comes with drag and drop functionality and with progress bar support, as well as the option to cancel any upload before it completes.


jQuery File Upload plugin has drag and drop support, allows for multiple or single file uploads, has a progress bar feature, and shows image previews.







8 Free jQuery Responsive Menu Plugins

Coding your own custom responsive menu can definitely be more trouble than it's worth. If you're looking for an easy way to implement responsive menus on your site, using a jQuery plugin to do so is probably the way to go. What follows is a list of some of the best free jQuery responsive menu plugins around. 

1. sidr


Sidr is a free jQuery plugin that creates responsive side menus for your sites. You can add the side menu to both sides of your pages (left and right), and when your page is viewed on a mobile device they'll slide out from the side smoothly using CSS transitions.



Scrollnav is a lightweight jQuery plugin that breaks up the existing content on your page into easily navigable sections, and presents the navigation options in a fully responsive and customizable navigation menu.



Flaunt.js is a plugin that can be used to create hamburger-style responsive menus that have support for dropdown menus so that the menu works just as smoothly on mobile as it does on desktop.



Scotch Panels is another plugin that creates sliding side menus. This plugin is super customizable and gives you lots of options for positioning and sizing of the menus, as well as options for customizing the smooth CSS transitions.



Smart levels creates a responsive menu with mutli-level support for dropdowns. The plugin offers plenty of options in terms of customization. 



If you're working with a one page site, slinky.js is a very unique and cool way of implementing a responsive menu. It creates stackable headers that becomes fixed to the top of the screen as you scroll past them. These headers become the navigation for the page. A different and flexible way of handing responsive navigation. 



This plugin transforms your entire page to reveal a menu "behind" it. This reveal can happen as a result of a trigger event. Another unique way to handle implementing a responsive navigation to your pages. The plugin comes with lots of options for customization.


This navigation plugin manipulates the spacing of your navigation items so that they always take up the full width of the container. The plugin isn't responsive out of the box, but it comes with a customization option to make it responsive with the addition of one line of code.








jQuery: Multiple methods of converting table data to CSV data

jQuery: Multiple methods of converting table data to CSV data
The HTML table is the preferred DOM element for displaying data in tabular format because it provides a simple yet attractive look and feel that catches user attention. HTML tables are handy tools that respond easily to various events, such as row click. Sometimes, as part of a project the end user may want to download the data presented in the table for later reference. In this post, we’ll look at how to convert HTML table data into CSV format, allowing the user to easily download the content.
There are jQuery plugins available which can do the job but first we will look at how to do it with jQuery code. A simple rule of thumb is that if something can be achieved with jQuery code, then you should always employ that method rather than using a jQuery plugin.

HTML

Within the table elements there is a hyperlink to “Download CSV” which will convert the HTML table data to CSV and then prompt you to save the CSV file as well:
<a href="" download="Data.csv" id="btnDownload">Download CSV</a>
Here the ‘download’ attribute specifies that the target will be downloaded when you click on the hyperlink. This attribute is only used if the href attribute is set. The value of the attribute will be the name of the downloaded file.

jQuery Code

The jQuery code will have a click event attached to the btnDownload hyperlink defined in HTML. Within the click event:
  • Define global array variable: arrCSVData. This variable will be used to store data after each HTML table row iteration
  • Loop through all the rows of the table element
  • This process will also check for header row. Column names in header rows are then pushed into the arrCSVData variable
  • Next, loop through all td elements inside header rows and push them into an array arrData.
  • Once inside looping is finished, use the Array.join() method to form a comma separated string  
  • After the table row loop is complete, arrCSVData variable holds all the table data. Now, again using the Array.join() method, we will convert it into a string (this time using new line character).
  • Now we have a valid CSV formatted string in csvData variable.
  • Finally, create the URL that will be set to the href attribute. Set the data to application/csv so that the browser comes to know what is going to be downloaded. Encode the final CSV data before appending it in the URL using encodeURIComponent.
Here is the complete jQuery code:
$(document).ready(function() {
   $('#btnDownload').click(function(e)
   {
     var arrCSVData = [];
     var sVal = '';
     $("#tblData").find("tr").each(function () 
     {
       if ($(this).find("th").length) 
       {
         var arrData = [];
         $(this).find("th").each(function () {
           sVal = $(this).text().replace(/"/g, '""');
           arrData.push('"' + sVal + '"');
         });
       arrCSVData.push(arrData.join(','));
      }
      else 
      {
        var arrData = [];
        $(this).find("td").each(function () {
         sVal = $(this).text().replace(/"/g, '""');
         arrData.push('"' + sVal + '"');
       });
       arrCSVData.push(arrData.join(','));
      }
   });
      var csvData = arrCSVData.join('\n');
var downloadURL= 'data:application/csv;charset=UTF-8,' +  
encodeURIComponent(csvData);
      $(this).attr("href", downloadURL);
   });
});
Simple and easy.  If you don’t wish to include a header row, then remove the following portion from the above jQuery code:
if ($(this).find("th").length) 
{
var arrData = [];
      $(this).find("th").each(function () {
      sVal = $(this).text().replace(/"/g, '""');
           arrData.push('"' + sVal + '"');
});
arrCSVData.push(arrData.join(','));
}
If you would prefer not to work in the code, there are also a couple of jQuery plugins available which can do the job. These plugins also provide more flexibility and control over the CSV generation and downloading, which can be beneficial:
  1. tabletoCSV
  2. TableCSVExport
  3. table2CSV 
These jQuery plugins are easy to use. Visit their website for more information including how to use and integrate them in jQuery.

Conclusion


To sum it up, the functionality to convert table data to CSV can be achieved with simple jQuery code. However, if you want some more flexibility and don’t wish to write your own implementation, then the jQuery plugins listed above can also be employed. 

Top 8 jQuery Plugins for Ecommerce Sites

If your site is in the ecommerce sphere, then chances are that there are a lot of plugins that might be of interest to you. Not only would plugins be able to add functionality to your sites, but they'd do so easily and cheaply (and often for free!). if you're looking to add more functionality or features to your ecommerce site, take a look at the list of the top 8 ecommerce-related plugins below to see if any of them are right for your projects.

1. Product Colorizer


If you're offering a product that comes in many different colors, this plugin is perfect for you. Not only does it give your users the chance to see your product in all of its available colors, but it also lets you totally customize the options so that the user can mix and match with color combos (for example, in the case of the screenshot above, the user can customize both the color of the shirt AND the color of the text using the functionality that this plugin provides).



Cloud Zoom is a beautiful plugin that will allow your users to really zoom in on all of your product images. The zoom is effect is super smooth and very well executed. The plugin isn't free, but it's a great functionality to have on your site, and depending on the types of products you're selling, it's totally worth the investment.

3. Reel


Reel is a panorama plugin that supports stitched panoramas and can be used to show your customers interactive 360 degree representations of your products. Check out the demo to see how you can use the cursor to spin your products all the way around so that they can be viewed from every angle. 




This plugin creates an expanding, dynamic shopping cart effect. It shows your cart (or your basket, whatever you choose to call it) by having it expand onto your current page, so your user doesn't need to stop browsing in order to view the contents of their carts. The plugin isn't particularly stylish, but it's completely customizable and a great functionality to add to your sites.

5. jQuery Shop Locator


jQuery Shop Locator is a great way to allow your customers to find your shop locations on a map. It comes loaded with 9 design styles and allows you to include an unlimited number of maps on one single page. It costs $10, but that's well worth the investment for this type of advanced, specific map functionality.

6. Tipsy


If you want to add tooltip functionality to your ecommerce site, Tipsy is definitely the way to go. With plenty of options for customizations, this plugin gives you ample opportunities to include clean and smooth tooltips on your site.



A great way to display content on your site is by using a carousel plugin. This one in particular includes smooth transitions and beautifully styled (though totally customizable) pieces of content that rotate like a carousel of images on your site.



Simple Cart is a beautiful, user-friendly plugin that allows you to add a simple shopping cart to your sites. It's built using HTML and JavaScript and has lots of easy options for payment gateways.