Css3-like easings for jQuery animations
- Tweak the shape of easings
- Compatible with Css3 easings
- Small (less than 2kB minified)
- Fast (uses lookup tables)
jQuery.Ruler : Add Photoshop-like rulers and Mouse position
Add Photoshop-like rulers and mouse position to a container element using jQuery. jQuery.Ruler is a jQuery plugin born out of sheer curiosity and on a whim. It dynamically places rulers on the x & y axes, with tick marks every 5 pixels & labels every 50 pixels. Should you wish, there are options to enable tracking of the cursor position with a crosshair and/or a box showing the coordinates within the ruler space.
Rainbow : Code Syntax highlighting library written in Javascript
Rainbow is a code syntax highlighting library written in Javascript. It was designed to be lightweight (1.4kb), easy to use, and extendable.
It is completely themable via CSS. Rainbow on its own is very simple. It goes through code blocks, processes regex patterns, and wraps matching patterns in tags. All the theming is left up to CSS.
Zalki Hover Image : jQuery Plugin
Zalki Hover Img – is a jQuery plugin for image hover animations. Cross browser even IE 7 (even opacity).Easy to use and customize. Supports thirty animation effects from jQuery Easing. No need to adjust the size of the container. The plugin will determine the size of your photos and will automatically adjust the settings, even if on the same page there are photos of various sizes. You can change the appearance of pop-up elements. You can embed your icons, you can adjust the speed of the animation, you can change the color, shape, size …
jQuery Retina Plugin
A jQuery plugin for swapping out images with images scaled for retina displays.Retina based devices (iPhones, iPads, and soon many more mobile devices and desktops) make images look pretty crummy. A fix to this is to swap out the image for one that is twice the size. For example, if your image is 300px wide and 200px tall, you’ll want to display an image that is 600px wide and 400px tall – even though it still takes up 300x200px of screen real estate.
There are a number of scripts that already do this. However, they didn’t provide me the file name flexibility that I required. I wanted a script that would work on platforms like Drupal, WordPress as well as custom systems.
Nested : jQuery Gap free, Multi column Grid layout Plugin
Nested is a jQuery plugin which allows you to create multi-column, dynamic grid layouts. Unlike other libraries and jQuery plugins similar to Nested, this is (as far I as I’ve know) the first script out there that allows you a complete gap-free layout.
It creates a matrix of all elements and creates a multi column grid, similar to other libraries and scripts out there. Then it scans the maxtric for gaps and tries to fill them by reordering the elements. This is exactly how I’ve seen other newer libraries, scripts and modifications behave but if you stop here, the result will sometime leave unwanted gaps as well. That is why I added the last step, an option to resize any element at the bottom of the grid that is bigger (or smaller if you prefer) than the gap to make the grid completely gap-free.
Make a Web App with Instagram-like Filters in jQuery & CamanJS
In this tutorial, we are going to make a simple web app that allows you to drag a photo from your computer into the browser window, and apply instagram-like filters on it. For this purpose we are going to use a number of JavaScript libraries and plugins:
- Caman.js – this is a powerful canvas manipulation library that allows you to apply various effects and filters on an image. It comes with 18 preset filters which we will be using in this example (you can create more if you wish);
- Filereader.js – this is a lightweight wrapper around the HTML5 drag/drop events that makes them much easier to work with. It also adds a method to jQuery, so you can bind the events to a specific element;
- jQuery Mousewheel – I am using this plugin to scroll the filter container;
- In addition, we are using the latest version jQuery at the time of writing.
cgSceneGraph : JavaScript & HTML5 Powerful, cross-platform Animation framework
The cgSceneGraph is a powerful, cross-platform and very easy-to-use animation framework written in JavaScript for the <canvas> tag in HTML5.It’s full object oriented to ease the development of your applications and games.
The power of the framework is inside its concept : the framework itself does not render anything, and provides a lot of cool and useful features. It was designed to be extended : you can use or create an infinite number of extensions of the node class (CGSGNode) to be rendered. You are not, and won’t never be, limited to what the framework provides by itself because it is designed to be extended !