Java-Scripts.net

Screen Shake Effect

Add impact to your UI. Whether it's for a wrong password entry or a visual notification, this script shakes the screen content purely using CSS.

Shake Me!

Copy the Script

<style>
.shake {
    animation: shake 0.5s;
    animation-iteration-count: 1;
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}
</style>

<script>
function shakeElement() {
   var el = document.body; // Or specific ID
   el.classList.add('shake');
   setTimeout(() => el.classList.remove('shake'), 500);
}
</script>

Frequently Asked Questions

Yes. 'Window shake' moves the actual browser window (popup). 'Screen shake' just shakes the HTML `` content, which works on all modern browsers, including mobile.

It's great for games (when a player gets hit), form errors (shaking the input box), or emphasizing a critical alert.

Yes. Instead of applying the shake class to `document.body`, simply apply it to a specific `div` or image ID.