From 58644c3e48c9ffbe9c2d5964f93ca642c4f2e1cd Mon Sep 17 00:00:00 2001 From: thatFemicode Date: Tue, 5 Oct 2021 01:22:42 +0100 Subject: [PATCH] Added steps on how to use jquery.ripples with budlers --- README.md | 48 +++++++++++++++++++++++++++++++----------------- 1 file changed, 31 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index e6cf729..d274eba 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,4 @@ -jQuery Ripples Plugin -===================== +# jQuery Ripples Plugin By the powers of WebGL, add a layer of water to your HTML elements which will ripple by cursor interaction! @@ -7,8 +6,7 @@ Important: this plugin requires the WebGL extension `OES_texture_float` (and `OE Click [here](http://sirxemic.github.io/jquery.ripples/) for a demo and to see how to use it. -Usage ------ +## 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. @@ -18,6 +16,16 @@ The quickest way to use this plugin on an element is to ensure that the element $(selector).ripples(); ``` +Using Bundlers like Webpack, Rollup, the easiest way to use this plugin is to install via npm then create a vendor.js file so as to utilize the power of bundlers which is splitting code into multiple files then initialize the plugin, follow the steps as laid out below. + +```js +npm install jquery.ripples +``` + +````js +import 'jquery.ripples'; +``` + Optionally you can tweak the behavior and appearance by initializing it with options (See the [options secton](#options) for the full list of options): ```js @@ -26,38 +34,43 @@ $(selector).ripples({ perturbance: ..., ... }); -``` +```` The plugin also has several methods to programmatically add drops, show, hide or remove the effects among other things. See the [methods section](#methods) 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](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes). +## 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](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes). | +## Methods -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` @@ -65,4 +78,5 @@ Call `$(selector).ripples('set', name, value)` to update properties of the effec - `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.