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