I’m sure that at one point or another you were designing a website and thought it could use a little something extra. That bit of something that adds extra functionality or enhances what it already has, making it not only easier for the user to receive the information they seek, but also present it in a neat package.
In no particular order, I give you a handpicked collection of jQuery plugins and some CSS3 tricks to top it off. Surely, with these in your designer arsenal, your creations will stand out more than ever before.
jQuery
1. Fly-out menu
Excellent when using enlarged text for emphasis along with visual content.
2. Grid portfolio
A very elegant way of displaying items with the possibility of quickly previewing the content.
Suggestion: use with other resizing elements so that the user can see them rearrange.
3. Slide out contextual tips
Expanding tool tips with a smooth animation, revealing extra content only when the user wants it.
Suggestion: use with images that display several products (e.g. furniture) or when explaining the highlights of a design in your portfolio.
4. Quicksand – reorder and filter
Organise and reorder items to make it easier to find exactly what you need. Click once and just watch everything slide into place.
5. Sunday morning – translation plugin
A little old, but still awesome. It adds a simple and appealing way of translating a website or just parts of it.
6. jVectorMap
Interactive map with the possibility of expanding for other uses. Includes the world map, US, Europe and Germany.
7. Shuffle letters effect
An interesting effect that can be added to make text elements more eye-catching. Basically, it shows random characters as it reveals the actual text.
Suggestion: use sparingly so as not to make everything confusing.
8. Mosaiqy – picture shuffle
Display pictures in a simple grid that shuffles the elements in a Rubik’s cube fashion.
9. Sponsor wall flip
Although the title says “sponsor wall flip”, that’s just one of the many uses for this plugin. Show visual elements and put bite-sized information on the back.
Note: contains a little PHP.
10. Colourful jQuery clock
Add a colourful and modern clock to your design or perhaps even adapt it into a countdown for when launching a new website!
11. MopTip2
MopTip2 is a plugin that lets you add customizable tooltips to various elements. The tooltips can close automatically or be manually closed and they may also display images.
12. Grumble
Another tooltip plugin with the added bonus of being able to use virtually any CSS styles and transform them into whatever you may want.
13. jQuery Timelnr
Timelnr is a stylish timeline gallery with the option of placing it horizontally or vertically, and having it play automatically.
14. Flexible nav
By just marking certain elements in the HTML, this plugin will automatically create a navigation menu for you, acting like small bookmarks placed neatly on the side of the window.
15. Deck – HTML presentations
Ever thought PowerPoint or Keynote presentations were cumbersome? Then look no further! With Deck you can create online HTML presentations with a multitude of uses, perhaps enhancing an e-learning product.
16. Apple-like Retina effect
Enhance your content by letting users see the finer details with this Retina-like plugin.
17. jQuery pageSlide
Simple and effective, pageSlide reveals information by pushing the entire page to the side, thus not disrupting the positions of other elements.
Suggestion: it could be used to hide a vertical navigation, leaving room for full-page content.
18. jqFancyTransitions
A simple and sleek gallery with strip transitions and several formats.
19. Panning slideshow
A more interesting slideshow which pieces together the slides and pans through them with a slightly elastic effect.
Suggestion: given the effect, the slides could actually be parts of one big image for something more special.
20. jqZoom
Similar to the Retina plugin, jqZoom can be customized in more ways and has more zooming options, such as drag-zoom or through simple mouse-over.
21. 3D tag cloud
Add a little creativity to your tag cloud by turning it into a tag sphere! Just click and drag to rotate it and use the mouse wheel to zoom in and out. The plugin simply transforms all divs that have the class “tags” and contain an unordered list with links inside.
Suggestion: since all it needs is a div, why not be creative and apply it to a navigation?
22. JEffects
JEffects is a plugin containing more effects that can be applied to various elements within your website. For instance, it can be applied to input fields to create a very pleasant effect.
Note: not free.
23. PhotoShelf
PhotoShelf is an elegant gallery that allows you to scroll through a collection of images and zoom in on portions of the selected image. It can also add separators in the stack to organise your items.
Note: not free.
24. Grid accordion
A double accordion, if you will. It smoothly expands to an easier to read width and makes room for subcategories, also displayed inside an accordion.
25. Latest tweets tooltip
A very interesting plugin that lets you display the latest tweets about a certain topic inside a resizeable tooltip.
Bonus: a few CSS tricks
1. CSS3 Transitions, Transforms and Animations
Everything you wanted to know about CSS3, plus some tutorials on how to create some nifty enhancements.
Note: some tutorials contain some JavaScript.
2. Pure CSS Accordion
As the title implies, this simple but versatile effect is made with pure CSS transitions, taking advantage of anchors.
3. OS X dock
Create an OS X dock with CSS3 properties, including reflections to make your design stand out.
4. CSS media query
Learn how to hide and display elements according to the size of the screen. A step towards responsive web design.
5. CSS3 multi column
With just one line of code you can split a text container into columns, lending itself nicely to dynamic content.
Leave a Reply
You must be logged in to post a comment.