ShakeIt stacks set
The ShakeIt stacks set shakes, vibrates, and rotates your stacks and RapidWeaver content. It's great to use as a hover effect or a way to direct attention an element that needs a special effect.
Example
At the moment we are working on a demonstration video, enjoy the examples website or have a look at one of the other examples below.
More examples
Some other examples of the ShakeIt stacks set in action on the Magnetic theme from Henk Vrieselaar.
Marcoen is working on a colorful example with the ShakeIt stacks set in action on his Brainbestormers website (Dutch content).
Yolanda from Santander Design is using the ShakeIt stacks set on the Casas Honorato website, if you hover the leaves they will move.
Choose the Spanish language and on the Como llegar / Find us page under the "puntos de interes" section you'll find a moving car.
ShakeIt Manual
The example website and (upcoming) video demonstrate almost all the available options that come with the ShakeIt Stacks set and each option also has his own Tooltip (visible when hovering over an option in the HUD). So you are probably informed enough to get you started with creating your own ShakeIt enabled Websites ... and of course we've also created this more detailed manual with more information about each stack thats available in this set.
The ShakeIt Stacks set contains the following stacks:
- ShakeIt Enclosure, add the ShakeIt feature to your page and set default options for custom HTML shaking;
- ShakeIt, automatically shakes all the content stacks that are placed inside this stack.
Below a more detailed explanation on how to use the specific ShakeIt Stacks with their own options.
Click on an item to show/hide it's documentation content.
Horizontal
Set the default horizontal ShakeIt range in pixels that is used to shake the element from left to right.
Vertical
Set the default vertical ShakeIt range in pixels that is used to shake the element from top to bottom.
Rotation
Set the default rotation ShakeIt range in pixels that is used to rotate the element while performing the shake.
Interval
Set the default interval (in ms) between the different shake actions, also known as the attention multiplier ;-).
Event
Set the default event that triggers ShakeIt, select from "hover", "click", "mousedown", "constant" (thats without using the quotes).
Set the default horizontal ShakeIt range in pixels that is used to shake the element from left to right.
Vertical
Set the default vertical ShakeIt range in pixels that is used to shake the element from top to bottom.
Rotation
Set the default rotation ShakeIt range in pixels that is used to rotate the element while performing the shake.
Interval
Set the default interval (in ms) between the different shake actions, also known as the attention multiplier ;-).
Event
Set the default event that triggers ShakeIt, select from "hover", "click", "mousedown", "constant" (thats without using the quotes).
Show information
block
By default the ShakeIt stack has an information block to make the identification of the stack easier in edit mode. When the stack is used in small columns you can disable it's visibility.
Horizontal
Set the horizontal ShakeIt range in pixels that is used to shake the elements inside this stack from left to right.
Vertical
Set the vertical ShakeIt range in pixels that is used to shake the elements inside this stack from top to bottom.
Rotation
Set the rotation ShakeIt range in pixels that is used to rotate the elements inside this stack while performing the shake.
Interval
Set the interval (in ms) between the different shake actions.
Event
Set the default event that triggers ShakeIt, select from "hover", "click", "mousedown", "constant" (thats without using the quotes).
Use Extra Content
Check if this ShakeIt stack should appear in an Extra Content position. Note that this requires a compatible theme and you should set the position number in the following input field.
EC Position
The Extra Content position as defined by the theme you are using.
By default the ShakeIt stack has an information block to make the identification of the stack easier in edit mode. When the stack is used in small columns you can disable it's visibility.
Horizontal
Set the horizontal ShakeIt range in pixels that is used to shake the elements inside this stack from left to right.
Vertical
Set the vertical ShakeIt range in pixels that is used to shake the elements inside this stack from top to bottom.
Rotation
Set the rotation ShakeIt range in pixels that is used to rotate the elements inside this stack while performing the shake.
Interval
Set the interval (in ms) between the different shake actions.
Event
Set the default event that triggers ShakeIt, select from "hover", "click", "mousedown", "constant" (thats without using the quotes).
Use Extra Content
Check if this ShakeIt stack should appear in an Extra Content position. Note that this requires a compatible theme and you should set the position number in the following input field.
EC Position
The Extra Content position as defined by the theme you are using.
FAQ
All currently known FAQ items are shown below
Making custom HTML elements shake
is very simple, all it takes is
the ShakeItTrigger class that you
can add to your custom code.
ShakeIt uses the default values
as set in the ShakeIt Enclosure
stack.
Example code:
<div id="your_id_when_required" div class="ShakeItTrigger">Your Content</div>
As shown in the following image you can also add the ShakeItTrigger class to your links:
Example code:
<div id="your_id_when_required" div class="ShakeItTrigger">Your Content</div>
As shown in the following image you can also add the ShakeItTrigger class to your links:
ShakeIt stacks set information
The ShakeIt stacks set shakes, vibrates, and rotates your stacks and RapidWeaver content. It's great to use as a hover effect or a way to direct attention an element that needs a special effect. You can control the x, y, and rotation range, interval, and the event that triggers ShakeIt. We've even included an option for automatic placing the stacks into an Extra Content area. All it takes is adding the cross browser jQuery based Enclosure stack and you are ready to ShakeIt.
What you get when purchasing this stack:
- An installer for the ShakeIt stacks set;
- RapidWeaver example project as shown in the demonstration;
Requirements:
- RapidWeaver 4 or 5;
- Stacks Plugin 1.4 or above.
Version information:
For those who are interested in the changes made to the ShakeIt stacks set.
New version that is designed for
the Stacks plugin version 2 only.
This version is using the new
input element so that you can
easily select the required event
from a drop-down list and other
input items like the extra
content area are only visible
when required. Download package
contains a special installer for
version 2.0.0 and 1.0.1 stacks.
Released on 27 november 2011.
Released on 27 november 2011.
Added the “Show information
block” checkbox into the normal
ShakeIt stack. By default the
ShakeIt stack has an information
block to make the identification
of the stack easier in edit mode.
When the stack is used in small
columns you can disable it's
visibility.
Released on 25 june 2011.
Released on 25 june 2011.
First public release on 8 june
2011.