LightboxMe stack

ShakeIt Stack

shake, rumble, vibrate or pulse any element on your page

Use this stack to shake, rumble, vibrate or pulse any element on your page. Great to draw attention – but also to chase your visitors away when you overdo it!

The ShakeIt Stack is pretty versatile. There are six different shake behaviors (on hover, on click, on mousedown, timed hover, timed shake, constantly or pulse) and plenty of settings to fine-tune the intensity of all aspects of the movement (horizontal and vertical offset, rotation, speed, opacity, duration, interval).

It is also possible to choose what to shake: the whole stack, only links inside the stack, underlined text inside the stack (with an option to remove that underlining). When you’re a little familiar with HTML and CSS, you can even use custom selectors to shake an element inside or outside the stack (see the remark below in the gray box about advanced settings).

Demos

shake
on hover
horizontal: 1px
vertical: 1px
rotation: 1°
speed: 50ms
use opacity: off

shake
on click
horizontal: 2px
vertical: 2px
rotation: 1°
speed: 50ms
opacity: 60%

shake
on mousedown
horizontal: 3px
vertical: 3px
rotation: 1°
speed: 50ms
opacity: 20%

shake on hover (timed)
horizontal: 2px
vertical: 0px
rotation: 1°
speed: 50ms
duration: 1500ms
opacity: 30%

shake on click
(timed)
horizontal: 0px
vertical: 2px
rotation: 1°
speed: 50ms
duration: 1500ms
opacity: 70%

shake
constantly
horizontal: 2px
vertical: 2px
rotation: 1°
speed: 50ms
opacity: off

pulse
horizontal: 2px
vertical: 2px
rotation: 1°
speed: 50ms
duration: 300ms
interval: 300ms
opacity: off

shake
constantly
(horizontal only)
horizontal: 2px
vertical: 0px
rotation: 0°
speed: 250ms
opacity: off

shake
constantly
(too much coffee?)
horizontal: 6px
vertical: 6px
rotation: 6°
speed: 5ms
opacity: 50%

Above, the whole content of the ShakeIt Stack is set to shake. It is also possible to…
Shake only links inside the stack.
See the links on this page.
Shake only underlined text inside the stack.
The stack allows you to remove the underlining from that text.
Shake other elements on the page, inside or outside the stack.
See the menu items. the logo of the ShakeIt Stack above and the link in the sidebar.
For the advanced target settings (custom selector inside stack and custom selector outside the stack), you will need to find the right selector. Finding the right selector is not supported.
NB
Make sure to set enough margin on the shaking element (or padding on the surrounding element) to prevent the edges from being cut off while shaking.
Inline text that spans more than one line will ‘jump’ to a new line while shaking. To prevent that, you can use the option keep link|underlined text together.
Shaking inline text that is not left aligned may cause ‘jumping’ of the animated text from one line to the other. For left to right text, often only left aligned text works well; and right aligned text for right to left text. If necessary, use the option overrule text alignement to force left or right aligning on the content of the stack.
The U.S. government (and others) recommend that Web pages avoid blinking elements between 2 hertz and 55 hertz to avoid triggering epileptic seizures among users (more info). Use this stack at your own risk!

Background

This stack is based on the jRumble plugin by Jack Rugile.

Limitations
When the visitor has JavaScript disabled in his browser, nothing will shake.
Use this stack sparingly. Especially too many timed shaking elements on a page may confuse the script.
The advanced target settings (custom selector inside stack and custom selector outside the stack) may not work for elements that created with JavaScript. Putting the ShakeIt Stack below the stack that created the element you want to shake often helps.
On mobile platforms, shake on hover will shake the element when it is tapped until another element is tapped; shake on mousedown does not work.

Support
Please use this form to report all issues, questions and comments.

This stack requires the Stacks plugin by YourHead (version 3).
Do you like this stack? Please consider leaving a review in the RapidWeaver Community’s Addons section [link].
ShakeIt HUD
© 2012-2017 Marathia Web Design | Contact