15 Ultimate jQuery Pictorial Effects Tutorials That Will be More Proficient

Adina Claudia Posted on 30. Sep, 2011 | Comment in!

• Tweet

• Tweet

All and sundry likes to see fancy effects for the reason that, they seem very lovely and attractive as well. That’s why today I have decided to provide you a sufficient number of ultimate jQuery Pictorial Effects to enhance your thoughts. There is a complete research work behind this performance I personally tried to give you a touch of this Java Scripts’s library.

I think most of you previously conscious that jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTM.But for those who are unaware must get more info out of this, so below you can see 15 ultimate jQuery pictorial effects tutorials that will be more proficient for you…

Generating the pixellogo from TechCrunch in HTML

A while ago, the popular tech blog TechCrunch launched a new design for their website. Along with this design, they released a new logo. I wanted to generate this logo in HTML using jQuery.

Thumbnails Navigation Gallery with jQuery

In this tutorial we are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style. The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or right.

When a thumbnail is clicked it will be loaded as a full image preview in the background of the page. We will also have a text container for one of the menu items.

Animated Text and Icon Menu with jQuery

Today we want to show you how to create a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.

The icons are taken from the incredible Noun Project that “collects, organizes and adds to the highly recognizable symbols that form the world’s visual language, so we may share them in a fun and meaningful way”.

How To Build a Sliding Feature Slideshow with jQuery

Javascript slideshows are one of the best ways to display lots of information in a relatively small space while adding cool functionality to a web page. Let’s build our own slideshow with sliding panels navigatable by button links. You could use the slideshow to showcase featured content on your homepage, or as a simple image gallery. Either way it’s quick and easy to create with the help of a couple of handy jQuery plugins.

jQuery Thumbs

jQuery Thumbs dynamically wrap images and links with a span. You can specify a default size (width and height) inside the css file. And optionally it can automatically center the image inside the “frame”.

This plugin was developed using jQuery, unobstrusive Javascript, and CSS by Joan Piedra.

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.

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.

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.

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.

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…

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).

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.

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.

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.

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.

Author: Adina Claudia

I'm Tech/Design writer on my research and located New York. I enjoy all Gadgets and modding iDevices also, me special writing for Dzinepress, writing creative contents on tutorials and Inspirations on Tutorial Lounge, also love to write on Smashing Buzz on all HOT topics.

5 Arcticles posted by Adina Claudia