Create An Image Distortion Effect With The jQuery Shakker Plugin

File Size: 5.72 KB
Views Total: 426
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Create An Image Distortion Effect With The jQuery Shakker Plugin

Shakker is a simple and lightweight jQuery plugin that makes it easy to add a subtle distortion effect to your images by shaking them on the X and/or Y axis.

See Also:

How to use it:

1. First, you'll need to include the jQuery library and the Shakker plugin on your page.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.shaker.min.js"></script>

2. Then, simply select the image element you want to apply the distortion effect to, and call the shakker() function on it as follows:

<img id="example" src="https://www.jqueryscript.net/images/logo.png" />
$(function(){
  $("#example").shakker();
});

3. You can also pass in some optional parameters to customize the distortion effect.

$(function(){
  $("#example").shakker({
    x: true, 
    y: false,
  });
});

This awesome jQuery plugin is developed by mebjas. For more Advanced Usages, please check the demo page or visit the official website.