jQuery Flipster is a CSS3 3D transform-based jQuery plugin that replicates the familiar ‘cover flow’ effect. It’s responsive, so it will automatically center itself and scale down to fit the area provided. It likes to be playfully touched on mobile browsers. It degrades (vaguely) gracefully, falling back to being just as flat and boring as the browsers that don’t support 3D transforms. Its only dependency is jQuery and it sets up in seconds.
Best jQuery CSS2 / CSS3.0 Plugins & Tutorials with Demo
MelonHTML5 – Metro UI in HTML5, CSS3 & jQuery
Metro UI is a flexible and easy to integrate framework to build your one page website in Windows 8 Metro UI. It is fully powered by HTML5, CSS3 and JavaScript with plengy of options for you to configure it to suit your own needs.
Features:
- Desktop and Mobile Device (Phone + Tablet) Ready
- Resonsive UI Design
- Old IE Support
- Sliding Button Bar
- One Page Application
- Working with Browser Back button
- Customizable Tiles
- Smart Page Content Caching
- Integration with Google Analytics
- Object oriented JavaScript framework
jQuery CSS3 App Showcase with Grid Overlay
Today we will be creating a little app showcase with a neat effect in jQuery and CSS3. The idea is to show a mobile device with a screenshot of an app and when clicking on the device, a grid appears, showing some more screenshots. The effect is very subtle: the device moves back and the grid fades in and scales up. When clicking on another screenshot, the device image gets updated and the grid disappears again.
jQuery Quotes Rotator
A simple automatic quotes rotator with progress bar and example media query.An autoplay rotator for quotes (or any kind of content). An indicator above the content shows the progress. A blockquote with an image is used as an example. Also, an example media query shows how to resize the content for smaller screens.
Bespoke.js : DIY Presentation Micro-Framework
Bespoke.js provides the foundation, then gets out of your way so you can focus on uniquely crafting your own personal deck style.Using keyboard and touch events, Bespoke.js adds classes to your slides, while you provide the CSS transitions.
With its robust plugin system, new functionality can be added to Bespoke.js easily.
w2ui : jQuery UI Library
The w2ui library is a set of interrellated jQuery plugins. It is not a adhoc port to jQuery, but was initially developed with jQuery in mind. There is no support of other frameworks such as prototype or dojo. The w2layout object allows you to create stretchable and resizable layouts with up to 6 panels. The panels are top, left, main, preview, right, and bottom. You do not have to create and initialize all 6 panels, but only the panels you need in your application.
Out of the box w2ui library is all-in-one solution. It contains all most common UI widgets: Layout, Grid, Sidebar, Tabs, Toolbar, Popup, Field Controls and Forms. You do not need to put together a collection of mismatched plugins to accomplish your goals.
zTree : jQuery Tree Plugin
zTree is a multi-functional “tree plug-ins.” based on jQuery. The main advantages of zTree includes excellent performance, flexible configuration, and the combination of multiple functions.
Features:
- The code of zTree v3.x has been seperated according to the various functions. You can only load the code you need.
- zTree v3.x uses delay loading technique, which can easily load tens of thousands of nodes in seconds even in IE6 browser.
- Support for JSON data.
- Support for static and asynchronous data loading node.
- Replace the skin / custom icon flexibllly.
- Support extremely flexible checkbox or radio selection function.
- Flexible editing (add / delete / change / search) functions, such as drag and drop nodes,you can even drag and drop multiple nodes.
- To enhance performance, zTree transforms the js & css structure to provide excellent browser compatibility and make the development more easily
Interactive Infographic with SVG and CSS Animations
Learn how to build an interactive animated infographic using SVG, CSS and JavaScript.One of the less talked about features of newer browsers is increasing support for the SVG file format. If you are unfamiliar with SVG, it stands for Scalable Vector Graphics. Unlike raster image formats like PNG, JPG or GIF, the vector graphics contained within SVG files are completely scalable to any size and will display at any resolution or screen density without quality loss. In many cases, SVG files will also be much smaller in filesize and download quicker.
With the right techniques and modern browser support, developers can now produce some pretty impressive animations, effects and interactions using SVG. Today we will explore the possibilities of SVG and test the capabilities of modern browsers by creating an interactive vector infographic for the web.
