Our recent web design project called for something different. Something with a bit of pizazz and flare. Now convention would turn straight to flash for the visual effects but here at Absolute Advantage we try not to. With the seemingly endless array of visual effects, sites made entirely from Flash suffer from too many downsides. We won’t go into them now but you can find some very good info at Moongrabber and SeoBlogr on the disadvantages of Flash only sites.

Mint Innovation by Absolute Advantage

So when you want stunning visual effects without using Flash, where do you turn. jQuery is the answer. The Mint Innovation project  uses a collection of jQuery effects together to bring the look and feel of a Flash based site.

1. jQuery Coda Slider

Based on the Niall Doherty coda slider effect, the moving business card on Mint Innovation forms the foundation for the site. Using jQuery and cods-slider.js it allows left and right scrolling along with cross links to scroll to any page from any part of the site.

Download Coda Slider Pack
Alternative Coda Slider documentation

2. jQuery Unobtrusive Tabs

Within the sliding panels we utilised another jQuery function – jquery.tabs.js. Based on the Unobtrusive Tabs by Klaus Hartl, the jquery tabs plugin allows us to dynamically load tabbed content within the page. For added effect we used the on click fade for transition.

jQuery tabs within coda slider panel

Download the jQuery Tabs files
Read the documentation

3. jQuery Innerfade

The transitioning effect you see on the first page of the panel could have easily been achieved with an animated gif. However, that wouldn’t offer us the same amount of flexibility as using jQuery. Additionally, it reduces the sizes of the image files on an already very busy page.

The Innerfade with jQuery offers you the ability to dynamically tweak the fade type, speed, pause, and even create hyperlinks from each separate image in the transition.

Download the jQuery innerfade package
View documentation on the jQuery innerfade

4. jQuery No Conflict

Now with all this loading of jQuery going on there is bound to be some conflicts in the coding. This is where jQuery No Conflict comes in. This neat function allows you to switch the $ variable on conflicting scripts.

See our previous post on jQuery Running Slow with Conflicting Scripts – A Solution
See the jQuery No Conflict documentation