Shake Images with the jQuery Shakker Plugin

| Coding Tutorials
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

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

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!

jQuery Shakker Plugin
  • 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:

jQuery Shakker Plugin

View demo


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.