JQuery is a secret weapon being used throughout the web. If you aren’t sure what it’s being used for or when you’ve seen it, you’ll soon find out through these great examples. JQuery is JavaScript code that allows a developer to create animation without Flash software. Plus most of the JQuery code doesn’t take as long to develop or make changes.
- Adds interest, appeal and interactivity to a static web page
- Easy to update and maintain
- Optimal for search engines
#1 Image Slideshow
An image slideshow is one of the most popular used JQuery trick. There are many types of JQuery slideshows out there that have different features. One could have all of it’s images in thumbnails underneath the slideshow and one could have arrows to click through the images.Here are some of my favorite slide shows to use.
#2 Menu Navigation
Up there in popularity with the image sliders, menu navigation is a great JQuery trick to learn. From animated drop downs to neat, rounded corner buttons, it really makes a navigation (and your website) stand out.Tutorial
#3 Pop Up Box/LightBox
A pop up image slideshow or single image. I know, it’s a slideshow like above, but it has a different feel to it. It’s simple and classy, plus it pops out so the users focus is directed straight to the images. Another great thing about this particular lightbox is that it’s easy to find how to close out of the image. I’m sure everyone has seen this trick before.
#4 Tabbed Content
Another cool trick with JQuery is creating tabbed content. This allows the user to place a lot of content into one container and create interaction for the user. There are a couple of ways that I have seen this done. One is with actually tabs and the other is a clickable menu that reveals content hiding behind it. Here are some examples for those.Tabbed Content Demo by Nut.Tuts+
#5 Hover Clouds
This is a trick that I stumbled upon the other day. It’s more for show, but it’s pretty cool. If you hover over a link, a hover cloud appears. The cloud can be styled to the designers liking to display extra information, thumbnails or links. Take a look at these examples.Hover Sub Tags by Noupe
#6 Style Switcher
Style switcher allows the user to click on a button that changes the style of the page. This changes the css template based on which button the user chooses. Some designers do this with color palettes, others use it to change the whole theme of the page. This example is of a theme change between night and day.JQuery Style Switcher by Net.Tuts+
Building a website and doing nothing else is not enough in today’s online market. Design/Development trends as well as website technology are constantly changing. TBH Creative specializes in web design and can help you keep up with design/development trends.
Let’s start talking
