We ❤ jQuery

You may or may not be aware, but here at Shape we ruddy love clean web designs. The combination of bespoke layout, beautiful typography, stunning photography and lots and lots of lovely space really gets our clocks ticking. The beauty of digital design is that it takes minimalism a step further than in the world of print, allowing for motion and interaction to take place. When done right, subtle interactions and animations can really make a website stand out from its competitors. For this reason, I feel obliged to share some of the wonderful plugins that we use regularly, helping us bring our designs to life in an understated and refined manor.

scrollReveal

This cheeky number is one that we’ve only come across recently, and we cannot get enough of it! A lot of sites these days have elements that interact with scrolling through a site, making different parts become visible as they come in view. What scrollReveal does is allow for this functionality and interaction on your site with incredibly simple html markup.

It really is as easy as relating the plugin file to your site, and then adding ‘data-sr’ to any elements that you want to animate on scroll, and VOILA!

What makes this plugin super awesome is the natural language you can bring into customising the way elements are revealed.

<div data-sr="enter left, hustle 20px"> Foo </div>
<div data-sr="wait 2.5s, ease-in-out 100px"> Bar </div>
<div data-sr="move 16px scale up 20%, over 2s"> Baz </div>
<div data-sr="enter bottom, roll 45deg, over 2s"> Bun </div>

As you can see, it can literally be the case of writing a sentence for what you want to happen. I mean, come on, don’t tell me you’re not impressed by that!

Masonry

A massive trait in web design these days is grids. Everyone loves a good grid, me included! Now most CSS frameworks allow for nice, fluid grid structures which is fine for most design, but when it comes to creating a grid of elements with dynamic heights that need to be flush with eachother, this is when Masonry comes in very handy. This plays to great effect in relation to the CMS as it allows the user to add as much or as little content as they like into sections of a site, and the elements in the masonry grid structure will adjust accordingly.

The great thing about this particular plugin is how powerful it is in terms of the options and customisation available. Any type of grid structure, no problemo!

Owl Carousel

The beauty of web design is that it can help segment information into smaller chunks, making sure the user is never overwhelmed with too much information at once. One way of implementing this key factor is into slideshows. Over the years we have been through a number of slideshow plugins, all of which have the positives and negatives. One that seems to have stuck around for longer than the rest is one that we currently use, Owl Carousel.

The simplistic markup for both the jQuery and the HTML makes this a very lightweight plugin which is extremely efficient to implement. What makes this stand out from its competitors though is the responsive functionality of this plugin. With built in options similar to CSS media queries, this gives great flexibility to work the plugin to any responsive grid structure.

responsive : {
// breakpoint from 0 up
0 : {
option1 : value,
option2 : value,
...
},
// breakpoint from 480 up
480 : {
option1 : value,
option2 : value,
...
},
// breakpoint from 768 up
768 : {
option1 : value,
option2 : value,
...
}
}