| Web Developer Resources | |
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.
Enjoy.
Example Code:
| | |