HoverTransitions allows you to create numerous transition animation effects for webpage elements. The effects are performed by breaking the element into smaller boxes and animating the appearance of each of them according to different patterns and effects. The effects occur when events are performed. All animations are highly customisable.
Best jQuery Gallery Plugins & Tutorials with Demo
Making an Interactive Wall of Images With jQuery
This is a little jQuery experiment I put together, just for kicks! Here is a list of things I wanted the wall to do, and things you’ll be learning to do:
- Simple HTML without need for much editing
- Group these divs depending on the width of the page, into divs that change as you resize the window
- When resizing the window the image rows should change to display the maximum number of images, so it’ll work on the maximum number of screens.
- On hover they should expand and become bigger, they might also be linked. (possibly optional depending on your needs)
- If a row is incomplete, images should be added to the end to fill a row, so it looks like a continuous block.
jQuery Hotspot Map – Powerful annotations and tooltips
Hotspot is a plugin for easily adding annotations, text, or other stuff to an image, on the exact locations that you want. It’s an old concept with one exception. It comes with a powerful editor for precise drawing and positioning of the spots. You can also edit settings, see a preview of the final result and the editor will generate the HTML and JS code for you!
One of the most powerful features of this plugin is the editor that it comes with. You don’t need to manually specify coordinates and dimensions of each spot on the image. It’s all visual – click to add a spot, or click and drag to draw a rectangle. Then dial the settings, click “Generate” and you will see a preview of the final result!
Create CSS 3D Transform Card Flip Gallery with jQuery
In this tutorial, we are going to apply card flip effect to a set of thumbnail gallery. We just want to demonstrate one of the simple way to use it. One thing though, CSS 3D transform is not a mature standard yet and only modern browsers are supporting it. As a result, to make this demo usable, we will make it degrade gracefully and replace it with scroll up effect.
Showcase Product Feature in 3D Style with jQuery & CSS3
Focus on showcasing our product features can be a good choice for attracting user on landing pages. By showcasing in 3D style also a good choice, in this tutorial I am going to share how to showcase our product feature in 3D style using CSS3 3D Transform and jQuery.
The showcase will be displaying product image and tagline. The tagline will be positioned in the middle of product image, so there will be product image in two positions, left and right of the tagline. These images will be rotated in 3D around y-axis with angle of rotation -35 degree for the left image and 35 degree value for the right, the image will be rotated.
Elegant Accordion with jQuery and CSS3
jQuery Elegant Accordion plugin has following features :
- Auto-rotate through all the slides with extra options
- Pause on hover
- Stop rotation on click of a slide
- Option to stop rotation at the end of the slides
- Options for setting delay, animation speed and easing
- Ability to set active slide onload using hashes (index.html#panel1-3)
- Works with multiple instances on the page
- Ability to specify width of active slide while automatically adjusting inactive slides
3D Flipping Circle with CSS3 and jQuery
In this tutorial we will 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.
Today I would like to show you 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. Maybe you have created these kind of paper effects when you were a kid; basically something opens or rotates when pulling or pushing some handle.
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.
jShowOff: a jQuery Content Rotator
jShowOff is a jQuery plugin for creating a rotating content module. It works by creating ‘slides’ from the child elements (eg. <li>) inside a specified wrapper element (eg. <ul>) on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more. This type of module is often used to promote pages, sections, or features on a site.
