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:
