Advertise here

Tutorials

Vertical Sliding Accordion with jQuery

June 09, 2012     15557     Slider Effects
Vertical Sliding Accordion with jQuery

Here you will create flexible vertical jQuery accordion.
The main idea is to expand the accordion slices on click and show some more information. The other slices will become less opaque and squeezed. When navigating to the next slice using one navigation arrows, a new slice will slide in from the top or the bottom. Once a slice is open and we navigate, the subsequent slice will open on slide.

Read More »

Elegant Accordion with jQuery and CSS3

June 09, 2012     2383     CSS3 & CSS
Elegant Accordion with jQuery and CSS3

Here you will create an elegant accordion for your sites content. The idea is to have some vertical accordion tabs that slide out when hovering. You will add some CSS3 properties to enhance the looks.

Read More »

Fullscreen Slit Slider with jQuery and CSS3

June 05, 2012     10956     Slider CSS3 & CSS Animation
Fullscreen Slit Slider with jQuery and CSS3

A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions.

Read More »

Polaroid Photobar Gallery with jQuery

June 03, 2012     2408     Gallery Animation
Polaroid Photobar Gallery with jQuery

Creating an image gallery with a Polaroid look is amazingly easy. With 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 2D Transform plugin used to animate rotations.

Read More »

Merging Image Boxes With jQuery

May 31, 2012     8421     Slider Gallery Effects
Merging Image Boxes With jQuery
This is a nice effect for images with jQuery. The idea is to have a set of rotated thumbnails that, once clicked, animate to form the selected image. You can navigate through the images with previous and next buttons and when the big image gets clicked it will scatter into the little box shaped thumbnails again.

When the window gets resized, the positions of the thumbnails will automatically adapt to fit the screen.

Read More »

jCookies - HTTP Cookie Handling jQuery Plugin

May 28, 2012     1767     JSON
jCookies - HTTP Cookie Handling jQuery Plugin

jCookies, a jQuery plugin, makes getting and settings HTTP Cookies a breeze. jCookies allows the storage of any type of data: strings, arrays, objects, etc. Data is stored in the cookie as JSON data. Also you can retrieve data using server side code such as C# and PHP.

Read More »

Micro Image Gallery - A jQuery Plugin

May 27, 2012     2250     Gallery
Micro Image Gallery - A jQuery Plugin

Micro Image Gallery is a jQuery plugin that will transform a set of images on your website into a miniature gallery. There’s an option to have previous / next buttons, a grid view and the size of the gallery can be adjusted (102, 162, 202 px).

Read More »

Grid Navigation Effects With jQuery

May 01, 2012     6888     Tables Effects
Grid Navigation Effects With jQuery

With Grid Navigation Effects using jQuery, you will learn ten ways how to navigate through a set of thumbnails and how to apply the effect.
Here are some example effects;
Default (show/hide), Fade, Sequential fade, Move/fade, Sequential move/fade, Sequential move/fade reversed, Resize (show/hide), Disperse, Rows move, Sequential move/fade.

Read More »

Latest Tweets Tooltip with jQuery

March 07, 2012     1723     Tooltip
Latest Tweets Tooltip with jQuery
Here is a jQuery plugin for showing the latest tweets about a certain word or phrase. This plugin use jQuery Twitter Search Plugin.

Read More »

Sliding Letters With jQuery

February 29, 2012     5152     Effects Text & String
Sliding Letters With jQuery

With this example you can slide in letter by letter when hovering over a link element. You can either have the same word or a different one and you can slide in the new letters all the same time or one after the other.

Read More »

Arctext.js - Curving Text With Css3 and jQuery

February 21, 2012     2934     CSS3 & CSS Effects Text & String
Arctext.js - Curving Text With Css3 and jQuery

While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let’s you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.

Read More »

3D Gallery with CSS3 and jQuery

February 06, 2012     3242     Slider Gallery CSS3 & CSS
3D Gallery with CSS3 and jQuery
A 3D Gallery which uses CSS3 3D Transforms and jQuery.

Read More »