sirxemic / jquery.ripples Goto Github PK

yeah, this is more like a feature request.
is there a way to tilt the the entire ripple effect?
so let's say i've got this image of a lake

now i only want the effect on the water obviously. i can do that if i overlay the same image with the water cut out. then the effect is only visible on the water. but still it will look wrong cause it's not tilted. any easy win on this?

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.

environment: ipad mini , ipad air
version: 10.3.3

mark :）

Is there a way to use a particular layer to be the receptor for interactions (mouse move and click), but have the effect be on a different layer? I ask because I want the ripples to be behind other objects, but it appears that you have to make the top most div be the one with the effects if you want interactivity.

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?

When I use it on a page that has the ability to scroll the canvas cuts off at the bottom of the initial height, is there a way to fix this?

@sirxemic
Awesome effect! I'd like to add it to a touch screen experience in local. I am a newbie and what I did is to copy and paste the html page to Notepad++ and save it as hmtl page. For some reason the water effect doesn't show up and have an error message "TypeError: $(...).ripples is not a function".
Please let me know where I am failing or exact workflow to activate it locally. Thx!

Thanks for the nice plugin! I need to use the with jQuery.noConflict. How ca I do this?

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!

Is there a reason why this effect doesn't work on mobile? Looking at webGL support, and it looks like chrome on phones should be able to render the effect, but for some reason it isn't.

It would be great if after calling $(el).ripples('destroy') and then reiniting $(el).ripples({options...}) it would work :). Is there a pause trigger?

Hi, this is a nice plugin. I have used it in html version. There is no problem. But, when I trying to integrate in wordpress theme, it showing following errors in console

Uncaught TypeError: (intermediate value)(intermediate value) is not a function

Uncaught TypeError: $(...).ripples is not a function

Please can you help me by fixing this.
Thanks

I'm using background #000 and would like to change the color of the ripple. How to change?

Firstly, thanks a lot for this library, very helpful.
This library creates canvas element for water ripple effect, right? I am creating ripple effect on body element, sometimes due to DOM manipulation inside body element, scroll bar appears and disappears on body element. If the page loads with scroll bar on body and after deleting some elements in body scroll bar disappears because of less space required by remaining element. Because of which there appears a blank space on the left where scroll bar occupied space then.
I can fix it by setting canvas: width:100% but this can be messy hack if there were more than one canvas element on my page.

This gif to explain what I meant: https://i.imgur.com/XqdLRNR.gifv Dark blue color is the color of background on body along with background image

So my request is that your library should set some custom user-defined CSS selector which can be used in this type of situation...
Thanks

This plugin is great! However, you know, the shapes of many rivers or lakes are irregular. How do I use this plugin to an irregular lake? I find it is only used to create ripples in the rectangular region. I look forward to your reply. Thank you.

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.

when I just open index.html,the error is:

Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Received an invalid response. Origin 'null' is therefore not allowed access.

when I run it with a server ,it's ok. I want to know why?

I'm using Qt 5.5.0 Canvas3D and am wondering if there is a way for ripples texture to use gl.UNSIGNED_BYTE instead of gl.FLOAT. My attempts at doing that were unsuccessful, and I'm having a hard time, because I'm just beginning with GLSL and WebGL. Any suggestions how to tackle that problem?

Hello, I am set parameter interactive false, but ripple still work on mousemove...(sorry for my bad English)

showing console error in chrome browser :-
"Access to Image at 'file:///E:/Themeix/HTML5/SPA%20Beauty%20Care%20Html%20Template/preview/images/header-bg.jpg' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access."

Nice Effect. But this ripple effect doesn’t work in IE11 (Windows 8.1 ).

What is may causing this error? your web example works on my browser with jQuery 2.0.0, but with my project it causes the following errors:

Console log with jQuery 3.1.0:

jQuery.Deferred exception: gl is undefined
Ripples.prototype.drop@file:///..../scripts/lib/jquery.ripples.js:566:7
$.fn.ripples/<@file:///..../scripts/lib/jquery.ripples.js:652:9
.each@https://code.jquery.com/jquery-3.1.0.min.js:2:2813
r.prototype.each@https://code.jquery.com/jquery-3.1.0.min.js:2:1001
$.fn.ripples@file:///..../scripts/lib/jquery.ripples.js:640:12
enableRipples@file:///..../scripts/main.js:125:3
@file:///..../scripts/main.js:15:3
g/</j@https://code.jquery.com/jquery-3.1.0.min.js:2:29566
g/</k<@https://code.jquery.com/jquery-3.1.0.min.js:2:29882
undefined
--------------------------------------
  TypeError: gl is undefined     jquery.ripples.js (line 566, col 7)
  gl.viewport(0, 0, this.resolution, this.resolution);

Console log with jQuery 2.0.0:

  TypeError: gl is undefined     jquery.ripples.js (line 566, col 7)
  gl.viewport(0, 0, this.resolution, this.resolution);

This awesome plugin works in any way on mobile devices?

I am setting ripples effect on body and setting background-image on the same using in CSS file.
But I am observing that the image is being requested twice in network tab of chrome devtools. First time it is requested by html document via css (of course) and second one is being requested by ripples.js.
I don't think this is a good thing, requesting same file twice at same time could slow the webpage loading, right?
Should I be concerned about it? Can you please do something about it, to fix the problem?
btw, thanks a lot for this library, extremely useful :-)

Hello!
I try to make ripples on div id

i.e in your demo
html

<div id="fold"></div>

css

main, #fold {
    display: inline-block;
    vertical-align: middle;
    background: url(img/bg.jpg);
    padding:  100px;
    max-width: 500px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

js

        $('#fold').ripples({
            resolution: 128,
            dropRadius: 10, //px
            perturbance: 0.04,
            interactive: false
        });

but ripples not appear
any idea?

When I run it in IE I get the message "TypeError: Object doesn't support property or method 'ripples'"

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?

Example:

<div class="rippleWtihBg">
   <div class="divWithContent">
   </div>
</div>

After adding a canvas it does not read mouseover\mouseclick over .divWithContent - ripples show up on an left top corner +- 20px;

Fixed by changing in dropAtMouse function:

e.offsetX || (e.pageX - this.$el.offset().left),
e.offsetY || (e.pageY - this.$el.offset().top),

to:

(e.pageX - this.$el.offset().left) || e.offsetX,
(e.pageY - this.$el.offset().top) || e.offsetY,

Tested on Chrome\Mozilla.

If background-image is base64 image, crossOrigin error in Safari of Mac OS.

Needs to change in 176 line.
image.crossOrigin = null;

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

$('#add').on('click', function(e){
e.preventDefault();
$('#test').ripples("drop", 200, 200, 20, 0.04);
})

Steps to reproduce

edit index.html in source file

main {
    background: url(img/bg.jpg) no-repeat center center; /* that's fine */
}

It doen't work when change background-position to center top:

main {
    background: url(img/bg.jpg) no-repeat center top;
}

Hello, I'm trying to remove teh whiate shade: I would use it on a black text and preserve only the distortion, without the shade.

I haven't tested it on a live environment but, whilst testing on my local machine it gave me an error concerning cross-origin image loading.

found the culprit
line 133: image.src = backgroundUrl;

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.

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!

I am getting this warning in console of latest version (55) of Firefox

Error: WebGL warning: drawArrays: This operation requires zeroing texture data. This is slow.

Can you do something about it?
Thanks a lot for this library, very helpful.

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!

cdnjs/cdnjs#8216

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.

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.

when body use background picture with url and use style=background-size:cover;
the image disapper, if I give it a width and height and It works.

how to solve this problem.thanks in advance

Hello,
This error occurred when using in wordpress.
Uncaught TypeError: (intermediate value)(intermediate value) is not a function
at jquery.ripples-min.js?ver=1.0.0:7
at jquery.ripples-min.js?ver=1.0.0:7
at jquery.ripples-min.js?ver=1.0.0:7

A nice feature would if you could update the background image.

Hi, this is so awesome, and I want to use it in any case, I already spent 4 hours without fixing it.. if I set background-attachment: fixed; the image flickers a lot, it only seems to work in Chrome.. I tried to remove the property position:relative; and set it to position:static; then the mouse over effect doesn't seem to work. Is there any workaround for this ?

thanks

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

Example:

Ripples not working great when the window is resized. I think reinitialize needed on window resize.

What do you think?

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?