tripwire magazine » Development

30 Cool jQuery Tooltip Plugins for Interactive Designs

Sonny M. Day — Tue, 31 Jan 2012 07:00:27 +0000

jQuery tooltip is certainly one of the building blocks you should consider using in your web design and development. jQuery tooltips are easy to install and set up and they help you offer extra information on important elements and at the same time make the browsing experience of every visitor interesting and dynamic. Simple and minimalistic design is good for user experience and usability and jQuery tooltips help you achieve this by allowing you to “not show it all” at once. There is a lot of jQuery tooltip scripts available and some are free and some premium. Check out the demos and documentation to make sure you find what suits your needs best.

In this article we are sharing with you jQuery tooltips that you can use in your website to make it look cool and interesting. These are all easy to download scripts and easy to use, if you have the required tweaking know-how.

Disclosure: Please note that some of the links below are affiliate links and I will earn a commission if you purchase through those links (at no extra cost to you). I recommend that you do your own independent research before purchasing any product or service. This article is not a guideline, a recommendation or endorsement of specific products.

Let’s have a look at the jQuery Tooltip Plugins

1. qTip

qTip is an advanced plugin for the ever popular jQuery JavaScript framework. Built from the ground up to be user friendly, yet feature rich, qTip provides you with tonnes of features like rounded corners and speech bubble tips, and best of all… it’s completely free under the MIT license!

2. The Tooltip

The Tooltip is a handsome, modern gentleman that appears when it’s showtime.
by codecanyon (premuim plugin)

3. Fresh Tooltips

Precisely designed and coded Fresh plugins. It is Great for any kind of website and very practical. The top one is 100% transparent black, which looks very very cool.
by codecanyon (premuim plugin)

4. everyTip Jquery tooltip Plugin

EveryTip is a Jquery plugin that will read out any element’s title tag and converts it into a individual styleable dynamic bubble. You can apply it on any element you want e.g.: img, a , li, span, div and so on. The plugin automatically detects all elements of your specified type on the whole page and add’s a tooltip to it. It also supports inside HTML , so you can display all HTML tags inside a tooltip. Comes in a lightweight and crypted version.
by codecanyon (premuim plugin)

5. Digg-style post sharing tool with jQuery

Cool digg-style post sharing tool. This tooltip could be very useful for social networking website.

6. jQuery and CSS3 Simple Tooltip

jQuery and CSS3 Simple Tooltip works by popping up a bubble with more information about a word when you hover over it. You can even add an image to highlight the popped up info.

7. BeautyTips

BeautyTips is a simple-to-use balloon-help style plugin. Any element on the page can be set to show a talk-balloon containing any text or HTML on hover, click, or any bindable event. These balloons are drawn dynamically using the canvas HTML 5 element, and options include corner radius, spike length and width, stroke width. The balloons can auto-position based on the most available area in the current display window or they can be positioned according to an array of preferences (just left or right for instance).

8. jQuery Horizontal Tooltips Menu Tutorials

Beautifully made tooltip! This tooltip never disappears but follows when you hover over other links. Such a simple looking tooltip but its animation is brilliant.

9. Side Navigation Tooltip / Popup Bubble

This script works by popping up bubbles or tooltips from sidebar navigation buttons.

10. jQuery Tooltip Plugin

jQuery Tooltip Plugin is a free simple animated hover tooltip that can be easily integrated in your web pages.

11. Simple Tooltip

This is a jQuery plug-in that creates a popped up on chosen elements. You have several options to use to create your own styling and formatting.
by codecanyon (premuim plugin)

12. Cramie jQuery Tooltips Plugin

jQuery Tooltips plugin is a jQuery plugins to display popped up text. There are 6 colors available: yellow, black, white, red, blue, green. But, it’s easily customizable and you can add more colors to suit your website’s design. You can choose to display the bubble in 3 locations, on the top of the page, the bottom of the page, or floating over the element.
by codecanyon (premuim plugin)

13. jQuery Ajax Tooltip

jQuery Ajax Tooltip works by popping up a “tooltip” with more information about a person whenever you see a person’s name. When you hover over a name, more information appears.

14. aTip: the 1KB tooltip

Javascript tooltips are a valuable method to display additional information to users in a context-sensitive manner, however, at what cost? Bulky, unmanageable code slows down load times, increases web requests, and degrades browser/user performance. Enter aTip: the customizable, extremely lightweight jQuery plugin. Weighing in at 1.5KB with colour and style customization you can style any html element, all in different forms and methods. Additionally, the code is well commented, documented and easy to use/modify. If you want quick, neat and clean pure JS tooltips that support all modern browsers (and most old ones) then aTip is the solution. This package also includes email based support from Appsource, which includes help with installation should you require it.
by codecanyon (premuim plugin)

15. Generic Popups (jQuery)

“Generic Popups” script lets you create different kinds of Popups; such as Tooltips, Message Boxes, Alerts, Prompts tc. with support for complex structures. The functionality of the plug-in is similar to that of jQuery, therefore, the learning curve is relatively easier.
by codecanyon (premuim plugin)

16. Shiny Tooltips

You can add tooltips to elements which appear when you mouseover them.
by codecanyon (premuim plugin)

17. BetterTip

BetterTip is a plugin for the JQuery library that allows you to create custom tool tips. It is based on Cody Lindley’s jTip, but it is much more flexible.

18. Useful and Practical jQuery Image ToolTips

This script displays a tool tip image when the user hover on the thumbnail with fade-in and out effect.

19. Cut & Paste Ajax Tooltip script v1.2

This Ajax script enhances the default “title” attribute of HTML so certain tooltips can instead get their contents from an external file, with rich HTML content and all. Integration is easy and non obtrusive, and for the sake of efficiency, the script will only use Ajax to load the tooltip’s content the very first time the user rolls over the attached element.

20. jQuery plugin EZPZ Tooltip

The tooltip appears as you hover over the target, and follows the mouse cursor until it leaves the target.

21. tipsy – Facebook-style tooltip plugin for jQuery

Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute.

22. clueTip: A jQuery Tooltip Plugin

The clueTip plugin allows you to easily show a fancy bubble when the user’s mouse hovers over (or, optionally, clicks on) any element you designate in your script. If the element includes a title attribute, its text becomes the heading of the clueTip.

23. Bottom slide tooltip

This bottom slide-in box can be used as an “aid” or “tooltip” for your page elements. Move your mouse over the element in question (must support the onMouseover event, such as tag), and a description will slide in from the bottom of the browser.

24. SuperNote

This is an XHTML/CSS/JavaScript powered popup info system with a strong focus on accessibility. Popup notes are stored as “footnotes” in a document and dynamically converted to tooltips!

25. Better Tooltip

This script works by displaying the tooltip when the target is clicked.

26. TipTip jQuery Plugin

Tiptip is a custom plugin that behaved just like the browser tooltip. TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the popped up will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window. TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS. It’s also only 3.5kb minified!

27. jQuery Tooltip

This is a really cool and good looking jQuery tooltip plugin. It is part of a set of pretty popular UI jQuery plugins.

26. Sticky Tooltip script

This script adds a rich HTML to elements that’s revealed when the mouse rolls over them, in which the tooltip follows the cursor around as it moves about within the element. The bubble can be “stickied”, or kept visible on the screen by right clicking on pressing “s” should the user wish to interact with some content within the tooltip, such as click a link inside it. The contents for each tooltip are simply defined as regular HTML on the page, making them very easy to define and customize. Throw in a subtle fade in effect, and you’ve got yourself a tooltip that can do more than just show extra information, but serve it as well!

27. Awesomeness

Cool tooltip with nice transition effect and cool transparent border around it.

28. (mb)Tooltip

Beautifully made tooltip with nice transition for input fields.

29. Easiest jQuery Tooltip and URL Screenshot Preview

These scripts add element to the body when you roll over a certain object. That element’s appearance is predefined with CSS (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When cursor is moved over the object, the element moves with it and when cursor roll out, the element is deleted.

30. Simpletip

Beautifully made tooltip with fade transitions. When you hover over a link, a tooltip fades in just above or below the link.

Any comments for the jQuery Tooltip Plugins

If you have any comment please don’t hesitate to write them down here. We hope that this post can help you improve your web designs. We encourage you to share this to your friends if you find it helpful. Enjoy reading!

Author : Sonny Day

Sonny M. Day is a passionate SEO and web design enthusiast who loves photography, mountain climbing, snorkeling and dirt bike riding.

50+ Best jQuery Carousel Roundup

Dustin Betonio — Sat, 28 Jan 2012 11:00:54 +0000

In web design a carousel is an element giving visitors easy access to several content items. It is typically a dynamic scrolling list of items in horizontal order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation). Using sliding horizontal panels also known as Carousels and Sliders to feature top content is one of the strongest web design trends over the last couple of years. It’s a very effective method to increase the web site usability and engage the user. The reason for this trend is mainly the arrival of jQuery that have made it almost a “walk in the park” to add a jQuery Carousel or jQuery image slider to a web site. Today there are many excellent free jQuery Carousel plugins available and it makes it difficult to choose the best. This article has been created specifically to help you get started using jQuery Carousels but you may also want to check out some jQuery sliders.

1. Agile jQuery Carousel

Highly customizable jQuery Carousel plugin so you can build according to your requirements. JSON data format is used to provide easier integration with external data or data from your CMS. Use it for agile web development. This is an all new version written from scratch. JQuery UI effects and the ability to read files on the server are no longer included. New features are added, such as “Control Sets” which allow for a more customizable setup. Now posted on Github for faster development. Agile jQuery Carousel examples.

2. AVIA SLIDER

This plugin features 8 unique transition effects, image preloader, autoplay that stops on user interaction and lots of easy to set options to create your own effects.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

3. jCarousel Lite

jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.

4. JQUERY BANNER ROTATOR / JQUERY SLIDER

This is a jQuery banner rotator plugin featuring multiple transitions. The thumbnails and buttons allow for easy navigation of your banners/ads. The banner rotator is also re-sizable and configurable through the plugin’s parameters.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

5. Coin Slider

This jQuery slider features smooth transition effects and is compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+

6. ESTRO JQUERY EFFECT SLIDER

This jQuery plugin uses unobstrusive javascript to transform a block of simple HTML markup into a georgous elegant slider, which can be completely customized using HTML5 data attributes. The markup is valid HTML5 and SEO optimzied, with all content always being available to search engines. When using this plugin, your page layout will be consistent even if javascript has been disabled.
This slider includes a smooth and powerful Ken Burns effect which is completely configurable and compatible with all major browsers (including ie7 to ie9, Firefox Chrome, Opera, Safari) and mobile platforms like iphone / ipad. If the Ken Burns effect is not your thing, that’s OK because the “Estro” slider also includes a 2-way “Swipe” mode with configurable transitions.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

7. Rcarousel

rCarousel – yet another (but super duper) continuous jQueryUI carousel. It has lots of features and good examples.

8. Theatre Carousel

This jQuery Carousel can do both horizontal and vertical sliders and in particular the horizontal carousel looks awesome. Really simple to use and it has good control options.

9. Cloud Carousel

This jQuery carousel features optional auto-reflections, and the information contained in the Alt and Title tags of the images can optionally be displayed as you hover over each image.

There are some benefits to doing this kind of thing in JavaScript rather than Flash, not least of which is the ease of integration, small file size, SEO, and inherent degradability/accessibility. Not having another dev-tool in the workflow is another plus.

The carousel features realistic perspective. Many 3d carousels only apply perspective scaling to the size of the images, not their positions. This results in disproportionate gaps appearing between items as they shrink in the distance which looks odd.

10. jQuery Ms Carousel

Each carousel can have own look & feel and behavior. Put next/previous button wherever you want or don’t put anywhere its up to you. The most important part is; it returns a carousel object and do whatever you want.

11. Carousel WordPress Plugin

This is is an awesome and very powerful jQuery Carousel for WordPress. Really suggest you check it out if you use WordPress.

12. BX Slider

13. jQuery popeye 2.0

This popeye-box uses the standard options: it floats to the left and opens to the right, its navigation and caption show on mouseover. By placing the navigation inside the stage area (where the image is displayed), we can get it to hover above the image.

14. RoundAbout for jQuery – cool and different jQuery Carousel

Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area.

15. Roundabout Shapes

Roundabout Shapes provide even more paths along which your Roundabout can move. The current version of Roundabout Shapes offers eleven additional movements.

16. Wow Slider

WOW Slider is a jQuery image slider with stunning visual effects (Blast, Fly, Blinds, Squares, Slices, Basic, Fade, Ken Burns) and tons of professionally made templates. WOW Slider is packed with a point-and-click wizard to create fantastic sliders in a matter of seconds without coding and image editing.

17. Icarousel

Carousel is an open source (free) javascript tool for creating jQuery carousel like widgets

18. Carousel Slideshow

Carousel Slideshow is a fabulous DHTML script for the showcasing of images on your site. It displays images in a 3D, carousel fashion.

19. Carou Fredsel

20. jQuery Carousel plugin

This plugin has been rewritten using jQuery UI’s Widget Factory with a few extra features including autoScroll

21. Making Mosiac Slideshow with jQuery and CSS

22. Barousel

Barousel is a jQuery plugin to easily generate simple carousels where each slide is defined by an image + any type of related content.

23. 3d Carousel

24. Anything Slider

AnythingSlider brings together the functionality of all previous sliders and their features.

25. jDigiclock slider

26. Dual slider

27. Liquid Carousel

28. slides

Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

29. FBISCarousel

30. jCarousel

31. Feature jQuery carousel

32. K3d jQuery Carousel

33. Prototype UI Carousel

34. 3d Rotation Viewer

This cool stuff easily creates a 3D rotation viewer in UIZE that lets users rotate the view of an object a full 360 degrees using a mouse, or finger on the Apple iPad.

35. Full Page Image Gallery with jQuery

This is a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. This works with thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse. When a thumbnail is clicked, it moves to the center of the page and the full screen image is loaded in the background. Now the user can move up and down and the image will get scrolled automatically, giving him the opportunity to see all of the image.

36.HTML5 Slideshow w/ Canvas and jQuery

This effect creates progressively enhanced slideshow with a fancy transitioning effect.

37. How to Create a jQuery Carousel with WordPress Posts

38. jQuery Carousel Gallery for WordPress

This plugin builds on the builtin WordPress gallery, and replaces any gallery inserted using the tag with a neat jQuery powered carousel. By carousel it means you can browse through all the pictures in the gallery and they’ll slide from the right to the left and seamlessly start over at the end.

39. Making an infinite JQuery carousel

40. Just Another Carousel

41. Supersized jQuery plugin

Supersized jQuery plugin is a full screen background and slideshow that you can use to satisfy the craving of your clients for big and wonderful pictures.

42. Step jQuery Carousel Viewer

Step jQuery Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps. And fear not in taming this script to go exactly where you want it to- two public methods, two custom event handlers, and three “status” variables are here for that purpose.

43. Thumbnails Navigation Gallery with jQuery

Thumbnails Navigation Gallery with jQuery is an extraordinary gallery with scrollable thumbnails that slide out from a navigation. It has a menu of albums where each item can reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or the right.

44. Sideways – Fullscreen Gallery

Sideways is a simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS.

44. Nivo Slider

Nivo slider is an awesome jQuery slider that features smooth transition, keyboard navigation and html captions.

45. JCoverflip

jCoverflip has been developed to enable fast and granular customization of the look and feel and feature set.

46. jQuery Infinite Carousel Plugin

Unlike most carousel plugins which stop when they get to the last image, this one allows the show to go on infinitely without any user intervention.
If you have three images you want to display, after the third image has been displayed, the first image will be next. Through some clever JavaScript, images are shuffled around so that it appears as if the carousel is a true carousel and never ends.

47. jMyCarousel

jMyCarousel is a free, highly customizable, non obstructive carousel written in javascript, based on jquery, and created to suit any need. It enables to display a list or gallery of images in a dynamic way. It can be adapted very easily to any layout, and the way it animates the picture is adaptable.

48. SEXY SLIDER

SexySlider is a jQuery slider plugin that lets you easily create powerful javascript Sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!

MORE INFO / DEMO – by CodeCanyon (premium plugin)

49. jQuery Carrousel

Moodular is a jQuery plugin which allows to create carousel/slider very easily. Moodular comes from the contraction of two words : mood & modular.

50. Step Carousel Viewer

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps.

51. Galleria

Galleria is a JavaScript image gallery framework built on top of the jQuery library. Its goal is to simplify the process of creating professional image galleries for the web and mobile devices.

52. Floom (MooTools)

Floom is an extendible blinds-like slideshow widget for MooTools 1.3+.

Author : Dustin Betonio

Dustin Betonio is a Translation Management graduate at University of Mindanao. His earlier career was devoted on customer service outside the information highway. Currently studying Law in the same University.

20 Cool jQuery Countdown Scripts

Lars — Sat, 21 Jan 2012 07:10:35 +0000

I’m sure you have notices the countdown features on sites like RapidShare and MegaUpload that allow you to download files but make you wait a specified number of seconds before giving you the download link. You have probably also seen site that are not online yet using a countdown to tell visitors when to come back in a very dynamic manner. They can also be used to countdown to a release date of a game, a movie or to a party. Countdown script simply have a lot of useful use cases and the good new is that there are some really good jQuery scripts you can use for your site. In this article you will find all the useful jQuery countdown scripts available right now for free download. jQuery is also useful in many other areas and in particular jquery carousel and jquery menu plugins can give a website a facelift.
Disclosure: Please note that some of the links below are affiliate links and I will earn a commission if you purchase through those links (at no extra cost to you). I recommend that you do your own independent research before purchasing any product or service. This article is not a guideline, a recommendation or endorsement of specific products.

Premium jQuery Countdown Scripts

Live Brodcast Countdown Module

Nice jQuery based countdown timer. Header text depending on countdown stateus (counting down or finished). A lot of options available. Upon time expiration the module will display the expiration message for the amount of time set in back-end. When this time reaches its limit the module will restart the countdown until next event.

MORE INFO / DEMO from CodeCanyon (premium script)

Easy Countdown

MORE INFO / DEMO from CodeCanyon (premium script)

jsCountdown

Included are 14 different skins to choose from and a template file (png format) to make your own.

MORE INFO / DEMO from CodeCanyon (premium script)

JavaScript Animated Counter

Simple, animated JavaScript counter, which will allow You to present rapidly increased or decreased values, such as number of registered users, total income etc. But that’s not all… this counter can be also used as a text or date & time displayer or as a clock. It can be also used as a countdown, to show time left for the beginning of a product release campaign or a sale start.

MORE INFO / DEMO from CodeCanyon (premium script)

Countdown / construction page

Easy adaptable countdown, under construction – page. Including manual for easy set-up.

MORE INFO / DEMO from CodeCanyon (premium script)

Fancy Countdown – jQuery plugin

Fancy Countdown is a highly customizable jQuery plugin that lets you create an outstanding countdown. It´s very easy to use. You can set an own target date with a timezone. The plugin comes with an extensive API.

MORE INFO / DEMO from CodeCanyon (premium script)

FlipTimer

FlipTimer 1.2 with 8 color themes ready made and a beautiful template with working contact form included

MORE INFO / DEMO from CodeCanyon (premium script)

fresh Parallax Under Construction Countdown

fresh Parallax Under Construction upgrades your “Coming Soon” page with a dynamic 3D cloudy sky with your logo or item of choice in focus.

MORE INFO / DEMO from CodeCanyon (premium script)

Coming soon landing page

Javascript Under Construction Website Counter!

MORE INFO / DEMO from CodeCanyon (premium script)

Premium Coming Soon – WordPress plugin

MORE INFO / DEMO from CodeCanyon (premium script)

5sec Maintenance Mode

6 beautiful, funny templates to make your visitors less angry while you’re offline

MORE INFO / DEMO from CodeCanyon (premium script)

Free jQuery Countdown Scripts

jQuery Countdown

This is a jQuery plugin that sets a div or span to show a countdown to a given time. There are tons of options available and everything is supported by good examples and code snippets.

DEMO

jQuery Countdown with Background and Overlay

Really cool countdown script. There is a full package for download with script, images, css etc.

littlewebthings CountDown

This is an Easy to use animated countdown JavaScript. It is jQuery compatible and easily skinable

Demo:

jQuery Countdown plugin that doesn’t sucks!

Countdown timer jQuery Plugin

A simple jQuery Plugin that countdowns how long it is from a date. Very easy to use and a good download package with everything needed to get started.

jQuery CountDown Plugin

This script allows you to create a rapidshare.com like countdown and to animate the CSS font-size of each second and present a reward at the end.

How can I make a jQuery countdown

This is a really simple script, but it is a countdown script…

The Countdown jQuery plugin (translated)

Easy to use countdown script. Unfortunately no demo or example.

jQuery Countdown Clock (wordpress plugin)

Display and configure a jQuery countdown clock on your sidebar, allowing you to style the result via custom CSS styles. Generates a countdown widget using jQuery. No Flash required, just a JavaScript enabled webbrowser. More advanced users can even use CSS to customize the appearance of the timer.

Other countdown scripts your may find useful

Author : Lars Vraa

Lars started tripwire magazine back in January 2009. He is really passionate about web design, web development and loves to look into new technologies, techniques, tools etc. and to write articles for his readers.

60+ Useful jQuery Image Slider Roundup

Dustin Betonio — Sun, 15 Jan 2012 06:40:00 +0000

jQuery image slider and jQuery Carousel solutions have become an increasingly popular ingredient in web pages over the last year or so. At the same time JavaScript frameworks like jQuery has made, what was once for hardcore developers, easily available to any web designer. The massive popularity of jQuery has attracted many talented developers that are constantly releasing all kinds of amazing and powerful jQuery plugins. This of course also includes versatile and sleek jQuery sliders and galleries. When used correctly a jQuery image slider provide a good user experience and make viewing images more pleasant and intuitive on your website.

In this article I have collected 60 of the best jQuery image sliders and tutorials for your inspiration.

jQuery Image Slider collection

1. FancyMoves

FancyMoves is a great jQuery image slider to show off services, products, or whatever you can dream up. The main image is enlarged to attract your focus. There are three ways to navigate to the next / last item: using your keyboard arrows, using the left and right arrows on the sides of the slider, or simply clicking on the next or last item in the slider.

2. AVIA SLIDER

This jQuery image slider plugin features 8 unique transition effects, image preloader, autoplay that stops on user interaction and lots of easy to set options to create your own effects.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

3. Easing Slider

MORE INFO / DEMO – by Matthew Ruddy (free plugin)

4. Supersized

Supersized is a fullscreen slidehow jQuery plugin. It supports image preloading with image cycling with transitioning effect.

5. Orbit

Orbit is a killer jQuery image slider plugin that lets you create a simple, effective and beautiful slider for images of any size, and even includes some parameters for making awesome captions and a sweet timer.

6. Anything Slider

AnythingSlider is a jQuery image slider Plugin with a lot of features( Slides can be anything, Navigation tabs are built and added dynamically.

7. JQUERY BANNER ROTATOR / JQUERY SLIDER

MORE INFO / DEMO – by CodeCanyon (premium plugin)

8. Coin Slider

A Jquery Image Slider with unique effects.

9. Nivo

This is a new launched image slider what use jQuery. Is cross browser and have 9 unique transition effects, navigation controls, is simple, clean, valid markup and free.

10. ESTRO JQUERY EFFECT SLIDER

This jQuery image slider plugin uses unobstrusive javascript to transform a block of simple HTML markup into a georgous elegant slider, which can be completely customized using HTML5 data attributes. The markup is valid HTML5 and SEO optimzied, with all content always being available to search engines. When using this plugin, your page layout will be consistent even if javascript has been disabled.
This slider includes a smooth and powerful Ken Burns effect which is completely configurable and compatible with all major browsers (including ie7 to ie9, Firefox Chrome, Opera, Safari) and mobile platforms like iphone / ipad. If the Ken Burns effect is not your thing, that’s OK because the “Estro” slider also includes a 2-way “Swipe” mode with configurable transitions.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

11. Easy Slider

Easy Slider is a jQuery plugin, you can set up your own options and is easy to implement.

12. Cycle

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects.

13. Dragdealer

Dragdealer is much more than a simple jQuery image slider. It offers a wide variety of features related to dragging, but is also quite powerful for creating different types if image sliders.

14. JqFancy Transitions

jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

15. Galleria

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded.

16. Horinaja

Horinaja is a ready-to-use slide-show implementation, utilizing either scriptaculous/prototype or jQuery. A running example above

allows you to use a mousewheel for navigation.
automatically create slide indices (pagination), if required

17. JQueryGlobe – JQuery Plugin

This jQuery plugin enables simple and easy creation of an interactive “Featured Items” widget.

Slick effect, no Flash needed
It’s just 2K
Reusable on multiple containers
Cycles items via slideshow
Can be styled with custom HTML/CSS

18. Agile Carousel

Jquery plugin that allows you to easily create a custom carousel. Call Jquery UI to enable many different additional transition types and easing methods. Uses PHP to draw images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!

19. Looped Slider

20. Piecemaker XML Gallery

Piecemaker is an open source 3D Flash image rotator gallery.

21. AviaSlider

Very feature rich and good looking image slider.

8 unique transition effects
Lots of easy to set options to create your own effects
Included Image preloader
Autoplay that stops on user interaction
Valid HTML5 and CSS 3 Markup
Packed version only weights 8kb
Supports linked images
already prepared to work with prettyPhoto Lightbox
works with jQuery 1.32 and higher

Internet Explorer 6 and higher
Safari 3 and higher
Firefox 2 and higher
Opera 10 and higher
Google Chrome 3 and higher
Checks for last 3 Browsers performed on Mac & Win

22. Slide Deck

Slide Deck is an easy to implement with a great design.

23. Simple Slide

Simple Slide is a jQuery slideshow plugin. It’s easy to use, small and flexible.

24. Yoxview

YoxView is a free image and video viewer for websites. It’s written in javascript using jQuery and is available as a jQuery plugin.

25. Moving Boxes jQuery slider

26. Simple Controls Gallery v1.3

Simple Controls Gallery rotates and displays an image by fading it into view over the previous one, with navigation controls that pop up when the mouse rolls over the Gallery.

27. Animated JavaScript Slideshow

This dynamic JavaScript slideshow is feature packed and under 5KB. It is the long awaited update to my previous script here. A few new features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status.

28. Space Gallery JQuery Plugin

29. jCarousel Lite

jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.

30. Start/Stop Slider

The slider does feature a stop/start button and the animation goes a little farther than simply sliding to the left.

31. Coda Slider Effect

32. jQuery Infinite Carousel

Scrolling carousel that worked in the same way the carousel worked on the Apple Mac ads page.

33. Exposure

Exposure is a jQuery plugin for rich and smart photo viewing that can handle very large amounts of photos.

34. jQueryRotate

This is an final product of a Wilq32.PhotoEffect Snippet (browse blog to get more information). Actually you can use this simple and tiny script to rotate images (any angle) directly on client side (for ex. user generated content), and animate them using own functions.

35. Zoomimage

Present your images in a stylish way, with this plugin. The links are unobtrusively highjacked to open the images in an inpage popup with drop shadow and border. Nice and simple.

36. Image Rotator

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.

37. jQuery Image Gallery/News Slider

A really cool News Slider that uses two scrollers to create very slick effect. It uses scrollTo to scroll both description and image items and it comes with previous, next, play, stop and mouseover events.

38. Simple JQuery Image Slide Show with Semi-Transparent Caption

a simple image slide show with a semi-transparent caption with jQuery. This example is suitable to display news headlines, or a image slide show in your website frontpage.

39. Sliding Boxes and Captions

Play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect.

40. Animate Panning Slideshow with jQuery

The makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.

41. Fancy Image Gallery

42. jQuery Content Slider

43. Slick Auto Playing Content Slider

44. ImageSwitch

The main point of this plug-in is to make an easy-to-use, simple and fast plug-in to create effect when you switch between images.

45. Highslide

Highslide JS is an image, media and gallery viewer written in JavaScript.

Quick and elegant looking.
No plugins like Flash or Java required.
Popup blockers are no problem. The content opens within the active browser window.
Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
Lots of configuration options and scalability without compromizing on simplicity. A component system lets you strip away unused features down to a filesize of 10kB.
Outstanding, unconditional and free user support for both commercial and non-commercial users.
Compatibility and safe degrading. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a given HTML page.
Source code included.

46. Kwicks

47.Resizable Image Grid with jQuery

Image grids that smoothly scale at the simple drag of a slider are no longer confined to desktop apps like iPhoto or Picasa. Thanks to some clever CSS and the jQuery UI, fluid image grids are now surprisingly simple to implement on the web.

48. Apple Style Slideshow

49. Gallerific

Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos.

50. S3 Slider : JQuery Image Gallery

S3 Slider is a jQuery plugin with nice effects and with self image changing.

51. Ultra versatile slider

An ultra versatile slider with horizontal scrolling and animated effects using MooTools.

52. jQuery Image Scroller

Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.

53. Create Featured Content Slider Using jQuery UI

Showing off the best content of your website or blog in a nice intuitive way will surely catch more eyeballs. Using an auto-playing content slider is the one of techniques to show your featured content. It saves you space and makes for a better user experience, and if you add a pinch of eye candy to it, then there’s no looking back.

54. jQuery pageSlide

jQuery pageSlide was inspired by the UI work of Aza Raskin. In his recent posts regarding concepts for Firefox Mobile and a mouse-based Ubiquity, Aza introduced the idea of sliding (or “throwing”) content aside to reveal a secondary content pane.

55. Mootools Slider With Two Knobs

Ups…it is Moo tools… Well it is pretty cool though. You can very easily change the look and feel of the range indicator ( in blue in the above example), slider knob, the slider track by modifying the slider.css as required.

56. A Bullet-Proof Content Viewer

57. Fancy Sliding Form with jQuery

58. Simple iTunes-like Slider

59. jQuery Captify

Captify is a plugin for jQuery written by Brian Reavis (@brianreavis) to display simple, pretty image captions that appear on rollover. It has been tested on Firefox, Chrome, Safari, and the wretched Internet Explorer. Captify was inspired by ImageCaptions, another jQuery plugin for displaying captions like these.

60. CU3ER Image Slider

Yes it is Flash…but I though it is really cool and should be considered for a web design project where a image slider is needed. It is an image slider initially conceived to create 3D transitions between slides, turned out to be a convenient and multifunction solution that can be applied in a range of website building areas, from content slider to feature slider and image & banner rotator.

61. Jflow

jFlow Plus is an update to the popular ultra-light-weight jFlow slider. This new addition comes with an auto slide an pause functionality and will be continually updated with additional features. jFlow Plus is an easy to implement, customizable and light-weight jQuery slider that is a great solution for you project needs.

Author : Dustin Betonio

http://www.tripwiremagazine.com/2011/06/jquery-carousel.html

180 Awesome jQuery Slider and Effects Roundup

Sonny M. Day — Thu, 12 Jan 2012 10:00:28 +0000

A jQuery slider or jQuery carousel can be very useful to feature important content on nearly any web site. The jQuery library has undoubtedly made the life of JavaScript programmers easier and made it possible for non-experts to do fancy stuff themselves. With jQuery, we can do a lot of really advanced and dynamic things by writing just few lines of codes. Since its arrival, jQuery has revolutionized the way we do a great variety of web designing and developing tasks. With jQuery, we can create not only simple photo gallery or slides but also some fancy animation schemes using texts and other objects.

Because jQuery effects work wonders in our designs, it makes sense that we take steps to acquire a size-able collection of ready to use plugins in various categories. To make things easy, we are showcasing a substantial array of awesome jQuery effects web designers and developers must have so that they can save time in finding the right solution for their design concepts.

Take a look at this amazing round-up of jQuery effects and enjoy! If you find it hard to implement the jQuery sliders or just need some advice I recommend you visit our web development forum.

jQuery Slider and Effects Index

Slider and Carousel Effects
Text Effects
Animation Effects
Transition Effects
Image Editing and Manipulation Effects
Other jQuery Effects and Resources
WordPress jQuery Sliders

jQuery Slider, Slideshow and jQuery Carousel Effects

1. 3D ROTATION VIEWER

MORE INFO / DEMO (free jQuery plugin)

This cool stuff easily creates a 3D rotation viewer in UIZE that lets users rotate the view of an object a full 360 degrees using a mouse, or finger on the Apple iPad.

2. JQUERY BANNER ROTATOR / JQUERY SLIDER

MORE INFO / DEMO – by CodeCanyon (premium plugin)

3. HTML5 JQUERY SLIDER

This effect creates progressively enhanced slideshow with a fancy transitioning effect.

MORE INFO / DEMO (free jQuery plugin)

4. AVIA SLIDER

This plugin features 8 unique transition effects, image preloader, autoplay that stops on user interaction and lots of easy to set options to create your own effects.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

5. ESTRO JQUERY EFFECT SLIDER

MORE INFO / DEMO – by CodeCanyon (premium plugin)

6. SEXY SLIDER

SexySlider is a jQuery slider plugin that lets you easily create powerful javascript Sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!

MORE INFO / DEMO – by CodeCanyon (premium plugin)

7. HIGHSLIDE JS

Highslide JS is an image, media and gallery viewer written in JavaScript.

MORE INFO / DEMO (free jQuery plugin)

8. CROSSSLIDE

CrossSlide is a jQuery slider plugin implementing in 2kB of Javascript code some common slide-show animations, traditionally only available via Adobe Flash or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself.

MORE INFO / DEMO (free jQuery plugin)

9. PANNING SLIDESHOP

This slideshow has the ability to showcase imagery automatically. This is a twist from classic slideshows which uses a kind of transition to animate between slides.

MORE INFO / DEMO (free jQuery plugin)

10. Supersized jQuery plugin

Supersized jQuery plugin is a full screen background and slideshow that you can use to satisfy the craving of your clients for big and wonderful pictures.

11. Coin Slider

This jQuery slider features smooth transition effects and is compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+

12. Sliding Boxes and Captions

The animation of the sliding element of this plugin either show or cover up the viewing area, thus creating the sliding effect.

13. Polaroid Photo Viewer

You can see your images as if it were stacked one on top of the other with this glamorous effect.

14. 15. Thumbnails Navigation Gallery with jQuery

16. Step Carousel Viewer

17. Revealing Photo Slider

This slider has thumbnail photo gallery, where clicking a button would reveal the entire photo and more information about that photo.

18. Sideways – Fullscreen Gallery

Sideways is a simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS.

19. Nivo Slider

Nivo slider is an awesome jQuery slider that features smooth transition, keyboard navigation and html captions.

20. Slick Auto-Playing Featured Content Slider

Slick Auto-Playing Featured Content jQuery slider has is a main content area, which slides from left to right each with different unique content.

21. SlideDeck

With SlideDeck, you can organize any type of web content into a beautiful and user-friendly slider.

22. DualSlider

With DualSlider, you can slide your images while leaving a space for the description and other details.

23. JCoverflip

jCoverflip has been developed to enable fast and granular customization of the look and feel and feature set.

24. Flip Box

Flip is a jQuery plugin that will flip easily your elements in four directions.

25. ImageFlow

ImageFlow is an unobtrusive and userfriendly JavaScript image gallery.

26. PieceMaker

Piecemaker is a open source Flash image slider that displays images with 3D slice effects. The slide images can be configured from a XML file like setting the tween type, distance, time, delay, etc.

27. Text with Moving Backgrounds

This jQuery effect has some sort of a container which has a moving background, but only set of letters is visible of the background. It will be as if there are holes in your container.

28. Magic Scroller

Scroll your elements with this nice effect which is easy to install. With magic scroller, you can scroll your display vertically to expose its elements, iframes, or imáges. As a precondition all the elements have to be of equal size, and the mask needs to be proportional to the elements per row.

29. jQuery Animated Innerfade

jQuery Animated Innerfade is slideshow based on the work of Torsten Baldes. It has additional functions: slide effect on large images, ‘prev’, ‘pause’, ‘next’ functions, an optional background frame, and a title panel.

30. Pikachoose

PikaChoose is a lightweight jQuery slider plugin allowing for easy presentation of photos with carousels and lightboxes! Pikachoose is designed to be easily installed and easy to setup.

31. MopSlider

MopSlider can accommodate any number of items. It is also very easy to use.

32. jQuery Slinky Slider

Slinky Slider is a jQuery plugin that loads HTML files into panels to be shown inside a nominated

. Once the panels have been loaded, all bar one are collapsed. An automatic animation cycles through the panels showing the content of each in turn. When the user mouses over a panel, it expands and the automatic animation stops. The panels can contain full HTML, or just image references.

33. jQuery.SerialScroll

This plugin allows you to easily animate any series of elements, by sequentially scrolling them. It is a very unrestricted plugin, that lets you customize pretty much everything from outside. You can use horizontal or vertical scroll. This jQuery.SerialScroll doesn’t have one definite purpose. It’s generic and adaptable. You can certainly use it as a screen slider and text scroller. You can even build an automatic news ticker.

34. Anything Slider

AnythingSlider brings together the functionality of all previous sliders and their features.

35. Zoomer Gallery jQuery Plugin

This jQuery effect, zooms your images inside a beautiful gallery once your mouse is on top of it. It does so in a flashy zoom style.

36. jQuery Plugin for Zoomable, Interactive Maps

In this jQuery effect, each location on the map would be represented by a bullet. Clicking the bullet would bring up more information on the location. Since the locations of the bullets tended to be highly clustered, zooming into select subregions was possible.

37. Galleria

Galleria is a JavaScript image gallery framework built on top of the jQuery library. Its goal is to simplify the process of creating professional image galleries for the web and mobile devices.

38. BBC Radio 1 Zoom Tabs

This jQuery effect that can be used as a gallery to where pictures can be presented in a nice slide that automatically changes pictures the moment a mouse is on top of a navigation button.

39. Leopard Desktop with jQuery

This effect features elements that can be dragged and icons and buttons that zoom in when the mouse run on it.

40. Contextual Slideout Tips With jQuery & CSS3

This effect is an easily configurable set of contextual slideouts. Each can be opened in one of four directions – bottom-right (default), bottom-left, top-left and top-right, and each can be in one of three colors – green (default), blue, and red.

41. Animated fullscreen background image slideshow

Changing the background can be done using this effect. A nice textbox can also be added to show information which is simultaneously displayed with the background.

42. Gallery Using z-index and jQuery

You can create an effect where pictures are animated to look like they were discarded one after the other by clicking. This is made using z-index and jQuery.

43. Background Image Navigation with jQuery

This is a beautiful navigation that has a background image slide effect. It has three list items that contain the same background image but with a different position. The background image for each item is animated to slide into place in different times, creating a really nice effect.

44. Morphing Gallery

A gallery that “morphs” images between transitions.

45. Slide Thumbs

With jQuery and some lines of jave-script code, you can turn your boring image viewer into a cool and elegant feature to wow your visitors. This is what this Slide Thumbs can do.

46. Presentation Cycle

Presentation Cycle is a variation on the functionality of Cycle. Instead of generating a list of numbers that are clickable Presentation Cycle generates a progress bar that shows when the new slide will appear.

47. iTunes-like Slider

A simple slider/slideshow which mostly emulates the one on iTunes barring few changes.

48. iCarousel

iCarousel is an open source (free) javascript tool for creating carousel like widgets.

49. Minimalistic Slideshow Gallery with jQuery

Minimalistic Slideshow Gallery with jQuery is a beautiful slideshow gallery that can be easily integrated in your web site. It has a container with a slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails.

50. Related Posts Slide Out Boxes with jQuery and CSS3

This awesome effect works like a little widget that can be used to show related posts in any page. It shows a fixed list at the right side of the screen with some thumbnails sticking out. When the user hovers over the items, they slide out, revealing the title and two links, one for the related article itself and one for the demo.

51. Compact News Previewer with jQuery

This acts as a news previewer that lets you show your latest articles or news in a compact way. The news previewer will show a list of articles on the left side and the preview of the article with a longer description on the right. Once a news on the left is clicked, the preview will slide in.

52. Annotation Overlay Effect with jQuery

You can create a simple overlay effect to display annotations in e.g. portfolio items of a web designers portfolio using jQuery.

53. BxSlider 2.0

BxSlider is a jQuery content slider and image slideshow that features horizontal, vertical, fade transitions and display and move multiple slides at once (carousel).

54. Lof JSliderNews

Use this stunning slider to entertain your readers while scrolling what feature your website has. It has a very smooth user interface that gives your image an added aesthetic appeal.

55. Image Rotator with Preview

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery.

56. Cloud Carousel

This carousel features optional auto-reflections, and the information contained in the Alt and Title tags of the images can optionally be displayed as you hover over each image.

57. jQuery popeye 2.0

58. Control Tabs

Control Tabs creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute. Since it attaches these behaviors to HTML that already has semantic meaning, it will degrade gracefully for browsers that do not support JavaScript, and is search engine friendly. It attaches in one line of code for simple use cases, but is highly customizable and can be used in a variety of edge cases.

59. YoxView

YoxView is a free Lightbox-type media and image viewer jQuery plugin. It’s easy to use and feature-rich.

60. BlogSlideShow

BlogslideShow is a free open code JQuery plugin that enhances your blog pages with fancy image viewer, which provides nice transition effects including CSS3/HTML5-related ones.

61. jQuery Tiny Slider

jQuery Tiny Slider is a small and lightweight jQuery-plugin to create simple inline slideshow.

62. jReel Gallery

This little jQuery image gallery plugin recreates the standard built-in window scrolling with a smooth easing effect.

63. Smooth Div Scroll

Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps. As the name of the plugin hints, scrolling is smooth. There are no visible buttons or links since the scrolling is done using hotspots within the scrollable area or via autoscrolling.

64. s3Slider jQuery plugin

The s3Slider jQuery plugin is slideshow that displays objects with layers that can be positioned anywhere over it.

65. Sliding Login Panel

As the name suggests, this plugin works by sliding down the panel to reveal the log-in box when clicked.

66. jQuery Slideshow using CSS Sprites

This cool slideshow has a very smooth animated transition and customizable animation orchestration that works great in all popular browsers.

67. jqGalScroll

jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos.

68. Multiple Image Cross Fade

This amazing effect flips the object in several views and angles without sliding. This is a nice way to impress your clients.

69. Fancybox

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

70. jQuery Cycle Plugin

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more.

71. jQuery Image Scroller

This scroller is different from others because it is completely autonomous and will begin scrolling once the page loads.

Text Effects

72. jQuery Word Counter

This plugin allows you to set and limit user input by max characters within html textarea (it is only limited by characters other than words). It binds keyup, paste and drag events.

73. jQuery FontEffect

Font effect is a jQuery plugin that add some effect to html text.

74. jTicker Typing Text Effect using jQuery

jTicker is a jQuery plugin that can be used for creating text effect without the use of flash. This effect comes in handy when you want to force the visitor to read the text. But should be used wherever necessary, as the usability suffers. jTicker can be declared on any element and can be stylized using CSS. You can also use event buttons to play, stop and control the speed of the effect.

75. Codename Rainbows

Even without Photoshop, you can make text effects with this by just typing a little code.

76. Grab bag, jQuery text effects

With grab bag jQuery plug-ins, you can have different effects to the text.

77. Color Changing Text and Backgrounds Effects

This effect can be used to change the colors and background of your object in a flashing style.

78. Fade Colors Using jQuery

79. Playing with jQuery Color Plugin and Color Animation

This is the tool if you want to change the color of the text and icons once your mouse is pointed to it.

80. jQuery Approach

Approach is a jQuery plugin that allows you to animate style properties based on the cursor’s proximity to an object. It works in a very similar manner to jQuery animate. However it animates over distance instead of time.

81. AutoCompleter

With autocompleter, your site becomes more user friendly by providing suggestions when a text is entered.

82. 3d Tag Sphere

A rotating 3d tag cloud controlled with the mouse. Tags are scaled according to the weight assigned to them and fade into the background as they rotate.

83. Simple jQuery Text Resizer

Simple jQuery Text resizer adjusts the size of your text for easier readability by clicking the icon.

84. Airport

Airport is a rather simple text effect plugin for Jquery. It emulates the style of those flickering information boards you sometimes find on airports and train stations.

85. Zooming with jQuery

This effect allows the reader to zoom the text for better reading.

86. jQuery Label Effects

A jQuery plugin that applies highlight and shadow effects to text in a control.

87. jQuery Flying Text With Fade Effect

With this great javascript framework, you can create some flash-like, very simple flying and fading text effect using jQuery.

Animation Effects

88. jQuery CSS3 3D Animation

This jQuery effect reacts if you move your mouse around. If it hits one of the cartoons a text will flash and move around the page.

89. Image Cube

The image cube functionality can easily be added to a division with appropriate default settings. It then displays the images contained within the targetted division in a cycle every two seconds. A random rotation is chosen each time to move to the next image. Highlights and shadows are used to enhance the 3D effect.

90. jQuery.Smart3D

This is an effect which can be used on site-header. It’s very simple to use: several layers glued together into a 3D effect.

91. jQuery 3D Rotator

This is a very stunning text effect. The texts are swirling like cosmic bodies in the galaxy as it shines against a black background. The speed and the direction of revolution of the texts depend on the location of the mouse.

92. 3D Sphere

In this effect the elements move in a way that they look as if it were one rotating sphere.

93. 3D Tag Cloud

This works like a carousel but the elements fades into the distance at the end. It also interacts with the mouse. The greater the distance of the mouse from the center the faster it rotates.

94. Flip HTML content in 3D

Rotate3Di is a jQuery Effect Plugin that makes it possible to do an isometric 3D flip or 3D rotation of any HTML content. It also enables custom 3D rotation animations. CSS3 Transforms are used to create this visual “3D” isometric effect.

95. Circulate

This is a very amusing plugin. Once you open it, the object will revolve around the page and if you click the buttons, it will jump in a circular motion and bounce back into position.

96. Spritely

jQuery spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It’s a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds. You can use it on any html web page, and any part of the page can interact with a sprite (click anywhere on this page and wait and you’ll see what we mean).

97. Animated Curtain

With this effect you can animate a curtain to open to show a text or image the moment the rope is clicked.

98. jQuery Animated Postcard

Try this wonderful effect to animate the postcard inspired designs you have. With this effect, the clouds and the lifesaving float moves at the same time.

99. Dynamic PNG shadow position & opacity with jQuery

In this animation, you can drag objects and place them anywhere you want. It also features a switch that can be turned on to amaze your visitors.

100. Quicksand

It’s a nice way of reordering and filtering things with a nice shuffling animation. With this, you can make a beautiful library to make your work organized.

101. Puffing Smoke Effect in jQuery

This effect can be customized so that the chimney can puff a smoke of whatever shape you want. The one above puffs Super Mario Images. This is perfect to be used in headers.

102. jAni jQuery Plugin Animation

jAni is a simple plugin for jQuery which allows you animate background images. The plugin is basically an alternative to the animated GIF but with several benefits. At first, it’s always better to use an animated GIF as this format is supported by all browsers without any JavaScript code or additional markup, but the “dark side” of it is that an animated GIF allows only 256 colors and you cannot control animation in any way.

103. Gravitational Simulation in jQuery

Drop the blocks by touching the red strings with your mouse. This is what this effect can do.

104. jQuery Solar System

This amazing effect simulates the movement of celestial bodies.

105. Animated Landscape Header with jQuery

This effect has a cartoon themed landscape with elements which slide out to reveal additional content.

106. jQuery Parallax

This is a parallax style implementation of user interactions. When the mouse moves over the document (or a specific element) the actions can be translated to modify any CSS property of an element for example an image position, to give a parallax style effect.

107. Rezoner’s jEffects

This effect enhances user interaction by providing decorative effects. It’s all packaged into an intuitive jQuery plugin. Thus, you can sprinkle cool effects on your screen once your mouse is moved.

108. Rotating Billboard with jQuery

Use CSS and jQuery to create the effect of a rotating billboard with two ads. Through this you can make one set of image slices disappear while another one (the other ad) appear giving the look of rotating slices, just like in a rotating billboard system.

109. jQuery Flight Board

A jQuery plugin that sets a division to flip between text messages like a flight board at an airport. The flight board functionality can easily be added to a division with appropriate default settings. It then displays the messages in a cycle after two seconds. Highlights and shadows are used to enhance the 3D effect.

110. Animated Cartoon Robot with jQuery

You can use this effect to amuse your visitors or create this out of fun. It’s an animated way of to inspire someone to look beyond the perceived constraints of web designers and developers.

111. Custom Animation Banner with jQuery

Creating a custom animation banner with jQuery. With this animation setup, you can have different elements in a banner that will animate in a nifty fashion.

112. JavaScript Sprite Animation Using jQuery

With this effect you can add amusement to your pages by having your visitors flip the pages of this animated Javascript using jQuery.

113. Flip

Flip is a jQuery plugin that will flip easily your elements in four directions.

Transition Effects

114. jqFancyTransitions

jqFancyTransitions is easy-to-usejQuery plugin for displaying your photos as slideshow with fancy transition effects. jqFancyTransitions is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

115. Jquery Fade InFade Out

This jQuery effect fades in and fades out anything whether it is an image, text or even a link in a nice and smooth fashion.

116. Lazy Load

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. Using lazy load on long web pages containing many large images makes the page load faster.

117. The Sexy Curls jQuery Plugin

Sexy Curls jQuery plugin is an open source solution which lets you share in the beauty of the page fold feature with ease. It uses the jQuery UI and its resizable package.

118. jQuery Booklet

Booklet is a jQuery tool for displaying content on the web in a flipbook layout. It is built using the jQuery library.

119. jQuery pageSlide

This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.

120. Smooth Animated Menu with jQuery

This effect creates a beautiful menu that slides down and reveal additional content in your menu when you run a mouse over it.

121. jQuery MagicLine Navigation

This effect highlights a background or an underline which follows you as you move your mouse over the different links in the navigation. This happens in jQuery through its animation abilities. The “magic line” is only appended via JavaScript. Once you have added it to the list and have it styled, it figures out the left positioning and the width and animates it as you mouse over the different links.

122. HighlightFade

This effect highlights and then fades a text or an image with a click of the mouse. It can be made to display a highlighting box of different colors.

123. Dynamic Page / Replacing Content

The feature of this Dynamic page/replacing content is that it replaces the content of the page if the navigation button is clicked instead of opening another window.

124. jQuery Cycle Plugin-Effects Browser

125. jQuery Captify

Captify is a plugin for jQuery written by Brian Reavis to display simple, pretty image captions that appear on rollover.

126. Sponsor Flip Wall With jQuery & CSS

Amaze your readers by adding this nice effect which flips an object to reveal the content on its underside.

127. jSquares

jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover.

128. Grid Accordion with jQuery

The Grid Accordion works with the same theory as most other accordions. Only one cell is open at a time. The big thing is that the column of the current open cell expands to a reasonable reading width.

129. jquery Professional Dropdown Menu

jquery Professional Dropdown Menu is a classy way to integrate a long list of items in your menu. Its multiple dropdown style saves space giving a nice user interface to your clients.

130. Superfish jQuery Menu Plugin

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu.

Image Editing and Adjustment Effects

131. jCrop

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

132. jQuery Virtual Tour

This is an extension to the simple panorama viewer that allows you to play a little bit more with jQuery by adding interactivity to transform some panoramic views into a virtual tour.

133. jQuery Corner Demo

This corner plugin is pulling off its magic by adding more elements to the page. Specifically, it adds div “strips” to the item to be cornered and sets a solid background color on these strips in order to hide the actual corners of the real item. So if you step back and look at the cornered element, think of there being solid colored divs hiding the true squared off corners of the item you wish to be changed.

134. Apple-like retina effect

Try this wonderful effect to make the text and images clearer by seeing it up close as if they’re just in the retina of your eyes.

135. Image Highlighting and Preview with jQuery

This effect works by highlighting and previewing images that are integrated in an article or spread over a page. This is a nice way to allow users to view a bigger version of an image that is relevant to some context. It highlights images on a delayed hover and offer a preview mode which will enlarge and center the bigger version of the image on the screen.

136. Image splitting effect

This beautiful image splitting effect is similar to a sliding door effect where the image slides to left or right side and reveals the text behind it, but the thing that makes this different is that the effect looks like the image is splitted into half and one goes left and the other one goes right. One thing that is very important is that there will not be 2 images but only one.

137. ImjQMosaic

imJQMosaic is a simple jQuery plugin that creates mosaic pattern using an image. Apart of just creating the mosaic pattern on an image, it also facilitates the user to put menus on top of the mosaic tile(s). Hence, it can be beautifully used as navigation menu. It can also serve as a substitute to the popular Flash based navigations on the home pages of a website or application which unfortunately don’t work on mobile phones not supporting Flash content.

138. Photo Zoom Out Effect

This effect enables you to create a simple image zoom out effect with jQuery. Thus you can show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websites or image galleries.

139. jQZoom

Make a nice jQuery zoom like the one in the above screenshot. This effect offers different ways of zooming in and out.

140. Cloud Zoom

Cloud Zoom is a free jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers.

141. Crop Example

The crop plugin takes an IMG element and crops them to the dimensions given. The result is a DIV with a background image with the height and width and an offset. The new DIV should also carry across the existing style attributes of the image.

142. AnythingZoomer

This jQuery plugin zooms a small area when you put your mouse over it. It’s very flexible and it’s easy to customize in CSS.

143. imgAreaSelect

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes.

144. Micro Gallery

This jQuery plugin transforms a set of images into a tiny gallery with several options. The Micro Image Gallery allows to switch between a grid view which shows a preview of the images as thumbnails and a single view showing one image only. The navigation bar can be hidden and sliding out when hovering over the gallery, or visible.

145. Interactive Picture

This interactive picture – aka an image that contains tooltips and popup boxes can be useful for showing off a particular aspect of a photo (ie items or people).

146. Rounded Images

You can give your pictures nice rounded corners to enhance the look of your page.

147. JQuery.iviewer

JQuery.iviewer is a jquery plugin used to load and view image in container with ability to zoom image and to drag it with mouse in container.

Other jQuery Effects and Resources

148. Outside the Box Navigation with jQuery

This effect is a nice recreation of the Mac desk, which is something that many people really like.

149. JQuery animation easing plugin example

This jQuery tool is designed as an aid in making nice animations.

150. Greyscale Hover Effect w/ CSS & jQuery

As the name suggests this produces an effect of changes the image into greyscale when you put your on it.

151. Color Picker – jQuery plugin

This plugin can help you select color in the same way you select color in Adobe Photoshop.

152. jQuery Touchwipe

jQuery Touchwipe’s small 1 KB library allows you to obtain the wipe event on an iPhone, iPad or iPod Touch which can be used to scroll through an image gallery. It also works with Android touchscreens.

153. Array of jQuery Animations- Tutorialized

This tutorial will teach you how to make amazing jQuery animation using just a few line of code for each effect. With this you can create a progress-bar in less than 3 lines.

154. Tetris with jQuery

Have fun with cool Tetris on your screen with this jQuery effect.

155. Music player using jQuery

Create an amazing music player coded in xHTML & jQuery that made use of mouse gestures and hotkeys. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse.

156. jQuery Before/After Plugin

This works like a sliding door in our homes. When you drag the navigation button, you expose the background of the image.

157. jQuery CSS Clip Animation Plugin

This is a nice way to scale an image by clicking the FULL, HALF and GONE buttons to see the animation in action.

158. jQuery Background-Position Animation

This effect enhances the ability to make background-position animation. The object can shoot up and move back into position when a click is done.

159. ZURB Annotation plugin

Use ZURB’s Javascript plugin to easily add and save annotations.

160. jQuery Zoomooz

Zoomooz is an easy-to-use jQuery plugin for making any web page element zoom.

161. Colourful rating system using CSS3 and jQuery

Rating system is a very boring part of web browsing experience. That is why a colorful rating system is there to make rating activity more appealing. Take this to improve the rating system mechanism that you have in your site.

162. Dynamic FAQ Section w/ jQuery

With the help of jQuery & YQL, this effect can pull the contents of a shared spreadsheet in your Google Docs account, and use the data to populate the FAQ section with questions and answers. The best aspect of this solution, is that you can change the contents of the FAQ section from within Google Docs – just edit the spreadsheet. You can even leverage the rest of Google Docs’ features, such as collaborative editing. This way, a small team can support the FAQ section without the need of a dedicated CMS solution.

163. Latest Tweets Tooltip with jQuery

If you have a news website, it might be interesting for you to allow your users to see the latest tweets about a topic. This is what this hot jQuery plugin does. It shows the latest tweets about a certain word or phrase. Words or phrases that you want to be searched for in Twitter, are wrapped with the following span. The popup box that appears can be dragged and resized. Clicking on the cross will make it disappear. The tweets are constantly being loaded in a predefined time span. This loading stops when the user hovers over the tooltip box.

164. Crazy Dots – jQuery Plugin

CrazyDots is a jQuery Plugin that creates a loading spinner via CSS. Best appearance is with CSS3 capable browser, but can be made to work in older browsers, too.

165. jQuery UI Animation Effects

The jQuery UI Effects brings us different animation techniques that we can use to in meet the need of our design projects.

WordPress jQuery Sliders

166. UBILLBOARD WORDPRESS SLIDER

uBillboard is a Premium Slider for WordPress. It is a jQuery based slider with a multitude of transitions and options for you to be able to customize it to your needs while not overwhelming you with options you never wanted or needed. Version 3 is a revolutionary release with most of the codebase rewritten from scratch. This has enabled us to integrate many features that you have been requesting during the first year. Make sure you see this WordPress Slider demo in action!

MORE INFO / DEMO– by CodeCanyon (premium plugin)

167. WORDPRESS LI JQUERY SLIDER

liJQuery Image Slider plugin for WordPress is carefully crafted slider/banner image rotator, full of features, easy to install and customize. It comes with intuitive – user friendly WordPress admin interface.

MORE INFO / DEMO– by CodeCanyon (premium plugin)

168. SLIDER PRO – WORDPRESS SLIDER PLUGIN

Slider PRO is one of the most powerful slider plugins for WordPress on the market (some buyers have been saying that it’s actually the best). The slider offers you 100+ customizable properties, 100+ possible transition effects, 10+ skins and much more. Also, the slider’s administration area is very powerful and uses the default WordPress design, which WordPress users are already familiar with. This slider plugin is carefully coded, using WordPress development best practices, to avoid conflicts with other themes and plugins that are well coded. Please take a look at the list of features at the feature page and visit the slider’s demo page.

MORE INFO / DEMO– by CodeCanyon (premium plugin)

169. CCSLIDER WP

CCSlider WP makes it easy to embed the CCSlider jQuery slideshow plugin in your WordPress theme. CCSlider is an unique slideshow plugin because of the fact that it supports 3d transitions! There are 10 stunning 3d transitions available, and also 10 stylish 2d transitions.

MORE INFO / DEMO– by CodeCanyon (premium plugin)

170. SLIDER EVOLUTION FOR WORDPRESS

Slider Evolution is a JQuery plugin that lets you easily create powerful javascript sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider! Create an unlimited number of sliders with customized settings for each one, and place them anywhere on your WordPress website with ease. You must check out this WordPress slider demos

MORE INFO / DEMO– by CodeCanyon (premium plugin)

171. SUGAR SLIDER – WORDPRESS SLIDER

Sugar Slider makes it as easy as it could possibly be to create gorgeous sliders for your WordPress powered site. Forget nasty custom fields and image URLs. You can even forget about manually resizing every image before you upload it. With a huge list of features, Sugar Slider is on of the most advanced and powerful WordPress slider manager.

MORE INFO / DEMO– by CodeCanyon (premium plugin)

172. ESTRO – JQUERY WORDPRESS SLIDER

“Estro” meaning “creativity”, “talent” or “inspiration”, in Italian, is a fitting moniker for this beautiful slider. For the design of this slider we wanted to create a price of work which could form the centerpiece of your next web project. A starting point, who?s design and execution would inspire you and supercharge your own work. See the WordPress slider demo in action.

MORE INFO / DEMO– by CodeCanyon (premium plugin)

173. DDSLIDER for WORDPRESS

Manage your slides the way you want, don’t depend on pages and posts. Upload Images via AJAX direct from the slide manager page. Over 11 different transitions

MORE INFO / DEMO– by CodeCanyon (premium plugin)

174. KEN BURNS WORDPRESS SLIDESHOW

With cool features and effects this WordPress slider can become the perfect way to showcase your products.

MORE INFO / DEMO– by CodeCanyon (premium plugin)

175. WORDPRESS SLIDER GALLERY SHORTCODE

This plugin creates a new shortcode for WordPress. With this new shortcode, you can create a slider gallery in seconds just by typing [slider] while you’re writing your post or page. The slider will display the images that you have uploaded to the current post or page. If you need more options, this simple shortcode features multiple attributes that you can set

MORE INFO / DEMO– by CodeCanyon (premium plugin)

176. WORDPRESS ANYTHING SLIDER / BANNER MANAGER

MORE INFO / DEMO– by CodeCanyon (premium plugin)

177. WP Slideshow Gallery

With the WordPress slideshow gallery plugin you can embed a slideshow gallery into any WordPress post/page with the use of the “sideshow” shortcode. You can hardcode a slideshow gallery into any of the PHP files of your WordPress theme using just a few lines of code. This WordPress Slider plugin have thumbs below the image being presented, text overlay and looks pretty cool – and then it is completely free.

MORE INFO / DEMO – by tribulant.net (free plugin)

178. SMOOTH SLIDER

Smooth Slider is a free WordPress Plugin for creating a dynamic slideshow for featured posts on a blog. The slideshow created by Smooth Slider are JavaScript and Text based, that’s why bloggers and site owners will get full benefit of Search Engine Optimization as the texts are readable by Search Engine.

MORE INFO / DEMO– by Tejaswini Deshpande (free plugin)

179. ROYALSLIDER

RoyalSlider for WordPress is a cross-device jQuery content slider with touch-based navigation and fluid layout. It has user-friendly admin area where you can manage slides, change slider settings, customize interface and add blocks-captions using custom WYSIWIG editor.

MORE INFO / DEMO– by CodeCanyon (premium plugin)

180. FEATURED POSTS WORDPRESS SLIDER

Show off your content the real way – in a slider! This WordPress slider includes 6 predefined layouts and allows you to customize layouts with 18 variables. Intuitive admin GUI with inline help. Try the preview now.

MORE INFO / DEMO– by CodeCanyon (premium plugin)

Author : Sonny Day

Sonny M. Day is a passionate SEO and web design enthusiast who loves photography, mountain climbing, snorkeling and dirt bike riding.

No related posts.

11 Best CSS Frameworks For Making Your Website Stylish

Adam Parker — Thu, 12 Jan 2012 06:40:55 +0000

The field of website design and development has grown out to become a really competitive virtual arena. It is no longer sufficient just to have static slump of online web application, but to ensure survival in the web world, the website has to be laced with a number of functionalities and have irresistible design. The coding has to be apt and precise to ensure there is no glitch and the web pages are easily loaded on the browser. Besides, there has to be viable scope for further additions and improvements in the web design, so that more up to date features can be added in the web design.

One of the best tools available with website designers and developers to provide high end solutions to high ended website development needs are CSS frameworks. Along with reducing the coding structures and coding time, CSS frameworks offers the developers convenient website development.

What exactly does the CSS Framework stands for?

One of the very basic reasons behind the flourishing websites is the existence of active PSD to CSS conversion services. CSS is an acronym for Cascading Style Sheet Language which enables you to present your website in such a attractive way. CSS takes human psychology and presentation semantics into consideration, and aims at carefully organizing the data, so that, there is no drop in the user’s attention span while visiting through your website.

CSS gives web developers an immense flexibility in coding by separating the markup content i.e. PSD to HTML or XHTML conversions and the presentation content, which describes the page layout, presentation, fonts and styling and etc. Another handy attribute of CSS is that of CSS Frameworks. CSS Frameworks are the previously prepared elements and exists in the libraries. These are called with .css extension and allows the developers to recall a particular code. Thus they don’t have to write the entire code again and again and hence a lot of time is conserved. By taking the repetitiveness out of the coding, it gives ample scope for the developers to concentrate on the strategic area, and produce more visually astounding web applications. Besides, the reduced coding is directly shows direct implications on the loading time of the website and makes the website to quickly be loaded on the web browsers.

Using a CSS framework is a smart choice, instead of having to begin from the very scratch each time you go for website development. You can make a default style sheet and markup template for yourself and use it each time you have to begin the task of website development. The basics will be covered in the Framework and you can concentrate your efforts and skills on the detailing and uniqueness of the website.

The eleven most popular CSS frameworks

1. Blueprint

A Norwegian tech student names Olav Frihagen Bjørkøy was the reason behind the development of one of the strongest CSS Framework – Blueprint. Blueprint offers a sturdy platform to use Cascading style sheet language and develop typographic grids. This CSS framework was designed with the aim of enable you to considerably reduce the time required for CSS development. Blueprint gives you a very user friendly grid generator by which you can build frames based on the choice of the width size. Besides, it also provides you with customized style sheets to let you integrate the buttons and typography, forms having complete professional design, and style sheet which comes handy for printing purposes. Lastly, one of the most important advantage is that it can execute mass reset of the default styles of your browser.

2. Yahoo! UI Library CSS Foundation

The Yahoo UI library is powered by JavaScript and CSS, and is a compilation of utilities and controls which empowers you to develop highly responsive and interactive web applications, by providing high end techniques like DOM scripting, AJAX and DHTML. The Yahoo UI Library is available free of cost and is available under a BSD license.

The Yahoo UI was carefully prepared by the front end engineers of Yahoo Inc along with the contributors across the Globe. It also has a proven record of adding scalability and quickness to your web application along with providing robust foundations. If you are comfortable with JavaScript, this is perhaps the best and the most powerful solution for you.

3. The Yet Another Multicolumn Layout – YAML

The Yet Another Multicolumn Layout is a result of extreme diligence of Mr. Dirk Jesse, the developer of YAML, who designed it with precise understanding of web standards to make it compatible with the various prevalent web browsers being used today. And also, YAML provides you with a debugging style sheet and a print style sheet. Another advantageous feature of YAML is that, it offers detailed documentation and provides examples in two languages – English and German. Also it enables you to develop CSS layouts right within your web browsers, by providing an effective editor known as YAML Builder, which works on a “What you See Is What You Get (WSYIWYG)” basis and subsequently integrate various creatively designed elements into your framework.

4. 960GS

The 960 Grid System came into existence with a sole aim to smoothen the work flow related to developing a website by providing a common platform of 960 pixels layout width. The 960 Grid System provides you with two different package options of 12 and 16 columns which can be used along with each other or separately. It gives you sturdy background support by putting together several useful templates and graphics, also providing you with an overlay tool.

5. Fluid 960GS

The highly advantageous Fluid 960 Grid System has been the result of the combination of the hard work of Nathan Smith and his original creation, 960 Grid System.

6. Elastic CSS

This CSS framework is actually an elastic in the CSS frameworks scenario. Just like an elastic, it can be stretched and give sturdy support to an extensive range of layouts, which involves – fixed, fluid and elastic layout. Need not compromise on the kind of layout you want for your web application, just run through various permutations and combinations across the elastic CSS framework until you get the layout of your choice. The only thorn in the rosy attributes of Elastic CSS Framework is that it requires the use of JavaScript. JavaScript provides you with high quality and aesthetic designs, but could be a cumbersome task for those who are not well versed with JavaScript.

7. The jQuery UI CSS Framework

This CSS Framework was designed specifically for developing customized widgets based on jQuery. The classes covered in this CSS Framework envelopes a very wide range of all the user interfaces which are required. If you employ the jQuiery UI CSS Framework, you will be able to easily integrate the plugins along with your website code and will be able to utilize the shared conventional markup codes. If you use jQuery, you get the power to create buttons and also choose many buttons at a single given time.

8. SenCSs

The expansion of SenCSs would reveal – Sensible Standards CSS, which is exactly what this CSS Framework do. It lets you sensibly style all the rhythmic (read: repetitive) part of the CSS and hence saves a lot of time to concentrate on other important issues related to website development.

9. Typogridphy

This CSS framework is based on the 960 Grid System and enables you to create highly dynamic and varied grid layouts. Typogridphy is a Typographical and Grid Layout CSS Framework which gives website designers and developers the ultimate scope to swiftly code highly functional and aesthetic looking grid layouts.

10. Tripoli

Tripoli cannot be classified as a CSS framework but rather is a CSS standard for depicting the HTML elements. Tripoli provides a sturdy rendering engine and a concrete foundation for developing animated layouts without making any changes with the typography of coding. It is a very mellow CSS standard which resets the default browsers and works on then silently.

11. BlueTrip CSS Framework

This CSS framework does complete justice to its name and provides you the best possible amalgamation of the three frameworks – 960GS, Blueprint and Tripoli.

Why to opt for CSS Frameworks?

In the present generation, it is not sufficient to just work hard but it is a prerequisite for success that the person should work smart and not just hard. The CSS Frameworks lets you achieve just that. It is a smart way of developing websites. Instead of starting from the scratch, it protects the developers from all the anxiety and frustration by providing robust foundations for developing websites.

In addition to that, the website development process is quite tedious and takes a lot of time, and a person may make certain mistakes in the repetitive codes. CSS frameworks keep a check on that. In case all of your projects has a default CSS code, you will not be required to go through the source code of each and every page of the website. A detailed CSS framework ensures fruitful work flow of the processes and saves a lot of time, avoiding any scope for misunderstandings or miscommunication between the team of developers.

As you must have read above, most of the CSS frameworks are already cross browser compatible, thus you need not worry about the cross browser compatibility of your website.
In the end there is hardly any persuasion left to suggest the use of CSS frameworks. It saves a lot of your valued time, supplements the website with highly profitable features and functionalities and allows the developers enough scope and flexibility to come out with the best of designs.

Author : Adam Parker

Adam Parker is working as an E-marketing Executive at HTMLFirm. HTMLFirm is specialized in providing PSD to HTML, PSD to WordPress, PSD to Magento Conversion services.

45 Useful jQuery Menu Plugins For Better Navigation

Dustin Betonio — Sat, 24 Dec 2011 12:00:00 +0000

With a jQuery menu plugin your site visitors may have the best and most dynamic navigation available. jQuery is a lightweight, cross-browser compliant, incredibly awesome and extremely powerful JavaScript framework (library) that emphasizes and simplifies interaction between JavaScript, CSS and HTML. With jQuery, you can change the look and feel of your website into something extraordinary and it is easier than you think. This way you are providing a different and very dynamic look and feel that users will typically love.

Navigation is one of the most important elements in web design. It has to be neat, usable and creative at the same time in order to not drive your visitors away because they can’t find what they are looking for. jQuery is one of the most powerful tools to enhance your navigation and make it stand out. This post will roundup 45 fresh and superb jQuery menu plugins that will make your menus look awesome. Please leave a comment if I missed out some. Also consider other jquery features and plugins e.g. jQuery image zoom.

1. Mac Style Dock Menu in jQuery and CSS

If you are a big Mac fan, you will love this CSS dock menu. It is usingJquery library and Fisheye component from Interface and some of myicons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page.

2. QuickAccess Menu

Easily customizable, easy to integrate and provides quick access to your site. The code is flexible for the product to be fully responsive. The minimal design was created to fit harmoniously with your site.

DOWNLOAD / DEMO by codecanyon (premium jQuery plugin)

3. Lavalamp

Lavalamp is a simple, ready to use JQuery plugin which allow you to create a stunning effect over your horizontal navigation bars. Nice to see, easy to implement.

4. Quick & Pro Menu

Quick & Pro Menu creates a special style of jQuery mega menus which is only seldom seen in Websites but really cool for giving visitors quick access to a lot of information

DOWNLOAD / DEMO by codecanyon (premium jQuery plugin)

5. Superfish jQuery menu plugin

Superfish is a JQuery plugin especially dedicated to menus. It allows many improvement from what you can achieve with HTML and CSS as such as hover support for IE6, animations, keyboard accessibility and more.

6. Menu Maker CSS3 jQuery

This is a JavaScript code that gives you a friendly tools of making a navigation Menu bar with a rounded corner and a smooth animation for search input box. Making navigation menu was never been so easy. All you got to do is dragging the slider bars to change the menu properties.

DOWNLOAD / DEMO by codecanyon (premium jQuery plugin)

7. vertical sliding JQuery menu

Your clients will love it, there’s no doubt about it. And even better, the tutorial will also teach you how to design that kind of menu using Photoshop.

8. Sticklr – Sticky Side Panel CSS3 + jQuery Plugin

Inspired by Envato site-switcher, here is a useful sticky side panel made with CSS and enhanced greatly with jQuery.

DOWNLOAD / DEMO by codecanyon (premium jQuery plugin)

9. Puffer Fish Navigation

Rollover navigation with a glow

10. Sliding Tabs – jQuery Plugin

DOWNLOAD / DEMO by codecanyon (premium jQuery plugin)

11. jQuery Context Menu

ContextMenu is a lightweight jQuery plugin that lets you selectively override the browser’s right-click menu with a custom one of your own.

12. Sherpa | Complete Navigation System

As the name suggests, Sherpa is a total solution for all your navigation requirements. Sherpa brings together the three main navigation elements of every interface – Navbar, Sidebar and Sticky Footer.

DOWNLOAD / DEMO by codecanyon (premium jQuery plugin)

13. Slide Down Menu

The idea is to make a box with a menu item that slides out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.

14. Apple style Navigation with CSS3 JQuery

Apple is known for very clean design and if you have been to their website in the last few years you’ve seen their primary navigation. It’s a staple of the Apple website and this plugin recreates Apple’s navigation using CSS3 and jQuery.

15. Drop Menu

With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element.

DOWNLOAD / DEMO by codecanyon (premium jQuery plugin)

16. Javascript Huge Horizontal Menu

DOWNLOAD / DEMO by codecanyon (premium jQuery plugin)

17. Ninja UI

Ninja user interface is skilled in the techniques of JavaScript and CSS, going unnoticed until called upon to perform the arts of webjutsu.

18. Mega Menu Complete Set

This Mega Drop Down Menu Complete Set is perfect for creating unique menus by using one of the 10+ jQuery effects and one of the 13 color variants. Based on a custom grid, this menu allows you to organize your content into columns (from 1 up to 12) with a lot of typography examples such as headings, lists, images styling, tables, form elements, etc.

DOWNLOAD / DEMO by codecanyon (premium jQuery plugin)

19. Image Hover Move

A simple and practical navigation or featured image jQuery plugin.

20. jQuery Scroller

With jQuery Scroller you can create easily smart scrolling text, news ticker, or image animations with few lines of code in jQuery!

21. jQuery One Page Navigation Plugin

With this plugin you’ll make the page scroll smoothly when the navigation is clicked. It also automatically highlights the correct navigation section depending upon which section is scrolled to.

22. jCrumb

JCrumb is a JQuery plugin for instantly adding breadcrumbs to any webpage without the need to worry about sitemaps, or server side languages.

23. Sticky Footer

DOWNLOAD by codecanyon (premium jQuery plugin)

24. WZSplitter

WZSplitter is a flexible, easy to use layout plugin. It helps end users to set up any combination of resizable panels just by providing a few configuration values.

25. Asura jQuery Footer

Asura jQuery Footer is a highly customizable sticky footer. It gives you more freedom to put your content onto the footbar.

DOWNLOAD by codecanyon (premium jQuery plugin)

26. Subway Map Visualization jQuery Plugin

This plugin renders unordered lists into a subway map similar in style to the London Underground map. It emphasizes a clean, aesthetic look with curves and proper placement of markers for stations and interchanges.

27. Memu – A simple CSS / JavaScript / JQuery Menu

A small, solid jQuery plugin which is quite easy to use. It’s a menu which can be used with or without JQuery. What’s special about this script is the included plugin jstorage.js (which is some amazing work btw) to store the current item. So if you’re navigating around, the selected item will stay highlighted. This will spare you some server-side code. You can try this one by clicking on the menu item “File -> New”.

28. Dropp

Dropp is a jQuery plugin which replaces regular dropdown menus ( )

Author : Lars Vraa

Lars started tripwire magazine back in January 2009. He is really passionate about web design, web development, SEO, social media and loves to look into new technologies, techniques, tools etc. and to write articles for tripwire magazine readers.