jQuery Wisdom » Animation and Effects

Creating a polaroid photo viewer with CSS3 and jQuery

Jim — Fri, 18 Sep 2009 18:30:05 +0000

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

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).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).
Web Site
Demo
Download

jQuery Tutorial Create Rounded Corners

Jim — Fri, 18 Sep 2009 18:25:24 +0000

An easy jQuery tutorial about the tecnique to realize rounded corners with jQuery.

Adding rounded corners to an element, using no extra markup.
Web Site
Demo
Download

How To Fill An Element WIth Gradient In jquery

Jim — Fri, 18 Sep 2009 18:18:52 +0000

It allows you to define a gradient fill and have an element filled with a gradient. You can set the direction of the gradient (right-left or up-down) and the opacity of the gradient easily.

It allows you to define a gradient fill and have an element filled with a gradient. You can set the direction of the gradient (right-left or up-down) and the opacity of the gradient easily.
Web Site

jQuery Drop Shadow Effect Plugin

Jim — Fri, 18 Sep 2009 17:55:09 +0000

This plugin creates soft drop shadows behind page elements, including text and transparent images.

Use this plugin to create realistic drop shadow effects in your site.
Web Site
Download

jQuery Agile Carousel Plugin

Jim — Fri, 18 Sep 2009 16:25:30 +0000

Agile Carousel is a JQuery Plugin. The JQuery AJAX function is used to deliver settings to the included PHP script “make_slides.php”, which you do not need to modify. The PHP script uses the requested settings to custom-build an image carousel. The carousel html is then placed to the html document within the container you specify.

The PHP script automatically gathers slides from a specified directory, or you may include your own PHP file that lists slide locations in order to integrate with your existing database, CMS, API, etc. Also includes the ability to make your own, external UI elements.
Web Site
Demo
Download

jQuery Polaroid Photo Viewer Plugin

Jim — Fri, 18 Sep 2009 16:13:29 +0000

Polaroid Photo Viewer with CSS3 and jQuery allows you to drag and rotate the polaroid images around. 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).

Italy. 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).
Web Site
Demo
Download

jQuery Fancy Zoom Plugin

Jim — Fri, 18 Sep 2009 16:10:04 +0000

Fancy Zoom is providing a smooth, clean, truly Mac-like ancy zoom effect, the images are resized if size is bigger than document screen and can be applied directly on an image, no more link wrapper needed.

This plugin is the jQuery version on the fancy zoom effect. As describe on the fancy zoom web site, this effect is providing a smooth, clean, truly Mac-like effect, almost like it’s a function of Safari itself (see the demo below).

As the well famous light box plugin you must encapsulate your thumb images with a link that point to the zoomed image:
Web Site
Demo
Download

Create A Tabbed Content Rotator Using jQuery

Jim — Thu, 17 Sep 2009 17:26:22 +0000

This Tabbed content rotator was used jQuery and its interface library jQuery UI JavaScript. When your mouse move over to the tab and it will change the content accordingly. This effect is good at to present your portfolios on your homepage to customers with your products and services.

Learn how to create a tabbed content rotator (not sure what to call it really) using everyone’s favorite Javascript framework, jQuery and an interface library called jQuery UI. This effect can be used effectively on your homepage to present customers with your products and services.
Web Site
Demo
Download

Create an Image Rotator with Description using jQuery and CSS

Jim — Thu, 17 Sep 2009 17:18:58 +0000

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery.

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.
Web Site
Demo

Simple Page Peel Effect with jQuery & CSS

Jim — Thu, 17 Sep 2009 17:14:22 +0000

You can use this page peel jQuery plugin to peel a corner of website and see a message underneath. It’s useful to create extra area for your RSS feed or banner advertising.

You have probably seen these forms of advertisings where you can peel a corner of a website and see a message underneath. It seems most are flash driven, but I decided to try it out using some simple lines of jQuery.
Web Site
Demo