Shake Images with the jQuery Shakker Plugin

Adding a shaking effect to your images is an “interesting” way to get attention.

I’m going to show you how to create a simple shaking effect for your images, using the jQuery Shakker plugin.

Step #1. Download the jQuery Shakker plugin

• Go to jQuery Shakker plugin’s repository and click the “Download zip” button.

• Decompress the file and look for the jquery.shaker.min.js file.
• Upload the file to your site.

Step #2. Add the HTML

I will use a ghost image to add a bit of fun to the tutorial. My apologies for sharing this post the week after Halloween!

• Embed the image by using the img tag.
• Add an id value. In my example I’m using, “ghost”

<img id="ghost" alt="" src="path/to/image.jpg" />

Step #3. Add the Javascript

Inside the head tag, load the code below in the exactly the same order:

jQuery:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

jQuery Shakker plugin:

<script src="jquery.shaker.min.js"></script>

Execute the plugin taking as reference the image id:

<script>
$( document ).ready(function() {
$("#ghost").shakker({x: true, y: true});
});
</script>

The x and y parameteres design the direction of the animation: horizontal and vertical respectively.

Step #4. See the end result

Open your site in a browser to see the end result:

View demo