Designers are constantly striving to create eye-catching and interactive layouts without losing the usability features that add significant importance to the user’s experience.

Since there are various forms of techniques being used nowadays, it can be quite confusing when choosing the perfect one. Content can either help to enhance the design, or serve as a focal point.

The main challenge here is to do something simple because we’re dealing with interactive content so everything will change pretty often.

Having said that, let us examine 10 jQuery techniques that proved to offer a rich browsing experience.

As always, if we’ve missed something you think should have been included, please let us know in the comments.

1. JQUERY TRANSIT

Super-smooth CSS3 transformations and transitions for jQuery

A very useful jQuery plugin that works the same way as the animate() method, but powered by CSS3 transitions. You get the benefit of smooth CSS3 transformations and transitions on any device. Transformation include: translate, rotate, perspective, scale, skew and so on.

JQUERY TRANSIT

How to Use it?

Just Use $('...').transition instead of jQuery’s $('...').animate.

Then choose one of the many transition effects available there: x(px) y(px) translate(x, y) rotate(deg) rotateX(deg) rotateY(deg) rotate3d(x, y, z, deg) scale(x, [y]) perspective(px) skewX(deg) skewY(deg)

2. The Wookmark jQuery plugin

lays out a series of elements in a dynamic column grid

The Woomark jQuery Plugin automatically arrange and creates a dynamic box grid layout that responds to your browser size. It is great for showcasing large amounts of content in a minimalistic and stylish way.

The Wookmark jQuery plugin

How to Use it?

It is very simple to setup:

1- Include the file in your website (after your include of jQuery)

<script type="text/javascript" src="jquery.wookmark.js"></script>

2- Run it on your content and adjust the options (container, offset, itemWidth)

$('#myContent li').wookmark({offset: 2});

3. Filtrify

Beautiful advanced tag filtering with HTML5 and jQuery

Filtrify is an advanced tag filtering plugin, inspired by Chosen multiple select feature and Orman Clark’s Vertical Navigation Menu.

Advanced because you can search tags within tags and filter items by multiple tags from different categories and get a live feedback on the number of items containing related tags.

Filtrify

How to Use it?

1- Add jQuery, filtrify.js and filtrify.css to the <head> section of your page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/fitrify.js"></script>
<link rel="stylesheet" href="css/filtrify.css">

2- Now,if you have a list of singers/bands and each one of them have a list of “genre” tags. Your HTML would have to look like this:

<div id="placeHolder"></div>

<ul id="container">
<li data-genre="pop, rock, british, classic rock"> The Beatles </li>
<li data-genre="rock, british, blues, classic rock"> The Rolling Stones </li>
<li data-genre="alternative, electronic, female vocalists"> Björk </li>
<li data-genre="rock, alternative, grunge"> Foo Fighters </li>
<li data-genre="rock, classic rock"> Bruce Springsteen </li>
...
</ul>

4. Scrollorama

The jQuery plugin for doing cool scrolly stuff

Allows you to create transitions out of any numeric CSS property, Scrollorama is one of the quickest ways to develop your own scrolling website, without getting your hands too dirty with JavaScript.

By dividing the content into blocks, it simply lets us to animate elements on the page (when a block is reached) based on the browser window’s scroll position.

Scrollorama

How to Use it?

Embed scrollorama.js after jQuery and initialize the plugin, passing the blocks class selector as a parameter.

$(document).ready(function() {
var scrollorama = $.scrollorama({
blocks:'.scrollblock'
});
});

The animations are accomplished using CSS properties, durations of them can be defined and it is also possible to set the exact scrolling positions of the start/stop events.

5. Magnifying glass for image zoom

Create a realistic magnifying glass using Jquery and CSS3

The code uses CSS3 box-shadow and border-radius properties to create the magnifying glass. Jquery is used to position it at the cursor coordinates and change the background position accordingly.

Magnifying glass for image zoom

Moving the cursor away from the image gently fades out the magnifying glass bringing the image back to the default state.

6. Backbone.Notifier

Displaying and controlling UI notifications

Backbone Notifier is a powerful and flexible framework for displaying and controlling dialog notifications built on top of jQuery, Backbone.js and Underscore.js.

It currently has large number of options to customise the timing, style, size & position with even more features being added in the future. Includes styles that are fully customizable and don’t require extra CSS and can be extended thanks to smart modules architecture.

Backbone.Notifier