jquery.ripples | Add a water ripple effect to your background using WebGL | Graphics library

by sirxemic JavaScript Version: 0.6.3 License: MIT

X-Ray Key Features Code Snippets Community Discussions(1)Vulnerabilities Install Support

kandi X-RAY | jquery.ripples Summary

jquery.ripples is a JavaScript library typically used in User Interface, Graphics, WebGL applications. jquery.ripples has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i jquery.ripples' or download it from GitHub, npm.

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.

Support

Quality

Security

License

Reuse

Support

jquery.ripples has a medium active ecosystem.

It has 994 star(s) with 414 fork(s). There are 47 watchers for this library.

It had no major release in the last 12 months.

There are 23 open issues and 55 have been closed. On average issues are closed in 78 days. There are 2 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of jquery.ripples is 0.6.3

Quality

jquery.ripples has 0 bugs and 0 code smells.

Security

jquery.ripples has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

jquery.ripples code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

License

jquery.ripples is licensed under the MIT License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

jquery.ripples releases are available to install and integrate.

Deployable package is available in npm.

Installation instructions are not available. Examples and code snippets are available.

It has 163 lines of code, 0 functions and 3 files.

It has low code complexity. Code complexity directly impacts maintainability of the code.

Top functions reviewed by kandi - BETA

kandi has reviewed jquery.ripples and discovered the below as its top functions. This is intended to give you an instant insight into jquery.ripples implemented functionality, and help decide if they suit your requirements.

Loads configuration from Canvas Object .
Translates the background position according to the background position
creates a program
Creates a config object
create an image data
Drop pointer event handler .
Compile a shader
Extracts the value from a url .
Jump to one step
Bind a texture

Get all kandi verified functions for this library.

jquery.ripples Key Features

No Key Features are available at this moment for jquery.ripples.

jquery.ripples Examples and Code Snippets

No Code Snippets are available at this moment for jquery.ripples.

Community Discussions

Trending Discussions on jquery.ripples

Ripples Effect not Showing, How Can I Fix?

QUESTION

Ripples Effect not Showing, How Can I Fix?

Asked 2021-Mar-03 at 13:47

I'm trying to get the JQuery Ripple effect to work on a container within my page (#middle-container) but for some reason its not working and I've looked at resources and I'm pretty sure I'm using the right code, but I'm making it in Squarespace so I'm not sure if that makes a notable difference.

Here is a link to the website: Solace

The password is: solace (private until I've finished with it)

Below is a direct snippet of my code:

...

ANSWER

Answered 2021-Mar-03 at 13:47

It looks like the two scripts (the one for JQuery and the one for Ripples) are not present on the home page of the site in question.

It looks like you added them to your /home page here, but that page is not set as your actual home page. You may be aware of that, but thought it was worth mentioning. Because I work with Squarespace a lot, I knew to look for that, but others here on StackOverflow would not know to go to /home to see what you're referring to. Keep that in mind.

In any case, to fix the issue, move your JavaScript code (from the first snippet in your question above) to Footer code injection instead of Header code injection. It must be in Footer code injection because, otherwise, it executes before your .ripples element is present, and so therefore the code does nothing.

So, move it to Footer code injection so that, when it runs, the element with class="ripples" is present.

Source https://stackoverflow.com/questions/66450074

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install jquery.ripples

You can install using 'npm i jquery.ripples' or download it from GitHub, npm.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Find more information at: