Jquery Image Eraser plugin implementation

 

In this blog, I will share another snippet on how to make images erasable with mouse or touch movements. I have shared many snippets on CSS animation examples, HTML CSS, javascript, web design, etc. Please check out those snippets as well, apart from this one. Please check out the below video tutorial for a better understanding.

I hope you have watched the video. in this project, I have used a jquery plugin called 'jquery eraser.' This plugin makes images erasable and replaces the targeted image with an interactive canvas that can be erased using touch or mouse inputs. You can go to the plugin website to read more about the jquery plugin.

You may also like: 

• Pure CSS Dropdown Navigation Bar
• Responsive Website Layout with Flexbox

In the HTML part, I have taken a div named 'wrapper' and placed two images inside that. I gave a separate id name for the two images. I used the same image but made one of them a bit dark using photoshop. This is the image that will be erased and replaced by the other image. In the CSS part, I omitted the primary margin and padding of the viewport by setting the margin and padding to zero for the universal selector. I made the dark image stack on top of the clear image using absolute position value. After that, I have used the initiating code syntax of the plugin from their Github page. Now, we want 'img2' to be erased, so I placed that image id in the initiating code. We can increase or decrease the size of the eraser brush if we want. I set the size to '120,' but you can choose yours.

Jquery Image Erase effect [ Source Code ]:

For making this snippet, make two files. one is HTML with .html extension and the other is CSS with .css extension. add the external CSS file and latest jquery in the HTML. Download the jquery plugin from their Github page and add the js file to your HTML file. Download the source code from the given link and paste them into your project.

DOWNLOAD CODE

I hope you have successfully implemented the plugin. Please subscribe 'Divinector' youtube channel and press the bell notification icon for future video updates. also please us on our social media profiles to stay connected with this blog. Thank you for stopping by this blog.