fun.js [Updated]

There’s been a plethora of great little JavaScripts coming out lately. I’ve been collecting a few of them to use on various projects so I though I’d make a list (yes! a list!) and share what I’ve found. I haven’t included any big all encompassing libraries since I assume you already know about jQuery and the rest.


If you’re working with HTML5 and CSS3–and you should be–you’re probably wasting a lot of time if you’re not using Modernizer. Modernizer gives you a quick and easy way to check exactly what browser or device features your visitors use using. I’d suggest reading Taking Advantage of HTML5 and CSS3 with Modernizr or How to use Modernizr and the check out the documentation.


Respond provides faster css3 media queries for internet explorer 6+. This will help you out when you’re following your mobile first responsive design techniques (you’re doing that too right? right?). Get the source here on GitHub and then check out the documentation.


yepnope is a nice little script loader but I’d only recommend using it if you have a lot of scripts and each one is rarely used. A much better idea is to combine all your JavaScript’s into one compressed file so that you only need one http request to download everything (especially on mobile devices).


While impress may not help improve your site, this CSS3 powered interactive presentation tool will definitely help make client pitches rock. But, what about Prezi you say? Go try the impress demo. You’ll understand why it’s called “impress” (though I have a soft spot for kinetic typography). For another example and some excellent reading check out What The Heck Is Responsive Web Design.


Now here’s a great idea. How often do you need a nice little “spinner” loading animation? Gifs are so last decade so try this configurable, cross-browser JavaScript spinner with no images! Set a few properties and you’ll be loading in no time.


Again with the HTML5 scripts but now focused on video. You may or may not agree with thoughts on flash but you’ll probably like this impressive HTML5 video player. Drop it into your simple html5 video markup and you’ll get a nice cross-browser ui–with a fallback to Flash just in case.


A JavaScript library to zip and unzip files. Now you can confuse non-savvy computer users right in teh browser!


Parse the Adobe Photoshop PSD files right in your browser. NOt sure what I’d do with it but it’s pretty neat. Drop a psd on the demo page and you’ll get a lit of all the layers in the file.


zoom.js is a just an early experiment that allow you to quickly zoom in on DOM elements or points on a page. For example, click on any element on the demo page to zoom in.

jQuery Plugins

Here’s a few more that are great but also require jQuery.


Scrollorama is a fun plugin that helps you with “scrolly stuff” as the web site says. Scroll down the demo page to see various example of transitions, pinning, parallax and more. But, remember, use this responsibly. Don’t make scrolling the <blink> tag of 2012.


I’m a bit of a typophile (yes, I know the current iteration of this blog design needs work) and I love tools that make web typography easier. Lettering provides fine grained control for properties like kerning, layout and more. The gallery on the site is better seen than described so after you’re impressed check out the documentation here.

The post ‘fun.js [Updated]’ was first published by Jeffrey Sambells on