The Engagement 4Cast
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.
Those with multilingual websites will love this one – you can hold down a key (like on a mac) and get alternate special characters.
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)
Have a search bar with a finite amount of results? Use TypeAhead to autocomplete from a .json data file.
Need some pretty charts quickly? Try Chart.js – it will draw line charts, bar charts, and much more!
Use your spacebar to navigate this one – get a Prezi-like website for your next campaign!
Ever wanted a parallax website, but you weren’t happy with just plain old background shifts? How about adding color transitions, animations, and more!
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.
The other kind of curve for your text, this plugin will bend a line of text on the y-axis.
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.
Video backgrounds for your page. I’m thinking subtle uses, like http://www.weylandindustries.com/david
Scroll your page in different directions! (this one uses the normal scroll motion, and also includes anchor points to take you to specific sections).
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!
4Site Interactive Studios is a talented troupe of web professionals who are passionate about creating tools to support digital marketers. We love to hear from our community! Reach out to us with your thoughts and questions. And don’t forget to subscribe below to get notified when we post new blogs – no spam, just content👍🏼
Subscribe & stay ahead of the crowd with sage marketing tips and predictions.