Navigation

20+ Demos Showing Advanced jQuery Effects

JavaScript, Web Design, Web Development | Jul 22, 2010

Just a short while ago, Flash was one of the primary technologies used by web designers to add interactivity to a website.

Since the introduction of the iPad, with its lack of the Flash Player, there’s an acceleration in the web development world to use alternative technologies to Flash, such as jQuery, Ajax and others.

Although Flash is still a very powerful and useful tool, which works great on many cases, several of the effects that web designers are accustomed to creating in Flash, can be just as easily implemented using jQuery.

Here are 21 online demos that show the power of jQuery for creating advanced effects and interactivity that can rival Flash.

 

1. Flip! A jQuery plugin

This demo mimics the popular card flip technique which can rotate an element 360 degrees around its own x or y-axis.

 

2. jQuery Quicksand plugin

This is a great plugin for sorting an array of elements/icons on a page with nice fade-in/fade-out and animation effects.

 

3. ImageFlow

This image viewer is similar to Apple’s CoverFlow interface that has become so familiar in their various products and applications.

 

4. Building an interactive map with jQuery instead of Flash

This demo joins the power of jQuery with Ajax to really create an engaging interface.

 

5. Slideout Tips With jQuery & CSS3

Clicking on the “+” symbols reveals additional information with a nice smooth animation effect.

 

6. Zoomer Gallery

In this demo, what appears to be a regular static image gallery is given some extra interactivity by using a multi-layer zoom effect when hovering over an image.

 

7. jQuery Circulate

This demo shows the much used Flash effect of circling an image around a page – all done using jQuery.

 

8. Photo Zoom Out Effect

This demo looks deceptively simple, but upon further examination you will find there are several layers to the complexity of the zoom-out effect.

 

9. Sliding Boxes and Captions with jQuery

Here we get to see how powerful transitions can be created using jQuery, a technique once reserved for Flash developers only.

 

10. CSS3 Lightbox Gallery

This plugin looks like it was written specifically for social-media. Dragging and dropping a photo on top of the “share box” will open a modal window that can be the interface to call an API via AJAX which can allow the user to share a photo on Flickr, Twitter, Facebook, and other sites.

 

11. Making a Photoshoot Effect With jQuery & CSS

Although this demo may seem like eye-candy at first glance, it could be a very powerful tool for working with large images when coupled with AJAX or HTML5 local storage.

 

12. Awesome Bubble Navigation

Here the developer makes good use of color transitions and animation to produce a very attractive and interactive menu.

 

13. Beautiful Background Image Navigation

In this demo each user action triggers several transitions which all act to fully immerse the user in the interface.

 

14. AviaSlider

AviaSlider uses classic Flash-like transition effects to enhance what would appear to be a standard slider interface.

 

15. Background Image Slideshow

Animated backgrounds are one of the areas where Flash used to dominate in web design. Here is an example using jQuery instead.

 

16. Panning Slideshow

Another unique take on the typical slideshow interface. Here the author adds diagonal navigation to spice up the interface and to make it stand out.

 

17. jqFancyTransitions

This plugin can be used to display your photos as a slideshow with fancy Flash-like transition effects.

 

18. iCarousel – Horizontal images slider

Another slideshow that adds just a touch of easing to make the transitions really stand out. It’s no wonder that they chose to showcase sexy Mac products in this demo.

 

19. Making an Interactive Picture with jQuery

This demo can be used to take advantage of websites where there is lots of screen space. Clicking on a section of the website reveals a modal box which displays more information about the clicked section.

 

20. Cloud Zoom

A plugin that looks like it was designed with eCommerce in mind. Cloud Zoom is easy to implement and can really enhance the user’s experience.

 

21. Apple-like Retina Effect

Anyone who has used an iPhone, iPod touch, or iPad is familiar with the “Retina View” that will enlarge a small area on the screen when you touch the area for an extended period of time. This demo implements this effect for the desktop.


Compiled exclusively for WDD by Kalim Fleet. He is a professional web designer and blogger with over 6 years experience. The web is his passion as he splits his time between blog writing, software development and social media. He loves using and developing new applications for the web, mobile, and desktop.

Do you know of any other great examples of jQuery effects that can rival the power of Flash? Do you ever suggest jQuery effects over Flash when your clients request them? Please share your views and examples below!

Share this post
Comments (no login required)
  • Tephlon

    The flip effect (the first one on the list) is nice, but when you see it on the iPhone it jumps half a page down whep “flipping”. Maybe a Mobile Safari bug.

  • http://davezoontjes.nl Davinho

    Very nice effects

  • http://zdesignstudios.com JP

    AWESOME!!! collection

  • http://www.exionyte.com Exionyte

    Thanks for sharing.

    I will surely require one or two of these plugins in a couple of projects I’m doing!

  • http://stylishwebdesigner.com/ Tanya

    Amazing Stuff. All the effects r really very very gud

  • http://www.neeshu.com wallpapers

    amazing stuff i love the slideshow effect this will reduce the amount of flash used in designs and hence reduce the amount of time required in pageload

  • http://www.webandgadgets.com Mary

    Thanks for this post, there are some really nice effects in this list! I have to disagree, however, with the idea that the acceleration toward jQuery and Ajax came since the introduction of iPad. It seems to me it started a good year ago, if not two!

  • http://www.cassola.info alberto

    very very good….. very interesting collection.. thanks

  • http://www.asif.co Asif

    This is really great list! thanks for sharing.

  • http://www.jordanwalker.net Jordan Walker

    Thanks for the awesome round up.

  • http://trimbakeshwar.in/narayan-nagbali.aspx narayan nagbali

    hay nice post….

    thanks for information….but it will really help when u will elaborate it more…

    Thanks….

  • http://www.michaelsaathoff.com Michael Saathoff

    i have been using jQuery for the last year and really like it! these are some great resources, thanks for the post!

  • Ido

    amazingly useful! thank you

  • Chris

    Absolutely love it! Thank you for this, these will come in handy!!

  • EH

    Thank you for this list which I am sure will come in handy. However I still hope Steve Jobs will choke on his iPad. I for one couldn’t help smiling when the problem with the iPhone 4 antenna emerged go Android!

  • http://www.dealybug.com mtrang

    Great collection. I’ve been meaning to start incorporating jQuery in my sites and this will be a good reference.

  • http://www.cropsdesign.com Tyler

    Its good to see a list with a variety of effects instead of the same 10 image sliders that seem to show up on everyone else’s lists.

  • http://www.glfusion.org Geiss

    #18 – the iCarousel entry is done with MooTools v1.11, not jQuery. Other than that, a great collection. I especially dig #2 Quicksand!

  • http://www.jogosgratispro.com/ Jogos Gratis

    Awesome collection of jquery effects. In fact, I ‘m using two of those effects to some of my websites.

  • http://www.royalty-club.com Rondell Paul

    Great!! Thanks for the post!
    I think i may use one of two of these on my personal site.

  • http://www.madebyblaze.com Blaze Pollard

    HTML5 Ajax Website http://bit.ly/9hXmZt
    PLUS jQuery

  • Adrian

    Great list here.

    Although the first paragraph of this article made me LOL. Flash is on the way out because of the ipad?…really? You think thats the soul reason? Wow.

  • Alexander

    thank you, great )

  • http://vladcarp.ro Vlad Carp

    this is really good!!!

  • http://www.fuzzimo.com/ fuzzimo

    Can never have enough jQuery :). That Quicksand plugin is slick.

  • http://sodamedia.com Ted

    STUNNING :| Reminds me of Flash 5.

  • http://www.goblinridge.co.uk Yorkshire Web Design

    Great list of resources, very helpful. Thanks Ted.

  • http://www.ksnagra.com Kanwaljit Singh Nagra

    This is just jQuery goodness!

  • http://www.elaunch.com.au Michael

    Great examples,may be flash will become obsolete one day :)

    Unfortunately jQuery still has some issues with SEO and sometimes cross-browser functionality.

  • http://www.jerry-lee.cz Jerry-Lee

    COOOOOOOOOOOOOOOOOOL!!! :)

  • MatsSvensson

    What is the point?

    99% of all animations seem to just make the GUI feel slow and sluggish.

    To have to sit and wait while the GUI crawls around like a glazier feels hopelessly outdated.

    We had enough of this shit this in the 80’s and early 90’s

    • http://evanjacobs.net/ Evan Jacobs

      Interactivity can make or break web design. I guess the best answer is smart implementation… how do you get the design you want with the leanest code and most usability?

      Not all javascript GUIs are slow, but the device you load it on definitely can be a determining factor. All good points to keep in mind!

  • http://evanjacobs.net/ Evan Jacobs

    Great collection! I might actually use the AviaViewer on my personal site… I have been looking for an effect like that.

    Cheers!

  • Mario

    why don’t u buy a computer from the 00’s?
    very nice collection! Tutorialzine and Codrops are definitely the best jQuery resources!

  • http://www.benstokesmarketing.co.uk Ben

    Great jQuery resources . . . thanks for sharing with us all

  • http://www.peruandarts.com Chullos

    Very useful and unique tools

  • http://www.dynamicwp.net Eko Setiawan

    Amazing jQuery…. but must be careful in its application, especially if you want to use more than one jQuery effect. Can cause conflict.

  • pesho

    awesome Collection
    Thanks a lot :D

  • http://www.liminal-design.co.uk/ Liminal Web Design Cornwall

    Great selection, some I already have bookmarked but the majority not so some of these are going to be really helpful on upcoming projects.

    Would quite like the background image slide-show as a full screen scalable gallery, might have a play.

    Thanks for the post

  • http://www.matejlepej.com MatejL

    Really great collection! Sometimes I wonder when will people stop using flash other than for video purposes :)

  • Truet

    Sorry but 2nd paragraph shows sophistication of author. Jquery and Ajax are not 2 technologies. Jquery is one of MANY Ajax frameworks which just means its just a bunch of javascript code and you can write your own.

    Html5 has nothing to do with JavaScript or jquery. Html5 has a lot of capability that used to require flash.

    Readers should learn JavaScript, html5 and then some basic Ajax before jumping into an Ajax framework. Blindly embedding some cool effect per this article will give you a dated non-web 2.0/3.0 website. It will just look like you popped in a gallery effect etc.

    Just say no.

    Say yes to original design and thought.

  • http://www.definitivemedicalwebdesignandvideo.com Definitive Medical Website Design

    Some good demos here. Some oldies but goodies and some freshness. It’s always great to have these for my arsenal. Thanks for the post.

  • http://rajesharma.com broncha

    Nice collection! jQuery is sleek :)

  • Cam

    Eh, this is just some stuff that flash could do when it FIRST came out. All these FX that everyone is Ooo and ahhh’n over are OLD. When jQuery does something NEW that hasn’t been done on the web I’ll drool over it then.

    • http://www.psyched.be/wordpress/ La Cinyc

      This has indeed already been done in flash (and sortlike extensions/programs).
      However, what they try to do is trying to have a code that will be available on every machine without too much extra hassle (I know, I know, “most” people have a flash plugin installed, yet, to reach everyone and on every device, we will need a format that can be loaded server or clientside without the need of other “external” formats).
      Trust me, if I could convince every one out there, I’ld recommend using flash, same goes for a browser like firefox or safari instead of “certain others”.

      And some people are just tired of having to design two websites to make it available through flash or through another xhtml and css based page to make it as clean as it might look in flash…
      And, for all that, I am kind of starting to like jQuery although I’ll need to study alot more on it…

      Whether we like it or not, these things have only just started to reach a bigger public out there using iPhones, iPads and the like to surf the net and yes, they like the Apple feel they have with this sort of code, so yes, even though a small percentage of designers will always be on the lookout for the new (and that’s a good thing to provide for future “trends”), the mass of society always lingers together a few steps behind.

      I hope u catch what i mean here, it’s more complicated as how i just stated it but it’s not only the designing we have to keep in mind, but all the rest that shows up with it. So I do also understand your point of view, so, keep up the fight for revolution, we need that, as well as knowing when to use what sort of “programming language”.

      besides, alot of jQuery code may also involve flash anyhow… (though mostly just as “the box”)

  • http://www.psyched.be/wordpress/ La Cinyc

    btw, i forgot to add: with jQuery it’s easier (when used properly) to be more SEO friendly than flash…

  • Daniele

    Nice gallery!

  • http://www.jbwebdev.com JONxBLAZE

    These are great resources, I love Jquery. Thank you!

  • http://winampskin.ru Momx

    Wery nice, thx :)

  • http://www.webdesignhouston.com Houston WebDesign

    Great postings. Far better than heavy loaded flash.
    Nice one mate! Thank you for sharing it :)

  • http://www.webdesignhouston.com Houston WebDesign

    Great postings. Far better than heavy loaded flash.
    Nice one mate! Thank you for sharing it :)

  • http://www.professionalsofttech.com Chintan Kotadia

    Thanks for sharing it. Really loved the “jqFancyTransitions”

    Superb mate!

  • http://www.websitesevolution.com/ Varun Batra

    I have also used some effects on my website hope to get some reply :)
    http://www.websitesevolution.com/

  • http://www.krititech.in Basu

    The stuff here is great. In fact i was desperately searching for the interactive map effect for a project of mine. I am a beginner in j query and the stuff here is pretty advanced. Can anyone suggest places where to get guidance in this stuff.

  • http://freelancer-id.com Alaa Badran

    Nice collection,

    I would like to share: jQuery Gloss
    http://www.freelancer-id.com/gloss

    Thaks :)

  • http://www.swayaminfotech.com Swayam Infotech

    Really good things to know. Also This JQuery effects are really good. As a web design and development firm, its very use full for us and naturally for everyone who will use this.

  • http://www.v4orkut.com Dayana

    Nice collection,kindly share some effects for textarea

  • http://www.flashminddesign.com Matt

    Great post, thank you so much for these. I usually turn to such articles for inspiration. This has done that and more.