Stunning Jquery Effects & Lightbox Part-1

0
9

JQuery is one of the most popular JavaScript frameworks which are powerful tools and huge benefit for developers to improves the designs integration with Web applications. This article will briefly introduce you to the jQuery with excellent examples. JQuery is really wonderful plug-in for designers which are giving attractive functionality to the web sites. Even now day’s every designers focusing on Jquery because of needs to have functionality out of the box that can be accessed by using this.
Here with showcased Complete 95+ Stunning Jquery effects examples, with Tutorials For Your reference and Inspirations.

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. 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. jqFancy Transitions

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.

 

 

 

22. Photo Zoom Out Effect

 

jquery plugins

 

Here you’ll learn how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websites or image galleries.

23. jCrop

 

jquery plugins

 

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

24. Zoomer Gallery

 

jquery plugins

 

Zoomer Gallery allows you to easily transform your image lists into beautiful galleries with Flash-like zoom effects in them. It’s a simple but elegant way of giving your interfaces a nice little shine and at only 2KB in size, it’s both compact and surprisingly easy to use.

25. jQuery Captify Plugin

 

jquery plugins

 

Captify is a plugin for jQuery written by Brian Reavis (@brianreavis) to display simple, pretty image captions that appear on rollover. It has been tested on Firefox, Chrome, Safari, and the wretched Internet Explorer.

26. Animate Panning Slideshow with jQuery

 

jquery plugins

 

In this tutorial you’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides.

27. Sponsor Flip Wall With jQuery & CSS

 

jquery plugins

 

In this tutorial you’ll learn to create an interactive sponsor wall that fits a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

28. jSquares

 

jquery plugins

 

jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover.

29. ZURB JavaScript Annotation Plugin

 

jquery plugins

 

A plugin to easily add and save annotations on an image.

30. Zoomooz

 

jquery plugins

 

Zoomooz is an easy-to-use jQuery plugin for making any web page element zoom.

31. iViewer

 

jquery plugins

 

iViewer is a plugin used to load and view image in container with ability to zoom image and to drag it with mouse in container.

SHARE
Anand is a web designer and developer with a passion for interaction design. He is the founder of 56 Pixels, who has got more than 5 years of experience in the field of print and web.