jQuery Ripples, efecto agua con css3 y jquery

Descarga : jQuery Ripples

jQuery Ripples, efecto agua con css3 y jquery, si lo que quieres es llamara la atención en el fondo de un sitio web, puedes usar este efecto para hacer tus imágenes de fondo estáticos un poco más interactivo y diferente a lo tradicional, no hay que tener mucho conocimiento para la implementación de este plugin, el secreto (WebGL), una consideración importante es que el fondo de que sirve como imagen tiene que estar en la misma ruta donde esta el archivo html.

Para su implementación necesitas el archivo javascript del plugin “jquery.ripples.js” que se encuentra en la carpeta js del ejemplo demo y por supuesto jQuery.

El siguiente código puedes usarlo en tu archivo html que agregara el efecto a todo el body , respetando las etiquetas interiores, esto se hace con el objetivo de mostrar solamente el fondo sin afectar otras etiquetas

$('body').ripples({
resolution: 512,
dropRadius: 20, //px
perturbance: 0.04,
});

Si lo que quieres es generar el mismo efecto en etiquetas interiores, puedes agregarlas tambien de la misma manera en la que realizaste con la etiqueta body, puedes ver nuevamente el efecto, aplicado a una etiqueta main

$('main').ripples({
resolution: 128,
dropRadius: 10, //px
perturbance: 0.04,
});

Como puedes observar los parámetros que se usan son la resolución, el radio de las gotas y el reflejo de las ondas.

 

  1. resolution
  2. dropRadius
  3. perturbance

Demo: http://sirxemic.github.io/jquery.ripples/

Vídeo Tutorial:

Contenido relacionado: