Advertisement
Web Developer Resources
You Are Here: ESQSoft.com ¬ javascript_examples ¬ DOM Earthquake effect using HTML, CSS and JavaScript
E.S.Q. Software Logo

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.
This is some example text in a box we'll be applying an earthquake style animation effect to.

Example Code:

<!-- start: example usage --> <style> .mbox-container { position: relative; height: 150px; } .mbox { position: absolute; top: 5%; left: 25%; width: 300px; height: 150px; background-color: #fec; outline: .5rem #000 solid; box-shadow: .5rem .5rem 2em #000; border-radius: 1em; } .mbox td { padding: .5rem; font-size: 1.2rem; } </style> <form> <table id="earth1" class="mbox"> <tbody><tr valign="top"> <td> This is some example text in a box we'll be applying an earthquake style animation effect to. </td> </tr> <tr> <td> <select id="quake_style"> <option value="shaky">Shaky</option> <option value="rotate">Rotate</option> <option value="horizontal">Horizontal</option> <option value="diagonal">Diagonal</option> <option value="faster">Fast Rotate</option> </select> <input type="button" style="width: 50px;" value="Start" onclick=" clickEffect(this); earthQuake({ el: document.getElementById('earth1'), animationOption: document.querySelector('#quake_style').value }); "> </td> </tr> </tbody></table> </form> <script> function clickEffect(el) { el.originalValue = el.originalValue || el.value; el.value = '...'; setTimeout(() => el.value = el.originalValue, 1000); } function earthQuake(args) { // only launch if a current data-quake isn't defined/running if (!args.el.getAttribute('data-quake')) { args.el.setAttribute('data-quake', true); applyQuake({ el: args.el, index: 0, ttl: 50, delta: 1, speedMilliseconds: 50, animationOption: args['animationOption'] || parseInt(Math.random() * 2), ...getXY(args.el) }); } function getXY(obj) { let x = obj.offsetLeft, y = obj.offsetTop, e = obj.offsetParent; // search until parent with relative positioning or no more parents while (e != null && getComputedStyle(e).position !== 'relative') { x += e.offsetLeft; y += e.offsetTop; e = e.offsetParent; } return { x, y }; } function px(v) { return `${v}px`; } function moveTo(el, x, y) { el.style.left = px(x); el.style.top = px(y); } function applyQuake(obj) { switch (obj.animationOption) { case 'rotate': if (++obj.index > 8) obj.index = 1; break case 'shaky': obj.index = parseInt(Math.random() * 8); break case 'horizontal': obj.index += 4; if (obj.index > 8) obj.index = 0; break case 'diagonal': obj.index += 5; if (obj.index > 8) obj.index = 1; break case 'faster': obj.index += 2; if (obj.index > 8) obj.index = 1; break default: if (!confirm('hmmm... default (error)')) obj.ttl = 0; break } let el = obj.el, x = obj.x, y = obj.y, delta = obj.delta; switch (obj.index) { case 1: moveTo(el, x - delta, y - delta); break; case 2: moveTo(el, x, y - delta); break; case 3: moveTo(el, x + delta, y - delta); break; case 4: moveTo(el, x + delta, y); break; case 5: moveTo(el, x + delta, y + delta); break; case 6: moveTo(el, x, y + delta); break; case 7: moveTo(el, x - delta, y + delta); break; case 8: moveTo(el, x - delta, y); break; } if (--obj.ttl > 0) { setTimeout(() => applyQuake(obj), obj.speedMilliseconds); } else { obj.el.removeAttribute('data-quake'); delete obj; } } } </script> <!-- end: example usage -->
Advertisement
Advertisement
StatCounter - Free Web Tracker and Counter