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 customisable.
A Variety of Patterns
The following are the pattern effects that can be applied. The number of rows and columns can be specified. As you can see all the animations go in reverse when the mouse is moved out of the element.
Regular | Spiral | Diagonal | Crossing |
Press | Press | Press | Press |
Corners Alt | Skip Rows | Skip Columns | Checks |
Press | Press | Press | Press |
Zip | Random | Corners | Wave |
Press | Press | Press | Press |
Control the Speed
The speed of the pattern (the delay between each box) can be manipulated and so can the speed at which an individual item appears and disappears.
Press | Press | Press |
Show and Hide Effects
Every pattern can be animated using a number of effects to show and hide the boxes.
Fly | Fade | Puff (Can be processor intensive) | Grow | Sliding Doors Horizontal |
Press | Press | Press | Press | Press |
Sliding Doors Vertical | Alt Slide Vertical | Alt Slide Horizontal | Slide (U, D , L & R) | Instant |
Press | Press | Press | Press | Press |
Fly Effects
The 'Fly' effect can be manipulated in a number of ways. The flight distance, speed and direction can be manipulated.
Single Direction (U, D , L & R) | Two Directions (U, D , L & R) | Random | Split Vertical (& Horizontal) | Alt Horizontal (& Vertical) |
Press | Press | Press | Press | Press |
Mix the Effects
Show and hide effects can be mixed for any element.
Show - Fade Hide - Fly Split Horizontal |
Press |
Flip and Rotate the Patterns
Patterns can be flipped horizontally, vertically or both. All patterns can be rotated.
Normal | Flip Horizontal | Flip Vertical | Rotate |
Press | Press | Press | Press |
Reflect the Patterns
Some patterns can be reflected in two or four directions.
Normal | Reflection |
Press | Press |
Event Handling
Click and hover events can easily be implemented in different ways to start and stop the animations. A single control element can be used to control the animation of many other elements.
Click (togggle) | Hover alt | Click alt | One Way |
Press | Press
Hover on me!
|
Press
|
Press |
Use on a Varity of Elements
The plugin can be used with different sorts of elements such as links, buttons and other HTML objects. All element styles can be customised.
Press the
Simple to Use
It is very simple to implement any of the effects. Below is the amount of jQuery code needed to implement the following effect (HTML & CSS code not shown):
Press
$('#id').hover_transitions({
innerHTML_two : "Me",
background_color_two: "#ff286c",
pattern : "spiral"
});
Compatibility
This plugin uses jQuery 1.7 and is compatible with all modern browsers including Internet Explorer 7-9.
Future Updates and Support
Suggestions for extra features and updates are welcome. All new updates will be free of charge and free support will be given to purchasers.
© A. H. Rahim 2012