Line25

20 jQuery Tutorials Teaching Super Cool Visual Effects

Read the full post

We all love the fancy effects that can be produced with the jQuery Javascript library. The tutorials in this collection are all based on different topics, but they all include some kind of super cool visual effect as part of their finished product. Follow the steps to recreate the described design, or use the steps to migrate the effects into awesome creations of your own.

Making a Beautiful HTML5 Portfolio

View the tutorial

Apple-like Retina Effect With jQuery

View the tutorial

Shutter Effect Portfolio with jQuery and Canvas

View the tutorial

Thumbnails Navigation Gallery with jQuery

View the tutorial

Rotating Image Slider with jQuery

View the tutorial

Animated Text and Icon Menu with jQuery

View the tutorial

Animated Skills Diagram with Raphaël

View the tutorial

Expanding Image Menu with jQuery

View the tutorial

Create an Attractive Before and After Photo Effect with jQuery

View the tutorial

Sliding Boxes and Captions with jQuery

View the tutorial

Animate Panning Slideshow with jQuery

View the tutorial

Grid Accordion with jQuery

View the tutorial

Simulate Gravity with jQuery

View the tutorial

Create a Funky Parallax Background Effect using jQuery

View the tutorial

Advanced jQuery background image slideshow

View the tutorial

Creating a polaroid photo viewer with CSS3 and jQuery

View the tutorial

Display Your Favourite Music with jQuery & Last.fm

View the tutorial

How To Build a Sliding Feature Slideshow with jQuery

View the tutorial

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

15 Comments

  1. Donnie says:

    Excellent round up of tutorials.

  2. Tom Durkin says:

    Some really interesting ideas here! Love the portfolio animation.

    Thanks for another great post.

  3. John says:

    Very groovy bro….thanks.

  4. This pretty much sums up what needs to be seen around some parts of the web today, and even I could benefit from some of it http://www.creativeautomaton.com.

  5. Its so lovely when you get a usable but still beautiful website.

    Thanks for this post.

  6. Thank you very much for these will def be using these over at http://www.webdesignhighwycombe.com thanks for sharing! will make this blog a regular visit I think now!

  7. Osmair Coelho says:

    Cara que massa isso ai hein, com certeza vou ver mais afinco.

  8. Nishant says:

    That is a really good Article, for new idea we are visit on this site regularly.
    <a href="http://www.mastercomputech.com&quot; title="web designing and development company">Master computech – web design and development company</a>

  9. Fresh baked jQuery mobile OG wireframe for anyone struggling to find one :)

    http://eternalcontr.tempwebpage.com/jquery-mobile-gmnigraffle-stencil/

  10. wordpress says:

    your web and your post very well !!

  11. avangard600 says:

    Интернет магазин электроники.http://drop-shipper.ru/

  12. Budd says:

    You've hit the ball out the park! Incriedble!

  13. ABDUL JANOO says:

    Very usefull post…….. 4 my new blog

Sorry, comments are now closed