Stratus is a jQuery powered SoundCloud player that lives at the bottom (or top) of your website or blog.You can add tracks to Stratus right from your page. Simply give a SoundCloud track link the class of stratus and the player will do the rest. This works great for the discography section of your site.
Best jQuery Plugins Plugins & Tutorials with Demo
Stratus 2 : jQuery powered SoundCloud player
Grabbing Popular Dribbble Shots Dynamically with jQuery
In this tutorial I want to demonstrate how we can build a small webapp which dynamically pulls all the most recent popular shots from Dribbble. The interface is very simple to work with and we want to create all these effects without refreshing the page. For organizing the backend data I’ll be using a custom jQuery plugin named jribbble. It suits our needs perfectly and it’s so easy to get started – even a newbie JavaScript developer could pick this up in a couple hours.
Creating a Flipbook Image Slider with CSS3 3D Transforms and jQuery
Recently the ‘flip book’ effect has become really popular on a lot of websites, so I got to thinking about how you could go about pulling off that effect using some jQuery and CSS3. I find that most of the implementations of this code can get a little bit complicated, so I tried to make things as simple as possible.
We’re going to write this code as a jQuery plugin, so first you need to include jQuery. Next we want to include a script called Modernizr. We only need 3D Transforms, and you can download the required script from here. This will ensure everything will work fine in browsers which do not support 3D Transforms. Then you have to make a file called jquery.pictureflip.js which will be where we’re putting our plugin code!
backgroundSize.js : jQuery cssHook adding support for “cover” and “contain” to IE6-7-8
A jQuery cssHook adding support for “cover” and “contain” to IE6-7-8, in 1.5K.All was well until I discovered the elegance of background-size: cover; and background-size: contain;. The first one, for instance, allows an image to completely cover a background, without having to send a 1920×1080 background image down the pipes.
Unfortunately, they don’t degrade gracefully: websites would likely appear broken to IE6-7-8 users 🙁 …unless you use this cssHook!
JBMarket : jQuery Image Gallery
JBMarket Image Gallery is JavaScript (jQuery based) script converting unordered list into an Image Gallery with Lightbox.
Features:
- Can display thumb images, big images for the lightbox, description text for the thumb images and description text for the lightbox.
- jQuery driven
- Width adjustable
- Supports full-screen mode
- Lightbox
Dummy : A jQuery content generation toolkit for rapid web prototyping and QA
Dummy is a content generation toolkit designed to make the development, testing and presentation of web prototypes less time consuming and more realistic. It does so by making it easy to populate static HTML with dynamic content, and by randomizing elements within a layout on subsequent loads of a document, in a way, simulating connectivity to a live database.
Originally conceived as a tool for helping to simulate the high volume, rapidly changing content characteristics of online newspapers and magazines, it’s generalized enough to benefit the early stage front-end development of any website or application with content that frequently changes in length, form or nature.
It can also been seen as a support tool for designers and front-end artisans ready to embrace the dark art of designing in-browser, as vastly different layout permutations can be generated and evaluated rapidly with each load of the page. Problems and shortcommings can be more quickly exposed.
jReject: jQuery Browser Rejection
jReject provides a simple, robjust, light-weight way to display rejections based on a the browser, specific browser version, specific platforms, or rendering engine. Provides full customization of the popup. Uses no CSS file (by default), and can easily be used on page load or during a specific page event. Also provides a flexible way to beautifully and cleanly display custom browser alternatives in the popup.
jQuery.path : Animatation for arcs and bezier curves with jQuery
jQuery.path provides animation along bezier and circular arcs.The animation engine in jQuery is focussed on single dimensional animation – hence it’s difficult to animate two variables along a path.
This simple plugin provides a method of multidimensional animation, and in particular provides a method for animating along bezier curves and arcs.
jQuery scroll parallax plugin
A jQuery plugin to make parallax effects based on the scroll position of the browser window.
Its important to note that in the Nike example which this plugin tries to recreate (and my own examples below), much of the effect is not in fact controlled by javascript. The slow movement of the background image is actually because without the JS it is completely stationary in the centre of the browser window, thanks to background-position:fixed. What the javascript does it to move the background image very slowly, like it isn’t fixed at all.
