Inspirations

8 Incredible jQuery Powered Websites

Written by Kevin Liew on 18 Jul 2011
22,856 Views • Shares
2 comments

Introduction

From what I can see, a lot of web designers/developers start dumping flash aside and start investing in HTML/CSS/Javascript to build highly interactive websites with cool animation. Well, the truth is, comparing it to flash, it's more search engine friendly, easier to maintain and also cheaper to build.

I put some times going through their code, interestingly, they all are using jQuery javascript framework! Thank God I invested my precious times in the right framework :) If you want to learn more advance technique of jQuery, you can read my whole collection of jQuery tutorials.

Below is a list of websites I found. Most of them have amazing animation that you wouldn't thought it will be possible to be built with HTML/CSS/Javascript, also, most of them has pretty good user experience as well. Okay, without further adieu, happy reading and cracking the logic behind it.

  • Seamco What to see: Interesting animation throughout the whole site., which simulate the process of production process of liquid bottle. It needs to be a really good timing and trigger different animations. Pay attention at those bottles which being toss around, it's frame by frame animation :)
  • Sony PIIQ What to see: Cool navigation menu with big submenu. Absolutely love the fading effect from black & white to color images. Also, the color picker (cube shape) is pretty neat, it uses SVG to draw the shape and animate it with javascript.
  • Nizoapp What to see: Scroll down and you'll see it! It's a very simple coming soon page with cool animation.
  • New Quest What to see: Randomise menu items button, it rearranges all square boxes in random order, click on each will trigger a modal window. Absolutely like the 2 navigation tabs on top left corner, delay and sudden acceleration effect, and look at its logo, it changes color to match the background too.
  • Driving Futures What to see: Play with the 3 buttons in the homepage, they swap roles (display sub menu, display intro video) when you click on of them. News pagination and data loading are pretty cool as well.
  • Method Design Lab What to see: A HTML 5 websites. I like the date selector and time filter. The way how data being loaded reminded me of digg experiement though
  • MatchBall What to see: Nice illustration integrated with smooth and simple animation which makes this site good.
  • Head 2 Heart What to see: Sliding content. What so special about this website is the sliding animation. Something looks like parallax effect, but I guess it's more like a delayed animation. Look cool though.
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

2 comments
lxn 5 years ago
Fantastic collection for inspiration!
Reply
csschops 5 years ago
These are really sweet - nice to see a few (instead of 50!) well chosen examples - restrained, clever use of html/css/jquery. Love 'matchball' but my fav is 'Nizo' for the simplicity. Thanks for sharing.
Reply