Animate.css – Cool CSS Transitions

Animate.css is a collection of over fifty CSS animations including: flash, bounce, shake, pulse, swing, flip, rotate, fade and much more.

To animate a CSS element, all that is required is to attach the animate.css stylesheet and add the class “animated” & any animation name to the element.

When animate.css is combined with jQuery, elements can be animated with events by adding the class name to the element.

There is also a tool for creating your own custom build of the style sheet so you can select only the required animations for your project.

Fallr – jQuery Modal Dialog with Lots of Features

Fallr is an easy to use jQuery dialog plugin with lots of features and a clean interface.

It can be used to replace JavaScript alerts, prompts & confirmations as well as more advanced features such as:

  • Forms.
  • Content in an iframe.
  • With or without a modal overlay.
  • Special effects such as blink and shake.
  • On the fly resizing and positioning.
  • Full screen.

It requires a commercial license which costs $5 from code canyon.

Create an Excel Style Table Editor with jQuery & Handsontable

Handsontable is a jQuery plugin that can create an editable Excel or Google Spreadsheet style table from data stored as a JavaScript array.

It features:

  • Auto expanding editable cells.
  • Legends.
  • Scrollable in a container.
  • Fill handle to drag content to new cells.
  • Autocomplete (when used with the bootstrap type ahead plugin).
  • Context menu to modify rows and columns
  • Callbacks to do things like validate and save data back to a database.

It also has a number of options and methods that are well documented on github.

Backbone.Notifier – jQuery Notifications Framework

Backbone.Notifier is a jQuery notifications framework with lots of features that requires backbone,js and underscore.js.

Among its features are:

  • Top screen and centered notifications.
  • Pre-defined styles: default, info, error, warning, success.
  • Ability to set custom styles easily via CSS and js API.
  • Ability to set default options and multiple notifiers with different sets of defaults.
  • Supports buttons with easy events binding which also makes the notifications an input method.
  • Dialog style with titles.
  • Modal notifications.
  • Animations (which can be adjusted or turned off).
  • Integrated animated loader.
  • Customise timing for hiding messages.
  • Extendable with modules architecture and includes 3d module.

It currently has large number of options to customise the timing, style, size & position with even more features being added in the future.

Holder – Create JavaScript Image Placeholders

Holder is a lightweight (4kb) JavaScript image placeholder library that uses canvas to display the placeholders.

Themes can be used to style the placeholders which consist of a background colour, foreground colour and minimum font size.

To use a specific theme, the placeholder is displaying using:

<img data-src="holder.js/100x200/theme">

Although, an image can be customised individually using:

<img data-src="holder.js/100x200/#000:#fff">

Pines Notify – Bootstrap & jQuery UI Notifications Plugin

Pines Notify is a jQuery notifications plugin that uses either Bootstrap or jQuery UI for theming.

One of it’s unique features is that it is non-blocking in that the user is able to click elements behind the notice.

The notices can be customised in just about every way supporting:

  • Notice, success, error & info message types
  • Positioning
  • Transitions
  • Timing

The demo’s provide example uses of the above features.