Hello,

I have a question: is it possible to modify this jquery script?

https://www.jqueryscript.net/demo/Tiny-jQuery-Plugin-To-Create-Water-Ripple-Effect-Ripple/

I need the water effect only appears on certain place on the website and the ripple effect must appears repeatedly on one particular place.

Here is the code for ripple effect:

I wonder what to add and modify to make the ripple effect stays on a particular place and appears repeatedly.

ripple.js

/**
 * Water ripple effect.
 * Original code (Java) by Neil Wallis
 * Code snipplet adapted to Javascript by Sergey Chikuyonok
 * Code re-written as jQuery plugin by Andy V.
 */
;(function ( $, window, document, undefined ) {
var pluginName = "waterripple",
    defaults = {
        delay       : 30,       //delay before re-drawing the next frame
        riprad      : 3,        //single ripple radius
        line_width  : 20,
        arbitrary   : true,     //generate a new random ripple every n-mseconds, false - turns off random ripples, 1000
        onclick     : true,  //generate a new ripple on mouse click
        onmove      : false, //generate a new ripple on mouse move
    };
function Plugin( element, options ) {
    this.element = element;
    this.options = $.extend( {}, defaults, options );
    this._defaults = defaults;
    this._name = pluginName;
    if(element.tagName == "IMG") {
        var imgSrc = $(this.element).attr("src");
    }
    else {
        var backgroundImage = $(this.element).css('background-image');
        if(backgroundImage != "none"){
            var pattern = /url\(['"]?(.+)['"]?\)/;                
            var imgSrc = pattern.exec(backgroundImage)[1];                
        }
    }
    if((typeof imgSrc !== 'undefined')) {
        var that = this;
        this.image = $("<img/>") // Make in memory copy of image to avoid css issues
        .attr("crossOrigin", "anonymous")
        .attr("src", imgSrc)
        .load(function() {
            that.init();
        });
    }
}
Plugin.prototype = {
    init: function() {
        var scope = {};
        scope.canvas        = document.createElement('canvas');
        $(this.element).after(scope.canvas);
        scope.ctx           = scope.canvas.getContext('2d');
        scope.width         = $(this.element).width();
        scope.height        = $(this.element).height();
        scope.delay         = this.options.delay;
        scope.riprad        = this.options.riprad;
        scope.line_width    = this.options.line_width;
        scope.half_width    = scope.width >> 1;
        scope.half_height   = scope.height >> 1;
        scope.size          = scope.width * (scope.height + 2) * 2;
        scope.oldind        = scope.width;
        scope.newind        = scope.width * (scope.height + 3);
        scope.mapind;
        scope.ripplemap     = [];
        scope.last_map      = [];
        scope.step          = scope.line_width * 2;
        scope.count         = scope.height / scope.line_width;
        scope.canvas.width  = scope.width;
        scope.canvas.height = scope.height;
        scope.ctx.drawImage(this.image[0], 0, 0);
        $(this.element).hide();
        scope.texture       = scope.ctx.getImageData(0, 0, scope.width, scope.height);
        scope.ripple        = scope.ctx.getImageData(0, 0, scope.width, scope.height);
        for (var i = 0; i < scope.size; i++) {
            scope.last_map[i] = scope.ripplemap[i] = 0;
        }
        //run main loop
        setInterval(function() { run.call(scope); }, scope.delay);
        // generate random ripples
        if(this.options.arbitrary > 0) {
            var rnd = Math.random;
            disturb.call(scope, rnd() * scope.width, rnd() * scope.height);
            setInterval(function() {
                disturb.call(scope, rnd() * scope.width, rnd() * scope.height);
            }, this.options.arbitrary);
        }
        if(this.options.onclick) {
            scope.canvas.onclick = function(evt) {
                disturb.call(scope, evt.offsetX || evt.layerX, evt.offsetY || evt.layerY);
            };
        }
        if(this.options.onmove) {
            scope.canvas.onmousemove = function(evt) {
                disturb.call(scope, evt.offsetX || evt.layerX, evt.offsetY || evt.layerY);
            };
        }
    },
};
$.fn[pluginName] = function ( options ) {
    return this.each(function () {
        if (!$.data(this, "plugin_" + pluginName)) {
            $.data(this, "plugin_" + pluginName, new Plugin( this, options ));
        }
    });
};
/**
 * Main loop
 */
function run() {
    newframe(this);
    this.ctx.putImageData(this.ripple, 0, 0);
}
/**
 * Disturb water at specified point
 */
function disturb(dx, dy) {
    dx <<= 0;
    dy <<= 0;
    for (var j = dy - this.riprad; j < dy + this.riprad; j++) {
        for (var k = dx - this.riprad; k < dx + this.riprad; k++) {
            this.ripplemap[this.oldind + (j * this.width) + k] += 512;
        }
    }
}
/**
 * Generates new ripples
 */
function newframe(scope) {
    var i, a, b, data, cur_pixel, new_pixel, old_data;
    i = scope.oldind;
    scope.oldind = scope.newind;
    scope.newind = i;
    i = 0;
    scope.mapind = scope.oldind;
    // create local copies of variables to decrease
    // scope lookup time in Firefox
    var _width = scope.width,
        _height = scope.height,
        _ripplemap = scope.ripplemap,
        _mapind = scope.mapind,
        _newind = scope.newind,
        _last_map = scope.last_map,
        _rd = scope.ripple.data,
        _td = scope.texture.data,
        _half_width = scope.half_width,
        _half_height = scope.half_height;
    for (var y = 0; y < _height; y++) {
        for (var x = 0; x < _width; x++) {
            data = (
                _ripplemap[_mapind - _width] + 
                _ripplemap[_mapind + _width] + 
                _ripplemap[_mapind - 1] + 
                _ripplemap[_mapind + 1]) >> 1;
            data -= _ripplemap[_newind + i];
            data -= data >> 5;
            _ripplemap[_newind + i] = data;
            //where data=0 then still, where data>0 then wave
            data = 1024 - data;
            old_data = _last_map[i];
            _last_map[i] = data;
            if (old_data != data) {
                //offsets
                a = (((x - _half_width) * data / 1024) << 0) + _half_width;
                b = (((y - _half_height) * data / 1024) << 0) + _half_height;
                //bounds check
                if (a >= _width) a = _width - 1;
                if (a < 0) a = 0;
                if (b >= _height) b = _height - 1;
                if (b < 0) b = 0;
                new_pixel = (a + (b * _width)) * 4;
                cur_pixel = i * 4;
                _rd[cur_pixel] = _td[new_pixel];
                _rd[cur_pixel + 1] = _td[new_pixel + 1];
                _rd[cur_pixel + 2] = _td[new_pixel + 2];
            }
            ++_mapind;
            ++i;
        }
    }
    scope.mapind = _mapind;
}
})( jQuery, window, document );