Blog

Enhance Your Drupal Site with jQuery

lettering.js logo

The thing I love most about creating websites is that there’s always some new technology being developed we can use on projects. Recently, we started having “brown-bags” every few weeks on Friday afternoons to share ideas, cover new developments in the biz, and teach each other new skills. This past week it was my turn to share (fun!), so I put together a list of a ton of fun, interactive jQuery plugins and tools that we could we could use for client websites.

The plugins I found followed a few trends, so I put them into 4 categories: Functional Additions, Layout, Typography, and Amaze-Your-Friends Stuff. Functional Additions are fairly straightforward, they quite simply make your site easier to use and add functionality! Layout plugins were really more like frameworks for building your website, ways to set up your content on the page. Typography is for making your text way cooler. Amaze-Your-Friends Stuff is all plugins which would be great for special content - they take on life of their own.

Adding these to a Drupal 7 site is simple - download the javascript file, put it in your custom theme folder, add the file location to your .info file, and voila! You’re ready to start customizing your code. Who needs modules when these are so simple to use on their own?

Here are a few of the great jQuery tools we covered that will enhance your site and make it easier to use.

Functional Additions

LongPress http://toki-woki.net/lab/long-press/

Those with multilingual websites will love this one - you can hold down a key (like on a mac) and get alternate special characters.

Social-feed http://gitbox.ru/Social-feed/

You won’t need separate displays for Twitter and Facebook anymore - Social-feed has you covered! (See https://github.com/pavelk2/social-feed for documentation)

TypeAhead http://twitter.github.io/typeahead.js/examples/

Have a search bar with a finite amount of results? Use TypeAhead to autocomplete from a .json data file.

Chart.js http://www.chartjs.org/

Need some pretty charts quickly? Try Chart.js - it will draw line charts, bar charts, and much more!

Layout

Impress.js http://bartaz.github.io/impress.js/#/its

Use your spacebar to navigate this one - get a Prezi-like website for your next campaign!

Skrollr http://prinzhorn.github.io/skrollr/

Ever wanted a parallax website, but you weren’t happy with just plain old background shifts? How about adding color transitions, animations, and more!

Typography

Bacon http://baconforme.com/

Sick of straight text boxes, or need to curve your text around a logo or round image? Bacon will make the edges of your text all.. bacon-y.

ArcText http://tympanus.net/Development/Arctext/

The other kind of curve for your text, this plugin will bend a line of text on the y-axis.

Lettering http://letteringjs.com/

Down-to-the-letter control for your headlines when paired with CSS - now you can select that fifth letter, make it purple, and rotate it if you like. Just check out all their examples - it makes the possibilities endless.

Amaze-Your-Friends Stuff

Tubular http://www.seanmccambridge.com/tubular/

Video backgrounds for your page. I’m thinking subtle uses, like http://www.weylandindustries.com/david

ScrollPath http://joelb.me/scrollpath/

Scroll your page in different directions! (this one uses the normal scroll motion, and also includes anchor points to take you to specific sections).

Superscrollorama http://johnpolacek.github.io/superscrollorama/

Animate your page transitions! You can add timelines, tweens, and target based on viewport location or scroll point. This one is slightly more advanced, but so much fun!

 

Have questions? Want us to help you put one, some, all, or any other jQuery plugins on your site? Shoot us a message!