Logo proweblab.xyz

Creating effect water to site webgl HTML JS

Creating effect water to site webgl HTML JS
Creating effect water to site webgl HTML JS

Download Creating effect water to site webgl HTML JS.

The WebGL library allows you to create amazing 3D games, scenes and effects in your browser. While most of them are just for entertainment, but some can be used today on dynamic sites. Today we would like to give an example of the implementation of the effect of water, which will not leave you indifferent. It is impressive that it is so easy to implement volumetric graphics right in the browser window. In addition, this technology is rapidly gaining momentum and is popular among web designers. We advise you to look at this technology.


It is worth recalling that we will use a small jQuery plugin called ripples, it is this plugin that allows us to achieve this effect, so after connecting, we just need to call this function using the following command:

 

$(document).ready(function() {

try {

$('body').ripples({

resolution: 512,

dropRadius: 20, //px

perturbance: 0.04,

});

$('main').ripples({

resolution: 128,

dropRadius: 10, //px

perturbance: 0.04,

});

}

catch (e) {

$('.error').show().text(e);

}

 

$('.disable').show().on('click', function() {

$('body, main').ripples('destroy');

$(this).hide();

});

 

setInterval(function() {

var $el = $('main');

var x = Math.random() * $el.outerWidth();

var y = Math.random() * $el.outerHeight();

var dropRadius = 20;

var strength = 0.04 + Math.random() * 0.04;

 

$el.ripples('drop', x, y, dropRadius, strength);

}, 400);

});