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 …
Archive for 2013
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 !
blueimp jQuery File Upload
File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery. 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.) that supports standard HTML form file uploads.
FaceBox, The Lightbox Connected on All! with jQuery
This lightbox will leave your site connected to all social networks. With the facebook comments plugin, all users can interact with your page. After all, there are buttons for sharing to other networks such as Facebook, Google Plus, Twitter, LinkedIn, Pinterest. This lightbox will open any type of content, images, text, iframes, ajax content, videos, youtbube, vimeo and flash.
GSAP JS : Professional-Grade JavaScript Animation Library
Animating with code may seem intimidating at first, but don’t worry – the GreenSock Animation Platform (GSAP) was engineered to make it simple and intuitive. The platform is also highly optimized for performance and unprecedented flexibility. Hang in there through the learning curve and you’ll be glad you did.
The GreenSock Animation Platform is a suite of tools for scripted animation. It includes:
- TweenLite: the core of the engine which handles animating just about any property of any object. It is relatively lightweight yet full-featured and can be expanded using optional plugins (like CSSPlugin for animating DOM element styles in the browser, or ScrollToPlugin scrolling to a specific location on a page or div, etc.)
- TweenMax: think of it like TweenLite’s beefy big brother; it does everything TweenLite can do plus non-essentials like repeat, yoyo, repeatDelay, updateTo(), etc. It includes many common plugins too like CSSPlugin so that you don’t need to load as many files. The focus is on being full-featured rather than lightweight.
- TimelineLite: a powerful, lightweight sequencing tool that acts like a container for tweens, making it simple to control them as a whole and precisely manage their timing in relation to each other. You can even nest timelines inside other timelines as deeply as you want. This allows you to modularize your animation workflow easily.
- TimelineMax: extends TimelineLite, offering exactly the same functionality plus useful (but non-essential) features like repeat, repeatDelay, yoyo, currentLabel(), and many more. Again, just like TweenMax does for TweenLite, TimelineMax aims to be the ultimate full-featured tool rather than lightweight.
- Extras like easing tools, motion paths, plugins, blitting tools, and more
jQuery jAutocomplete Plugin
jAutocomplete is a flexible jquery plugin that provides suggestions while you type into the field:
Features:
- JSON data source (local data array / AJAX)
- Supports any HTML structure with next-generation jQuery Templates
- Lightweight (only 3Kb)
- Fully customizable styles
- Works in all major browsers
- Annotated source code
- JSDoc documentation
