Jason Glisson
Category: Development
06.05.2013
We love interactivity at NJI Media. Our development shop likes to use fun, new resources to create interesting websites. One tool that is always in our toolbox is Jquery, the javascript library. With Jquery you can manipulate objects, animate things, create unique and engaging widgets for your site, and much more.
Here are a few Jquery plugins that you might find very useful.
Masonry/Isotope
Masonry is a great plugin that allows for elements to be arranged in a brick-like layout, hence the name “Masonry”. Elements are arranged horizontally, and then vertically based on their size and the container size. The results look much cleaner and organized, and as the website says “like a mason fitting stones in a wall.”
Isotope, Masonry’s big brother, uses everything Masonry offers plus adds a lot more flexibility with filtering, sorting, more layout options, and animation. We’ve recently used Isotope for the Team Boehner website to arrange blocks on the landing page.
ScrollTo
http://flesler.com/jquery/scrollTo/
These days, scrolling through long pages is pretty normal. When viewing articles on a smartphone or tablet, it’s really simple to just scroll down the page using a finger of your choosing. The ScrollTo plugin makes it that much easier to get where you want to go in hurry.
By using ScrollTo, you can click a link and the page will auto-magically scroll down to the section you designate. Gone are the days when anchor links were the only way to get this done. Now, you can make the experience much more pleasing for users. And from a User Experience perspective, this is great for extremely long pages and post.
Additionally, ScrollTo allows you to automatically scroll horizontally and diagonally. This could be used to create some interesting sites that scroll down to a section and then horizontal to a sub-section.
We’ve used this ScrollTo magic spell on a number of projects, including BRT’s “It’s Time to Act.”
Transit
http://ricostacruz.com/jquery.transit/
There’s nothing that our Panda likes more than a good Jquery animation, except for bamboo. Jquery really shines when it’s used to manipulate the DOM and move or alter an object on hover, click, mouseout, etc. That’s where the Transit plugin comes in.
Out of the box, Jquery animations are nice and easy to implement. But they lack some smoothness to their animations without a lot of extra code. With Transit, you not only get those smooth, easing animations, but you also have the ability to animate, well…. just about anything any way that you’d like. You can spin objects. Slide them. Flip them. Skew them.
The latest version of Transit supplies some great mobile animations as well as great cross browser support.
Morris.js
http://www.oesmith.co.uk/morris.js/
Here at NJI Media, we love a good chart. In the past, we’ve done many charts that both animate and inform. And while there are many ways to create nice looking charts and graphs for websites, it’s difficult to make them look awesome and also animate the data.
With MorrisJs you’re able to create and animate Line & Area Charts, Bar Charts, and the elusive Donut Charts. And who doesn’t like donuts?? Making a chart that is interactive is sure to keep site visitors occupied longer and make your data much easier to understand.
Modernizr
Browser compatibility issues make our panda angry. To keep him from breaking things, we use Modernizr to help work those pesky cross browser issues out.
Modernizr quickly loads on the website and detects any javascript features that could be “next-generation” and may not be supported on all browsers. This lets our developers understand which features are supported, and which are not. If the feature is not supported we can create a fallback for that particular browser.
This is extremely helpful in diagnosing cross browser issues with animations and other customized functionality. Internet Explorer 7 issues still come up almost daily, and we’re still finding ways to knock them all out using this handy plugin.
If we find that a browser does not support the Jquery functionality that we’ve setup, we could perhaps fallback to a method that that particular browser will support.
In 2010 and 2011, Modernizr was named Best Open Source App of the year, and it’s lead developer, Paul Irish, Developer of the Year by the .net Awards.
Pretty cool: VintageJS
http://rendro.github.io/vintageJS/
Instagram has a lot of nice photo filters that people love using to make their images more appealing. Apple and Android have also rolled out similar filters to their operating systems.
Now you can apply similar filters to the images on your website. This would be especially useful for social platforms, sites where users upload their own photos, or if you are trying to keep a certain color scheme or vintage look to your site.
Fust for fun: Clippy Js
https://www.smore.com/clippy-js
There’s nothing people like more than nostalgia. Recently some developers got together and decided that people also loved failed Microsoft technologies and obscure Javascript libraries. So they took it upon themselves to combine all of these into one. Sounds like everyone had a good time during the process.
Now you can add that pesky, annoying assistant to any website. But why would you? You likely wouldn’t. But that’s why this section is labeled “just for fun”.
Other well-known and equally annoying assistants are also available.
