20+ Brilliant and Advanced jQuery Effects

Posted in Freebies4 years ago • Written by 23 Comments

Every new technology has its own comparisons with its competitors as jQuery is closely compared with Flash. Flash was the technology used by many web designers a while ago, but now its the turn of jQuery to add the special effects or interactivity to a website. jQuery makes it easier to create sophisticated custom effects and animations compared to Flash and also jQuery takes a lead when it comes to SEO.

Some of the stunning effects which jQuery can produce are sliding in different directions, adding ease to animations, effects like flip-in, sorting, zoom-in effects in photos, panning, creating a Photo shoot effect, slider effects and many more.So we present you some of the links that shows you the demos of various brilliant and advanced effects and it gives you a clear picture in itself without the help of any tutor.

1.Apple like retina effect

Achieve a retina like effect as found in Apple iPhones with this plugin with jQuery and CSS. This turns the static image into a fully functional ‘Retina Effect’ i.e place your pointer anywhere in the image and get a zoomed out image of the same within the same page.

2.Aviaslider

AviaSlider, a slideshow plugin features unique transition effects, includes an image preloader, autoplay and stop, supports linked images and size of only 8 kb works with jQuery lower and higher versions.

3.Beautiful Background Image Navigation

A compact design which includes three options in the form of vertical sliders with a unique background image which navigates with the options is achieved with this jQuery plugin, Beautiful Background Image Navigation.

4.Bg image slideshow

An advanced background image sideshow featuring big images with changing text and playback controls. This plugin is created with jQuery combined with CSS where transparent PNG’s are used to create the see-through effect in the menu and text background.

5.Bubble Navigation

A simple menu which automatically expands in the shape of a bubble and displays the rest of the menu inside it, e.g gallery and prints inside Photos menu is achieved with the help of awesome Bubble Navigation plugin with jQuery.

6.Advanced login panel

A login form is the most important one in any web design but most of the time it displays the redundant information, here is a jQuery plugin which reveals the self and its content of the top panel only when clicked.

7.Carrot creative

Just sit back and enjoy the slideshow with bigger images with Carrot Creative which displays the images as a horizontal slideshow and moves to the next image after a short duration of time automatically.

8.Circulate

Circulate, a jQuery plugin make your images circulate around your page. This plugin requires the jQuery library as well as the easing plugin, just include a small piece of code to get the images circulate .

9.Cloud zoom

A zoom jQuery plugin, Cloud Zoom displays a larger or zoomed out image of the particular area when hovered over the original image. This plugin is much smaller, has more features and has robust compatibility over browsers.

10.Flip box

Flip, a jQuery plugin is used to flip the elements easily in four directions, top, bottom, left and right. You have to just a small code as in all the plugins and also you could add callbacks.

11.Hovering gallery

The hovering image gallery shown here uses the latest jQuery and CSS techniques which scans a folder of images and builds a drag and drop light box gallery around it. Search engine friendly and compatible with browsers.

12.icarousel

iCarousel displays the images in a slideshow moving them in a horizontal manner as in a Carousel and this can be used as a Simple New ticker.

13.Imageflow

Imageflow, an obtrusive and user-friendly JavaScript image library displays the images in a carousel manner which allows you to see the previous image, current one and next one on the line.

14.Interactive picture

An interactive image which contains tool tips and pop boxes which is shows any particular aspect or a detail of a photo is created with this jQuery slider plugin, Interactive picture.

15.Jqfancy transitions

A fancy transition slideshow plugin from jQuery plays a slideshow with fancy transition effects for displaying your photos and also this plugin is compatible and tested with all the browsers.

16.Jquery dj hero

Based on the fun game jTypingHero which tested your typing skills, this plugin jQuery DJ Hero combines jQuery ans CSS3 creates 3 records which can start spinning and even scratching is enabled.

17.Jquery plugin for zoomable interactive maps

Here is a jQuery plugin for Zoomable and interactive map which allowed visitors to find important marine science resources in North California. jQuery made it simple to build, animate and display the map.

18.Jslickmenu

jSlickmenu plugin creates slick menus with jQuery combining some of the CSS3 features like rotation and shadows. This plugin is highly customizable and easy to use, Works well with Apples Safari and Google Chrome.

19.Panning slideshow

A slideshow jQuery plugin, Panning Slide show uses amazing photos from Flickr for which the links are found at the bottom which takes you to its source. Go on and create your own slideshow.

20.Photo shoot

The PhotoShoot jQuery plugin creates a photo shoot effect by converting the page into a photo shooting stage by simulating a camera like feel and also displays the images shotted by you. This gives the ability to take shots of the background image.

21.Quick sand

Quicksand plugin reorders and filters items with a nice shuffling animation. You could filter the applications and utilities separately and sort them either by their name or size.

22.Slideout context tips

A jQuery and CSS3 plugin, Contextual Slide out Tips is ideal for product pages and online tours which have to be compact and at the same time deliver the maximum information. Here, each option can be opened in all the four directions and in all the three primary colors.

23.Sliding boxes

Sliding boxes, a jQuery plugin has images, captions and nice effects to show them, Just keep your pointer in the respective box and get the information about the author and his work in a sliding manner.

24.zoomer gallery

Zoomer gallery plugin is used to display images with zooming effects as seen in Flash. This jQuery plugin easily transforms your images and is only 2 KB in size which is very compact to use.

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

26 Written ArticlesWebsite

Photography and design lover i like these two essential things more than my job(Web developer). So only i have launched Pokkisam and a Photography,design inspiration blog too Photography and design inspiration blog Follow me in twitter to get interesting things in photography and design >>pokkisam

23 Comments Best Comments First
  • irengba

    Tuesday, September 21st, 2010 10:37

    14

    Nice collection. Thanks for sharing..

    +4
  • Sascha Muehlen

    Sunday, December 18th, 2011 18:38

    21

    @gultkin and @ka, the easiest way is to use jquery joomla plugins avaible cross over the word. Must apps are ready coded, just install and feel!!!

    +3
  • krishen

    Monday, September 20th, 2010 16:42

    9

    superb!
    I loved d quicksand.. just brilliant
    thnx for sharing :)

    +2
  • write my thesis

    Friday, April 6th, 2012 14:35

    23

    but i don’t know how can i embed this scripts to Joomla? pls help me.. Regards..

    +2
  • vinay

    Wednesday, September 22nd, 2010 08:27

    15

    really awesome collection.. very nice jquery effects.
    Thanks for share…

    +1
  • Shrikrishna Meena

    Monday, September 27th, 2010 18:22

    18

    Well, I Know jquery is used to create some good effects but i never imagined about such advanced effects….
    Nice…. Work…

    +1
  • Pedro

    Monday, September 20th, 2010 13:55

    8

    We used a mixed of plugins for our site.
    you can see the site here: http://www.float.pt
    thanks

    +1
  • DTX Studios

    Monday, September 20th, 2010 09:29

    7

    This is just amazing. Thanks for compiling all these wonderful jquery effects here. Good work.

    0
  • Seth Hardison

    Wednesday, September 22nd, 2010 18:05

    17

    This is an awesome collection of jquery effects. The creative use of jquery makes my need for flash diminish significantly. Keep up the great work

    0
  • Daniel Neubauer

    Monday, September 20th, 2010 08:14

    4

    Nice list of jQuery plugins. Thanks for the work Siva.
    Some of them are really new to me. I will definitely give them a try.
    Daniel – CEO Mammut Medien

    0
    • Sivakumar

      Tuesday, September 21st, 2010 09:23

      13

      Thanks MR.Daniel :)

      +3
  • adhi

    Wednesday, September 22nd, 2010 17:15

    16

    nice, really great jquery.
    waiting mod, or component for this joomla :)

    thanks for creative share…

    -1
  • Alex Flueras

    Tuesday, September 21st, 2010 07:06

    11

    Nice collection. Thanks for sharing.

    -2
  • Brett Widmann

    Thursday, January 27th, 2011 21:16

    19

    These are very nice effects! I will definitely be using some of these.

    -3
  • enam

    Tuesday, September 21st, 2010 08:59

    12

    Good one. Thanks for sharing.

    -4
  • Akbar

    Monday, September 20th, 2010 08:28

    5

    awesome collection.. great mate.. love it

    -5
  • Helen Neely

    Tuesday, February 21st, 2012 19:17

    22

    Nice list you have here. I like the Flip box, but my problem with it is that it is a bit difficult to configure otherwise it I would also recommend it.

    -5
  • Chris

    Tuesday, June 28th, 2011 15:27

    20

    I’ve been playing around with jQuery on one of my sites, pretty cool stuff, ut I dont really know what i’m doing. Still, these have been a big help so thanks.

    -5
  • Amin

    Monday, September 20th, 2010 09:03

    6

    Nice selection. ”Sliding boxes” were great.

    -5
  • Luiz Rakkan

    Monday, September 20th, 2010 02:53

    2

    Nice site! Keep it working! I’m learning jQuery to make some parts of my site looks pretty. I’m an older coder, old school, everything done with plain javascript is a pain. With JQuery and his UI and sites like yours I’m ready to the this new “adventure”.

    -6
  • gultekin

    Sunday, September 19th, 2010 17:38

    1

    i want to use them with joomla.. but i don’t know how can i embed this scripts to Joomla? pls help me.. Regards..

    -6
    • ka

      Monday, September 20th, 2010 08:09

      3

      Hey @gultekin

      First, you need access to mod your template with Joomla – you need to make sure that jquery’s JS as well as the plugin’s JS is included in the header of the particular page you want the effect to run.

      Each effect should have their own API calls to configure and run it.

      Hope this helps.

      -4
  • Kyle Claypool / Optima Worldwide

    Monday, September 20th, 2010 16:44

    10

    Thanks for sharing this set! I’ve used a few of them before. Sliding Boxes work really well for getting more text onto a page without it looking too cluttered. AviaSlider looks a lot like Coin Slider (http://workshop.rs/projects/coin-slider/), though maybe a bit more polished.

    Keep the great content coming!

    -8
  • write my thesis

    Friday, April 6th, 2012 14:35

    23

    but i don’t know how can i embed this scripts to Joomla? pls help me.. Regards..

    +2
  • Helen Neely

    Tuesday, February 21st, 2012 19:17

    22

    Nice list you have here. I like the Flip box, but my problem with it is that it is a bit difficult to configure otherwise it I would also recommend it.

    -5
  • Sascha Muehlen

    Sunday, December 18th, 2011 18:38

    21

    @gultkin and @ka, the easiest way is to use jquery joomla plugins avaible cross over the word. Must apps are ready coded, just install and feel!!!

    +3
  • Chris

    Tuesday, June 28th, 2011 15:27

    20

    I’ve been playing around with jQuery on one of my sites, pretty cool stuff, ut I dont really know what i’m doing. Still, these have been a big help so thanks.

    -5
  • Brett Widmann

    Thursday, January 27th, 2011 21:16

    19

    These are very nice effects! I will definitely be using some of these.

    -3
  • Shrikrishna Meena

    Monday, September 27th, 2010 18:22

    18

    Well, I Know jquery is used to create some good effects but i never imagined about such advanced effects….
    Nice…. Work…

    +1
  • Seth Hardison

    Wednesday, September 22nd, 2010 18:05

    17

    This is an awesome collection of jquery effects. The creative use of jquery makes my need for flash diminish significantly. Keep up the great work

    0
  • adhi

    Wednesday, September 22nd, 2010 17:15

    16

    nice, really great jquery.
    waiting mod, or component for this joomla :)

    thanks for creative share…

    -1
  • vinay

    Wednesday, September 22nd, 2010 08:27

    15

    really awesome collection.. very nice jquery effects.
    Thanks for share…

    +1
  • irengba

    Tuesday, September 21st, 2010 10:37

    14

    Nice collection. Thanks for sharing..

    +4
  • enam

    Tuesday, September 21st, 2010 08:59

    12

    Good one. Thanks for sharing.

    -4
  • Alex Flueras

    Tuesday, September 21st, 2010 07:06

    11

    Nice collection. Thanks for sharing.

    -2
  • Kyle Claypool / Optima Worldwide

    Monday, September 20th, 2010 16:44

    10

    Thanks for sharing this set! I’ve used a few of them before. Sliding Boxes work really well for getting more text onto a page without it looking too cluttered. AviaSlider looks a lot like Coin Slider (http://workshop.rs/projects/coin-slider/), though maybe a bit more polished.

    Keep the great content coming!

    -8
  • krishen

    Monday, September 20th, 2010 16:42

    9

    superb!
    I loved d quicksand.. just brilliant
    thnx for sharing :)

    +2
  • Pedro

    Monday, September 20th, 2010 13:55

    8

    We used a mixed of plugins for our site.
    you can see the site here: http://www.float.pt
    thanks

    +1
  • DTX Studios

    Monday, September 20th, 2010 09:29

    7

    This is just amazing. Thanks for compiling all these wonderful jquery effects here. Good work.

    0
  • Amin

    Monday, September 20th, 2010 09:03

    6

    Nice selection. ”Sliding boxes” were great.

    -5
  • Akbar

    Monday, September 20th, 2010 08:28

    5

    awesome collection.. great mate.. love it

    -5
  • Daniel Neubauer

    Monday, September 20th, 2010 08:14

    4

    Nice list of jQuery plugins. Thanks for the work Siva.
    Some of them are really new to me. I will definitely give them a try.
    Daniel – CEO Mammut Medien

    0
    • Sivakumar

      Tuesday, September 21st, 2010 09:23

      13

      Thanks MR.Daniel :)

      +3
  • Luiz Rakkan

    Monday, September 20th, 2010 02:53

    2

    Nice site! Keep it working! I’m learning jQuery to make some parts of my site looks pretty. I’m an older coder, old school, everything done with plain javascript is a pain. With JQuery and his UI and sites like yours I’m ready to the this new “adventure”.

    -6
  • gultekin

    Sunday, September 19th, 2010 17:38

    1

    i want to use them with joomla.. but i don’t know how can i embed this scripts to Joomla? pls help me.. Regards..

    -6
    • ka

      Monday, September 20th, 2010 08:09

      3

      Hey @gultekin

      First, you need access to mod your template with Joomla – you need to make sure that jquery’s JS as well as the plugin’s JS is included in the header of the particular page you want the effect to run.

      Each effect should have their own API calls to configure and run it.

      Hope this helps.

      -4

Comments are closed.

54.83.133.189 - unknown - unknown - US