Shake Images with the jQuery Shakker Plugin

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

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

    View all posts
0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x