Effects

68 articles

JavaScript Image Manipulation Library: CamanJS

CamanJS is an HTML canvas image manipulation JavaScript library with a very easy to use interface and a webworkers backend. CamanJS is not a canvas drawing library, it's main focus is manipulating images, not drawing new content. It provides much of the basic functionality you would find in something like Photoshop (image contrast, brightness, levels, saturation, etc.) This Javascript image manipulation…

Orientate An Element Based On The Mouse Position: zLayer

zLayers is a jQuery plugin that allows you to orientate an element based on the position of your mouse to the page’s window, or element’s parent. zLayer is perfect for interactive illustrations and rich user experience through creative methods. Its lighweight, easy to use and customize. Requirements: jQuery Library Website: http://www.devinrolsen.com/jquery-zlayers-plugin/ License: Free to use

Awesome Scrolling Navigation Using jQuery

A nice tutorial on creating an awesome scrolling navigation using jQuery. The main thing it does differently is to have the logo and logo background elements move at different animation speeds from each other and the main content. This effect is is similar to Parallex scrolling and gives the website more interest, depth and flair. Requirements: jQuery Library Website: http://www.thewayithink.../create-an-awesome-scrolling-navigation... Demo: http://www.thewayithink.co.uk/ie8/book/flipboard.html…

Character And Background Sprite Animations: jQuery Spritely

jQuery.spritely is a jQuery plugin for creating dynamic character and background animation in pure HTML and JavaScript. Its a great alternative to Flash if your desired platform does not support Flash. It's a simple, light-weight plugin which adds sprite() and pan() to your objects. With few simple methods, you can create animated sprites such as flying birds and dynamic scrolling backgrounds. It…

Inline Form Labels With CSS3 & JavaScript

Ever tried creating inline form labels that don't suck, using CSS3 and some simple javascript? Zurb is  sharing a tutorial that shows the best practices to create inline form labels. It works best in Safari 4.x and Chrome 5. In Firefox you won't see the label fading back (transition). Website: http://www.zurb.com/playground/inline-form-labels License: Free

Fly Off Page: Make Your Selected Elements Fly Off The Page

Fly Off Page is a jQuery plugin that will take selected elements and make them fly off the page in a random or pre-defined direction. Customizable options include duration (of the animation), direction, tween (extend animation) and ‘retainSpace’ which allows you to retain, disregard or animate-out the space that the specified element once took up. Requirements: jQuery Library Website: http://james.padolsey.com/javascript/new-jquery-plugin-fly-off-page/…

Create Awesome CSS3 Animations With Sencha Animator

Sencha Animator is a powerful desktop application with an intuitive graphical user interface (GUI), including an interactive timeline and object property controls to create awesome CSS3 animations for WebKit browsers and touchscreen mobile devices. With Sencha Animator, you can create CSS3 ads that rival rich-media ads made with traditional desktop applications. You can animate text and images with smooth transitions, design…

Pixelate Any Image Using HTML5 Canvas: Close Pixelate

Close Pixelate helps you pixelate any image using an HTML5 canvas element. Users can control the output of the rendering by passing in an array of options, like: Resolution (The distance in pixels between rendered pixels) The shape of the pixel (square, circle or diamond) Alpha (A decimal value for the opacity of the rendering) Requirements: HTML5 enabled browser Website:…