jQuery Photo Effects Tutorials Library

Everyone likes to see imaginative and fancy effects because they look attractive and lovely as well. So today I am presenting jQuery Photo Effects to enhance your vision and thoughts. I compiled this java script library after a very deep research that what people want. And as your awareness that jQuery is very lightweight library of JavaScript that emphasizes communication between HTML and JavaScript but if anyone is now aware then he must get complete information out of this and below mentioned jQuery Photo Effects Library of tutorials will be more helpful for those. Must leave your reviews regarding this compiled library.

Generating the pixellogo from TechCrunch in HTML

At the same time as ago, the popular tech blog TechCrunch started a new design for their website. Beside with design, they released logo and want make this logo in HTML using jQuery.

Generating the pixellogo from TechCrunch in HTML

Thumbnails Navigation Gallery with jQuery

In this tutorial author is going to make an amazing gallery with scrollable thumbnails that slide out from a navigation. You can use jQuery and some CSS3 properties for the style.

Thumbnails Navigation Gallery with jQuery

Display Your Favourite Music with jQuery & Last.fm

The design we’ll be creating lists out the top albums from our Last.fm profile by displaying the cover art with a subtle shadow. When the link is hovered, a retro vinyl record will slide out from the cover, purely for visual interest and extra cool factor points.

Display Your Favourite Music with jQuery & Last.fm

Animated Skills Diagram with Raphaël

In this tutorial we will show you how to create a diagram using Raphaël – a small JavaScript library that is great for working with vector graphics. The idea is very simple: we will draw some arcs using mathematical functions and we’ll be displaying a skill percentage in a main circle when we hover over those arcs.
Let’s start with the markup.

Animated Skills Diagram with Raphaël

jCrop

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.

Jcrop » the jQuery Image Cropping Plugin

Sliding Boxes and Captions with jQuery

All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.

Sliding Boxes and Captions with jQuery

Grid Accordion with jQuery

Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens. They are a clever and engaging mechanism for packing a lot of information in a small space…

Grid Accordion with jQuery

Creating a polaroid photo viewer with CSS3 and jQuery

A beautiful country that my girlfriend and me visited last year during our summer holiday. While we were there, we took a lot of pictures that would look pretty nice on polaroid.

Placing them on simple polaroids on a webpage simply didn’t do it for me. I wanted to drag them around, rotate them and still have a fun time. That’s were CSS and jQuery come in play. By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you’ll see the shadow. When it’s placed down, it’s rotated to the left or the right (random).

Creating a polaroid photo viewer with CSS3 and jQuery

Image Wall with jQuery

Today we want to show you how to create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on
the page and make a ribbon slide in when we click on the picture. The ribbon will show some description next to the picture and when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.

Image Wall with jQuery

Animated Text and Icon Menu with jQuery

This tutorial will show you how to create a slick menu with a nice animation feature on hover. The idea is to create various elements slide out, change and animate the background color of the item and then slide the elements back in with a different color

Animated Text and Icon Menu with jQuery

How To Build a Sliding Feature Slideshow with jQuery

jQuery slideshows are the best way to show lots of information on webpage its cover small space of the page with cool functionality. Let’s start build your own slideshow using this tutorial.

How To Build a Sliding Feature Slideshow with jQuery

jQuery Thumbs

jQuery Thumbs dynamically enfold links and images within span tag. You can define default width and height in the css file.

jQuery Thumbs

Animated fullscreen background image slideshow

Do you remember the Advanced jQuery background image slideshow I posted last year? Because of that tutorial, reader Evens sent me an
e-mail, asking how the effect on the website from Climate Crisis could be recreated. It seemed liked an intersting thing to do, so I took the time to try to create the same effect.

With the help of some small HTML, nifty CSS and loads of jQuery, we’re able to create an animated fullscreen background image slideshow. Read the rest of this article to learn how it’s built.

Animated fullscreen background image slideshow

Making a Beautiful HTML5 Portfolio

In today’s tutorial we will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin. You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more.

Making a Beautiful HTML5 Portfolio

Apple-like Retina Effect With jQuery

Apple has long applied a winning strategy in marketing – create well designed products, have a dedicated fan base, and let the hype build up before every product release.

This is also the case with the latest version of their iPhone. But what I found interesting is the term they coined – “Retina display” and the promo image accompanying it.

Apple-like Retina Effect With jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *