Pure CSS animations ensure that ShakeIt loads almost instantaneously, without a heavy overhead of complicated Javascript or Flash code. ShakeIt works reliably in all modern web browsers and is ignored by older browsers. The content you 'shake' can still be printed, read by screen readers and seen by search engines. This stack could be a great addition to 'call to action' buttons, subheadings, Font Awesome icons, links and simple text or images. ShakeIt can either run constantly (with the option to pause on mouseover) or only run on mouseover. Ten shake effects of different velocities and styles can be chosen from.

ShakeIt is derived from the opensource CSShake framework. Our stack uses a pre-compiled codebase and presents customisable options via an easy-to-use editable interface. The source code is optimised for faster page loading and less bandwidth. Additionally the option is provided to 'shake' other elements in the page, via element, ID or class selector names. ShakeIt v2 replaces the original Tsooj Media ShakeIt v1 stack.

Examples

Here are ten examples of the different shake effects available in ShakeIt. All of these run constantly. As you can see, some have a stronger shaking velocity than others...

Setup

Please follow these instructions to get a single ShakeIt stack working in your webpage
  1. Once installed into Stacks and RapidWeaver, add a Stacks page to your project if you don't have one already
  2. Open the Stacks Library in edit mode. Search for 'ShakeIt'. Drag and drop a copy of the stack into your webpage
  3. Keeping the Stacks Library open, now add a text or image stack inside ShakeIt
  4. Customise the text or image, to contain the content you want shaken
  5. Select the ShakeIt stack to change the trigger and / or shake effect
  6. Preview the webpage to see the effect. Publish or export when done

Note that Stacks applies overflow:hidden on all divisional containers. You may notice that some shake effects (like Rotate) become cropped. The easy way to fix this is to simply open the stack settings for ShakeIt and give your ShakeIt stack some more padding; as you would do for any other normal stack. Padding adds space, and this creates a larger 'visible' area for the ShakeIt stack to work inside.

Applying ShakeIt stacks to other parts of the webpage

Within the ShakeIt settings, change the Shake setting from Stacks (default) to Custom Selector(s). Underneath this setting you will see a box to enter your element, ID or class selector names. Multiple selector names are supported, and these should be entered in jQuery / CSS comma-separated format. Knowing what elements to target can be accomplished using the web inspector or a free stack like Codafy. ShakeIt will use jQuery Javascript to write the names of the animation onto the selector names you provide; therefore attempting animation of these elements. Obviously not all elements support animation and some elements may already have animations of their own applied.