BookBlock is a jQuery plugin that can be used for creating booklet-like components that allow a "page flip" navigation. Any content can be used, such as images or text. The plugin transforms the structure only when needed (i.e. when flipping a page) and uses some overlays as shadow for the pages to create more realism.
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.
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.
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.
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.
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.
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.
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.
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
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
Here you will learn how to use and customize the brilliant jQuery Booklet Plugin. You will create a virtual Moleskine notebook.
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
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.
