Tuesday, February 8, 2011

Animated Portfolio Gallery with jQuery

In this tutorial will create an animated portfolio gallery with jQuery. The gallery will contain a scroller for thumbnails and a content area where we will display details about the portfolio item. The image can be enlarged by clicking on it, making it appear as an overlay.

The idea is to animate the content elements whenever a thumbnail is clicked. We will animate the heading from the top, fade out the previous image and slide the descriptions from the sides.

Demo | Download | View Tutorial

Resource : Codrops

Hover Slide Effect with jQuery

In this tutorial we will create a neat effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images. The sliding effect will be random, i.e. the images will slide to the top or bottom, left or right, fading out or not. When we click on any area, all areas will slide their images out.

Demo | Download | View Tutorial

Resource : Codrops

Notebook with jQuery Booklet

You have been seen the notebook effect with flash many times. Many of the portfolio and personal websites have been created in this effect but only in flash.

Now this is time to make this possible with JQuery. Let's do it...!!

Demo | Download | View Tutorial

Resource : Codrops

Portfolio Zoom Slider with jQuery

In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin.

The idea is to give the user the option to view details of a portfolio item by zooming it on hover, and to allow a full view by clicking. Moreover, we want to have a couple of images for each item, hence we will create a slider.

When integrating jQuery scripts, it sometimes happens that there are conflicts, be it because of some shared attribute or because of some specific structure that is needed by each jQuery plugin. In this tutorial we will bump into some of these conflicts and we will adapt some lines of code in order to bypass them.

Demo | Download | View Tutorial

Resource : Codrops

Parallax Slider with jQuery

We will make use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will give a great depth to the whole slider when it’s in motion.

View Demo | Download | View Tutorial

Resource : Codrops

Sweet Thumbnails Preview Gallery

In this tutorial we will create an image gallery with jQuery that shows a preview of each image as a little thumbnail. The idea is to hover over the slider dots and make the regarding thumbnail slide into the previewer. When clicking a slider dot, the full image will slide in from the right or left side, depending on the currently viewed image.

Update: If you are interested in integrating the thumbnails preview slider you might want to check out the new post on how to use only the preview part:

View Demo | Download | View Tutorial

Resource : Codrops


Polaroid Photobar Gallery with jQuery

In this tutorial we are going to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rotated thumbnails that pop out on hover. The full image will slide in from the bottom once a thumbnail is clicked. In the full image view the user can navigate through the pictures or simply choose another thumbnail to be displayed.

For this gallery we will be using the 2D Transform plugin to animate rotations.

The beautiful photos used in the demo are by talented Tetsumo.

View Demo | Download | View Tutorial

Resource : Codrops

Wednesday, January 19, 2011

Periodic Table of the HTML5 Elements

There is no need to scare from HTML5. If you are in search of the complete list of predefined HTML5 elements, then this is for you. Even if you have not decided to study about HTML5 yet, take a look at this. This may prove very useful to update yourself from HTML4 and XHTML 1.0 to HTML 5.

The table in this link shows the 104 elements currently in the HTML5 working draft and two proposed elements (marked with an asterisk).

URL : http://joshduck.com/periodic-table.html

Tuesday, January 18, 2011

Jquery Advanced Ajax validation with CAPTCHA






jQuery offers a plugin called validate which will allow you to create stunningly user friendly sign up forms, login addresses, contact forms and much more. The plugin is written and maintained by Jörn Zaefferer, a member of the jQuery team, lead developer on the jQuery UI team and maintainer of QUnit. In this tutorial I’m going to teach you how to create a signup form with advanced AJAX validation and CAPTCHA.

URL : www.tutorialcadet.com/jquery-advanced-ajax-validation-with-captcha/

Control youtube player with HTML and Javascript

Link : http://code.google.com/apis/youtube/js_example_1.html

Hello Designers and Developers,

Sometimes when we want control our you-tube video-player in our website with some HTML Elements and we are unable to do this. But you what, this is really possible to control the video like PLAY, PAUSE, STOP, MUTE, UNMUTE, SET VOLUME, SET SEEK, VIDEO LOADING from you-tube and may other useful and needed things from HTML and JavaScript only.

Visit this link for a DEMO of this magic : http://code.google.com/apis/youtube/js_example_1.html

Enjoy the Coading....

Monday, January 17, 2011

50 Really High Quality Photoshop Navigation Menu Tutorials

Hi Designers,

I personally realized many times a stop point when I am designing a web layout and the time comes to design the menu. This is really a big stopper which makes the designers deep thinking. We create a menu, take a look overall and delete the menu to design a new one.

This is very funny to tell, but this really happens many times. here is 50 Really High Quality Photoshop Navigation Menu Tutorials for the designers stucking for the menu designs.

Contributors