Add a water ripple effect to your background using WebGL.

Overview

jQuery Ripples Plugin

By the powers of WebGL, add a layer of water to your HTML elements which will ripple by cursor interaction!

Important: this plugin requires the WebGL extension OES_texture_float (and OES_texture_float_linear for a better effect) and works only with same-origin images (see this link for more information on using cross-origin requested images).

Click here for a demo and to see how to use it.

Usage

Include the script at the end of your page after including jQuery, or when you are using bundling tools such as Webpack or Browserify, simply import it into your bundle.

The quickest way to use this plugin on an element is to ensure that the element has a background-image set (currently only URLs are supported), then initialize the plugin as follows:

$(selector).ripples();

Optionally you can tweak the behavior and appearance by initializing it with options (See the options secton for the full list of options):

$(selector).ripples({
  dropRadius: ...,
  perturbance: ...,
  ...
});

The plugin also has several methods to programmatically add drops, show, hide or remove the effects among other things. See the methods section for more details.

Options

Name Type Default Description
imageUrl string null The URL of the image to use as the background. If absent the plugin will attempt to use the value of the computed background-image CSS property instead. Data-URIs are accepted as well.
dropRadius float 20 The size (in pixels) of the drop that results by clicking or moving the mouse over the canvas.
perturbance float 0.03 Basically the amount of refraction caused by a ripple. 0 means there is no refraction.
resolution integer 256 The width and height of the WebGL texture to render to. The larger this value, the smoother the rendering and the slower the ripples will propagate.
interactive bool true Whether mouse clicks and mouse movement triggers the effect.
crossOrigin string "" The crossOrigin attribute to use for the affected image. For more information see MDN.

Methods

drop

Call $(selector).ripples('drop', x, y, radius, strength) to manually add a drop at the element's relative coordinates (x, y). radius controls the drop's size and strength the amplitude of the resulting ripple.

destroy

Call $(selector).ripples('destroy') to remove the effect from the element.

hide / show

Call .ripples('hide') and .ripples('show') to toggle the effect's visibility. Hiding it will also effectively pause the simulation.

pause / play

Call $(selector).ripples('pause') and .ripples('play') to toggle the simulation's state.

set

Call $(selector).ripples('set', name, value) to update properties of the effect. The properties that can be updated are:

  • dropRadius
  • perturbance
  • interactive
  • imageUrl (setting the image URL will update the background image used for the effect, but the background-image CSS property will be untouched)
  • crossOrigin (setting this won't have any effect until imageUrl is changed)

updateSize

The effect resizes automatically when the width or height of the window changes. When the dimensions of the element changes, you need to call $(selector).ripples('updateSize') to update the size of the effect accordingly.

Comments
  • Destroy not stopping the rendering or removing the WebGL context

    Destroy not stopping the rendering or removing the WebGL context

    Love this plugin but I have ran into an anomaly.

    I know it's not best practice, but bare with me.

    AJAX-Page.html

    • Button that uses AJAX to load AJAX-Content.html

    AJAX-Content.html

    • Call ripple function on element in THIS page.

    Smash the AJAX-Page.html and you're going to get a bunch of instances of the ripple function running on top of each other.

    Even if you change AJAX-Content.html to:

    AJAX-Content.html

    • Call Destroy ripple on same as below element.
    • Call ripple function on element in this page.

    You end up with multiple ripples functions running on the same element.

    In other words, Destroy doesn't seem to work when used with AJAX loaded content.

    bug 
    opened by bryan-joseph-myers 17
  • Appears differently locally and online

    Appears differently locally and online

    Hello. First of I would like to thank you for your awesome work. I am not a developer but I am in the process of learning. I noticed that the effects seem to be different when viewed locally, compared to the uploaded file.

    The scripts I have included are as follows:

    I also tried to change the values of dropRadius and perturbance in the jquery.ripples.js file but it doesn't seem to work when I upload the html file to my ftp server. The changes take effect only when viewed locally.

    Not even sure what to look for ㅠ.ㅠ

    Thanks in advance!

    opened by cim0ril 8
  • Mobile behavior.

    Mobile behavior.

    Hello.Thank you very much for this cool plugin. Currently, I added this plug-in on my website and now it works on desktop. However, ripple does not work on mobile. Do you know the cause?

    environment: ios 11 (iphone SE)

    The website is developed using WordPress. https://endorphins.tokyo

    Thank you in advance.

    opened by kazu44t 7
  • Internet Explorer Issue

    Internet Explorer Issue

    Hi, I'm using your jquery ripples effect on a pool service website here: www.holidaypoolservice.ca and am currently having problems in Internet Explorer 11.

    I’ve tried the website on all of our computers at work and my computer at home (all of which have auto-updates for IE) and the animation goes blank to a white colour after a quick flash. I’ve checked and it seems like everything is updated and installed (javascript, etc.).

    Please advise if this is a bug and what can be done. Thanks.

    bug 
    opened by alluregraphicdesign 7
  • PNG transparency is shown as white

    PNG transparency is shown as white

    Thank you for developing this great feature. I tried to use PNG as the background image, but it ignores the transparency and is shown as white. I tried to add rgba() and opacity in CSS to get rid of the white, but it still doesn't work. Any idea for solving this problem?

    opened by tumingche 5
  • re-initiate after destroy

    re-initiate after destroy

    Love the effect, thanks so much for your stellar work. I know that if I hide the effect, I can use "$('body, main').ripples('show');" to show it again, but how would I start the effect again once it's been destroyed, other than forcing a reload of the page?

    opened by fraserYT 4
  • Chrome Ripple Effect

    Chrome Ripple Effect

    Internet Explorer and Firefox display really amazing Ripple Effects But the same code doesn't create that kind of effect in Chrome. Any idea, why that's happening?

    opened by Shraddha2702 3
  • ripples doesn't work with background-attachment: fixed

    ripples doesn't work with background-attachment: fixed

    So basically that's the problem. Maybe you can fix this or have a work around this? It seems that it's a bug. It's trying to .getClientBoundRects() from window when it usually gets it from body, the actual thing that's being rippled.

    opened by mkantautas 3
  • adding tags for the repo

    adding tags for the repo

    Hello @sirxemic ,

    I am a member of cdnjs project. We want to host this library on CDN. Could you please adding git tags for this repo?

    Git tag can help us to know your release version. And, we could auto-update the lib by a new tag.

    Thanks for your help!

    https://github.com/cdnjs/cdnjs/issues/8216

    opened by Amomo 3
  • How to change the circle ripple into ellipse ripple

    How to change the circle ripple into ellipse ripple

    Hey, I'am working on a program that mainly focus on how to use some animation effect to display the rhythm of a music. The effect is shown below. qq 20150801144827 The ellipse will diffuse like the ripple. I want to add your effect to my project, but I'm a beginner on programming and just knowing a few things about javascript, html5 and d3.js (nothing about webgl). Can you tell me how to change the shape of the ripple?

    You can also contact me by sending a email to [email protected]. Thank you very much!

    opened by Sylvanassssss 3
  • How to add ripples programatically ?

    How to add ripples programatically ?

    I've tried this, but it doesn't work.

    $('#add').on('click', function(e){
    e.preventDefault();
    $('#test').ripples("drop", 200, 200, 20, 0.04);
    })
    
    opened by fluxxus 3
  • Using Ripple JS with Webpack

    Using Ripple JS with Webpack

    Good day, i was trying to use ripple JS with webpack some months back, and when going through the documentation it was not really specified how to use ripple JS with webpack, i would like to add the solution i found to your readme.md if you are comfortable with it as we are currently in the Hacktoberfest season in the developers community. Thanks and i look forward to your response.

    opened by thatFemicode 2
  • Document the format of the resolution property

    Document the format of the resolution property

    Is it an array of numbers representing width and height? An object with width and height properties? A string like "1024x768"? What exactly does it mean if only one size is specified (since the default is said to be simply 256)?

    opened by rulatir 2
  • Jitter on iOS / Safari

    Jitter on iOS / Safari

    When using my Iphone X with latest iOS version I'm getting a jitter like this:

    IMG_2441

    My code looks like that: ` This:

    const element = $('.Intro__Logo');
    element.ripples({
        resolution: 2400,
        perturbance: 0.04,
        interactive: true,
    });
    var counter = 1;
    const x_min = element.outerWidth() / 5 * 2;
    const x_max = element.outerWidth() / 5 * 3;
    const y_min = element.outerHeight() / 3;
    const y_max = element.outerHeight() / 3 * 2;
    var x = Math.random() * (x_max - x_min) + x_min;
    var y = Math.random() * (y_max - y_min) + y_min;
    element.ripples('drop', x, y, 50, 0.04);
    var drops = setInterval(function() {
        counter++;
        x = Math.random() * (x_max - x_min) + x_min;
        y = Math.random() * (y_max - y_min) + y_min;
        element.ripples('drop', x, y, 70, 0.03);
        if(counter >= 3) {
            clearInterval(drops);
        }
    }, 3000);
    

    `

    Is this a (known) issue or have i missed something?

    opened by MicahBCode 6
  • Correct syntax for changing images

    Correct syntax for changing images

    I'm trying to change the images and nothing seems to be happening. Is this the correct syntax? Is there something else i need to do?

    $('body', 'main').ripples('set', 'imageURL', 'url ("./../back/forest.jpg")');

    Tried with/without quotes, brackets, url before the brackets.. do i need to do anything else to update the image?

    F/905

    opened by Fever905 1
Releases(v0.6.2)
Owner
Pim Schreurs
I like making music and graphical things for the web.
Pim Schreurs
A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c

Codrops 571 Nov 21, 2022
Switch the background-image with using effect.

jQuery.BgSwitcher Switch the background image with using effect. Demo http://rewish.github.io/jquery-bgswitcher/ Usage <div class="box"> <p>Lorem ip

rewish 195 Dec 30, 2022
Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Background Scale Hover Effect Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths. Article on Codrops Demo

Codrops 98 Dec 6, 2022
A decorative website background effect where SVG shapes morph and transform on scroll.

Morphing Background Shapes A decorative website background effect where SVG shapes morph and transform on scroll. Article on Codrops Demo This demo is

Codrops 351 Dec 26, 2022
Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).

Segment Effect Background image segment effect as seen on Filippo Bello's Portfolio. Article on Codrops Demo License Integrate or build upon it for fr

Codrops 526 Nov 29, 2022
A motion hover effect for a background grid of images.

Image Grid Motion Effect A motion hover effect for a background grid of images. Article on Codrops Demo Installation Install dependencies: npm install

Codrops 118 Dec 31, 2022
fixed-background-effect

Fixed Background Effect A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect. Article

CodyHouse 50 Oct 28, 2022
Animated haze distortion effect for images and text, with WebGL.

Animated Heat Distortion Effects with WebGL A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on im

Lucas Bebber 289 Nov 1, 2022
Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

Pure CSS ripple effect (no JavaScript) CSS-only implementation of Android Material design "ripple" animation on click event Main advantage of this sol

Mladen Plavsic 334 Dec 11, 2022
Liquideffect - Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

LiquidEffect Javascript Library for creating liquid effect on image and RGB effect on mouse direction. Demo https://liquideffect.netlify.app/ Dependen

Rohail 8 May 6, 2022
:tada: Add a cute click effect to your mouse in your vuepress!

vuepress-plugin-cursor-effects ?? Add a cute click effect to your mouse in your vuepress! Document: moefy-vuepress LiveDemo: notev Install yarn add vu

null 19 Sep 25, 2022
Add a retro/vintage effect to images using the HTML5 canvas element

vintageJS Add a retro/vintage effect to images using the HTML5 canvas element. Installation $ npm install vintagejs How to use vintagejs is a functio

Robert Fleischmann 829 Dec 25, 2022
🧞‍♂️ Your magic WebGL carpet

⚠️ ⚠️ BETA! ⚠️ ⚠️ (Most likely I won't maintain this...) ??‍♂️ Aladino – your magic WebGL carpet Aladino is a tiny (around ~5kb gzipped) and dependenc

Luigi De Rosa 822 Dec 30, 2022
React particles animation background component

particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com

lindelof 561 Dec 24, 2022
A vue.js particles animation background component

particles-bg-vue A vue.js particles animation background component. Use it to make your website look cool. Check it out if you want to use it in React

lindelof 206 Dec 24, 2022
sync CSS 3D transformations to a WebGL scene

gl-css3d Synchronize CSS 3D transformations to a WebGL scene Usage: var createCSS3D = require('gl-css3d'); // pass an HTML DOM element node, such as

null 30 Oct 17, 2022
A JavaScript library for advanced 2D slideshow with WebGL, that provides variety of beautiful effects

gl-slideshow An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power. Shaders are forked from https://gl-transiti

Akihiro Oyamada 68 Nov 28, 2022
A JavaScript library for advanced 2D slideshow with WebGL, that provides variety of beautiful effects

gl-slideshow An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power. Shaders are forked from https://gl-transiti

Akihiro Oyamada 69 Jan 1, 2023
❄️ Add a live frosted glass blur effect over any type of web content, including text.

Frosted Glass ❄️ Add a live frosted glass blur effect over any type of web content, including text. ️️ Demos Install npm install frosted-glass --save

Adrian Carriger 63 Nov 10, 2022