DOM Earthquake effect using HTML, CSS and JavaScript

This example shows one approach to how to use JavaScript to apply an earthquake effect to an HTML element using the DOM. This technique uses a combination of element positioning using offsetTop/Left in combination with an absolute positioned element.

Some people find the shaking effect annoying, so if you have visual sensitivity (or a sense of good taste) this might not be for you.

These days, this is just one way to accomplish the effect--and maybe not even the best available option. CSS animation support is considerably better today than what was available when this script was initially conceived.

Try out the different animation styles in the form select below. If you're adventurous, tweak the code to add some additional animation styles.

This is some example text in a box we'll be applying an earthquake style animation effect to.

Example Code: