9 Really Impressive jQuery Plugins with Canvas, SVG and CSS3

Written by Kevin Liew on 02 Jul 2012
55,053 Views • Inspirations

Introduction

jQuery plugin development is growing at a staggering speed. Thanks to the poweful and easy to use jQuery framework, it's making our life so much easier! Apart from jQuery, due to the fall of flash, HTML5/CSS3 and powerful web browsers, javascript has gained control of the interactive part of website. In this post, we have found 10 really impressive jQuery plugins that utilise the newest technology to bring what was impossible few years ago, possible.

  • jSignaturejSignaturejSignature is a JavaScript widget (a jQuery plugin) that simplifies creation of a signature capture field in a browser window, allowing a user to draw a signature using mouse, pen, or finger.
  • Scoll EffectsScroll EffectA cool CSS3 scroll effect from @hakimel.
  • SigmaJSSigmaJSsigma.js is an open-source lightweight JavaScript library to draw graphs, using the HTML canvas element. It has been especially designed to display interactively static graphs exported from a graph visualization software - like Gephi and display dynamically graphs that are generated on the fly
  • Refine SlideRefine SlideA slider with CSS transition & 3D trasnform support. It comes with Javascript fall back fade transition, and responsive down to mobile scale.
  • LoaderLoaderA tiny jQuery plugin for displaying progress in a visual and engaging way
  • KnobKnobKnob is a cool UI to increase/decrease a value.
  • Real ShadowReal ShadowStop using box shadow, use Real Shadow to create ultra realistic shadow!
  • SeuratJSSeuratJSSeuratJS is a JavaScript library that extends Raphaël and allows for the creation of vivid animations and pixelated artwork using minimal code. It does this by extacting color data from an image of your choice and rebuilding the original with filled graphical primitives in SVG.
  • PhotonPhotonCSS3 3D lighting engine.
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

3 comments
Julien Guézennec 12 years ago
Bad code but great example also in my boxFX (JS/CSS3) http://molokoloco.github.com/jQuery.boxFx/#emitterWithKeyframes ;)
Reply
arun 11 years ago
good one
Reply
Alessandro Nunes 10 years ago
Jquery and html won't replace flash until they'll have the great effects we can make with flash
Reply