Advertise here

Tutorials

Draggable Image Boxes Grid with jQuery

August 28, 2012     28199     Drag & Drop Effects Grid & Layout
Draggable Image Boxes Grid with jQuery

Here you ll learn how to create a template with a fullscreen grid of images and content areas.

The idea is to have a draggable grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area.

Read More »

Parallax Content Slider with CSS3 and jQuery

August 22, 2012     23042     Slider CSS3 & CSS Effects
Parallax Content Slider with CSS3 and jQuery

Here you ll learn how to create a simple parallax content slider. Using CSS animations, you’ll control the animation of each single element in the slider and create a parallax effect by animating the background of the slider itself.

Read More »

Triple Panel Image Slider With jQuery

August 21, 2012     5788     Slider CSS3 & CSS
Triple Panel Image Slider With jQuery

Here you ll learn how to create a jQuery triple panel image slider with a 3D look.

The idea is to have a main panel and two lateral panels that are rotated slightly in 3D space. When navigating, you will slide in the respective next image in each panel. You'll be using CSS 3D Transforms with perspective and CSS Transitions.

Read More »

jQuery Pinterest Pin It Plugin

July 26, 2012     1647     Social
jQuery Pinterest Pin It Plugin

jQuery Pinterest Pin It Plugin looks for all images, and wrap it inside a container that come with a pinterest Pin it button. So, your visitor just have to hover above the image they want, and pin it straight away. It's a simple plugin.

Read More »

3D Flipping Circle with CSS3 and jQuery

July 23, 2012     4384     CSS3 & CSS
3D Flipping Circle with CSS3 and jQuery

Here you ll learn how to create a little component with a realistic touch. The idea is based on the sweet paper effect found in the video of the Google Developer Stories.

We’ll create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.

Read More »

Colortip – jQuery Tooltip Plugin

July 22, 2012     2663     Tooltip
Colortip – jQuery Tooltip Plugin

Colortip is a simple jQuery tooltip plugin. It is going to convert the title attributes of elements withing your page, into a series of colorful tooltips. Six color themes are available, so you can easily match it with the rest of your design.

Read More »

Sweet Tooltip - jQuery & CSS3 Tooltips

July 11, 2012     3248     CSS3 & CSS Tooltip
Sweet Tooltip - jQuery & CSS3 Tooltips

Sweet Tooltip is a jQuery & CSS3-based tooltip, not merely a one-style tooltip but seven. This imageless tooltips are crafted using CSS power, linear-gradient, box-shadow, text-shadow, :after and :before selector, etc.

Read More »

jQuery Vertical Mega Menu Plugin

July 11, 2012     14991     Menu
jQuery Vertical Mega Menu Plugin

This plugin creates vertical mega menus from standard HTML nested lists, allowing users to view all available menu options for each top-level menu item.

There are several plugin options available for customising the mega menu:

* Choose animation effect for the flyout menu – show/hide, fade in or slide
* Set animation speed
* Set number of sub-menus per row Display the flyout mega menu on the left or right depending on the menu position

Read More »

jQuery Mega Drop Down Menu Plugin

July 11, 2012     23927     Menu
jQuery Mega Drop Down Menu Plugin

The jQuery Mega Drop Down Menu plugin takes any standard HTML nested lists and turns them into horizontal mega menus.

Mega Menu Plugin Features
* Hover/Click – Select whether you would like the menu to activate using hover or click
* Items Per Row – Select the number of sub-menu items to be shown on each row of the mega menu
* Animation Effect – The effect used to display the sub-menus – options are; fade in or slide down
* Animation Speed – The speed at which the dropdown menu will open/close

Read More »

Moleskine Notebook with jQuery Booklet

July 04, 2012     1854    
Moleskine Notebook with jQuery Booklet

Here you will learn how to use and customize the brilliant jQuery Booklet Plugin. You will create a virtual Moleskine notebook.

Read More »

3D Thumbnail Hover Effects with CSS3 and jQuery

June 24, 2012     9073     CSS3 & CSS Effects
3D Thumbnail Hover Effects with CSS3 and jQuery

Here you will create some exciting 3D hover effects using CSS3 and jQuery. This idea is inspired by the cool hover effect that you can find on the page of the Google SketchUp Showcase.

We’ll use thumbails that will reveal some more information on hover. We will create a structure with jQuery that will allow making the image appear as folded or bended when we hover

Read More »

Slide Down Box Menu with jQuery and CSS3

June 13, 2012     11160     CSS3 & CSS Menu Effects
Slide Down Box Menu with jQuery and CSS3

Here you will create sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.

Read More »

Circular Content Carousel with jQuery

June 11, 2012     9825     Slider Carousel Scroll
Circular Content Carousel with jQuery
Here you will create a simple circular content carousel. The idea is to have some content boxes that we can slide infinitely (circular).

When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.

Read More »

Vertical Sliding Accordion with jQuery

June 09, 2012     14981     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     2319     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 »

AdvertisementAdvertise with us!