Many websites out there use jQuery, and actually what plugins they are using? In this article I will show you 7 examples of jQuery in real world examples as well as the links to the plugin. Note that the examples might not using the exact plugin introduced below but they have the similar function. Read on to find out!
SpoonGraphics website has the nice huge image rotator that showcases the artist, Chris Spooner’s portfolio. Well this image rotator is actually achieved by using the popular jQuery Cycle. jQuery Cycle is powerful and it is really easy to use too.
The second example is the HTML5This website. This website is still in countdown stage, I’m curious about how they make the countdown timer. With a little inspection, the countdown timer is actually powered by a jQuery plugin call “CountDown”. Very straight forward name.
New York Times
The third example is the New York Times. When you browsing the OP-ED Columnist page like this one, when scrolling down the page, it will slides in a Next Article box at the right bottom corner. I found out that a jQuery plugin call SlideNote can perform the similar function.
I really really like McKinney homepage design. On the main page, the slider looks really cool. Actually McKinney developed this slider and open sourced it. You can find this slider, which given the name “lectric” at their Github. What so good about this slider is that the slides are functional on touch devices like iPhone. I tried it and it really works!
IGN Corporate Site
IGN has a nicely designed corporate site and the page is long. However, when you start scrolling down the page, the menu bar sticks at the top of the screen. A recent discovered plugin called “jQuery Waypoints” can perform the same function too. Check out this example from the plugin.
Here is another example of sticky element when scrolling down the page. Defringe is a really nice minimalistic website, and the sidebar’s “Categories” box will stick to the top of the screen while scrolling down. There is a tutorial to teach you to create sticky sidebar by Designwoop, or you can also use this plugin called Contained Sticky Scroll.
This is the final example. Kachibito is a Japanese Web Design blog, and there’s a sliding down panel at the top area when you click the “Open” button. This is cool because you can display important information without going to a new page or sacrificing a big space. You can also do this nifty effect by following this article, “Nice & Clean Sliding Login Panel Built With JQuery” by Web Kreation.
Above are the seven real world examples of jQuery being used and what plugin actually they used. Hope you enjoy this article!