{"id":13637379,"url":"https://github.com/virtyaluk/paper-ripple","last_synced_at":"2025-04-14T21:45:56.050Z","repository":{"id":57318696,"uuid":"46163058","full_name":"virtyaluk/paper-ripple","owner":"virtyaluk","description":":dart: Paper Ripple lets you add a Material Design ripple effect to any UI elements on your web page.","archived":false,"fork":false,"pushed_at":"2017-06-01T14:48:13.000Z","size":569,"stargazers_count":59,"open_issues_count":6,"forks_count":6,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-06T23:31:10.608Z","etag":null,"topics":["animation","css","effect","javascript","jquery","js","material","material-design","paper-ripple","ripple","wave"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/paper-ripple","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/virtyaluk.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-14T05:37:50.000Z","updated_at":"2023-10-29T16:51:36.000Z","dependencies_parsed_at":"2022-08-25T20:32:10.905Z","dependency_job_id":null,"html_url":"https://github.com/virtyaluk/paper-ripple","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/virtyaluk%2Fpaper-ripple","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/virtyaluk%2Fpaper-ripple/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/virtyaluk%2Fpaper-ripple/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/virtyaluk%2Fpaper-ripple/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/virtyaluk","download_url":"https://codeload.github.com/virtyaluk/paper-ripple/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248649758,"owners_count":21139549,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","css","effect","javascript","jquery","js","material","material-design","paper-ripple","ripple","wave"],"created_at":"2024-08-02T00:01:16.499Z","updated_at":"2025-04-14T21:45:56.028Z","avatar_url":"https://github.com/virtyaluk.png","language":"JavaScript","funding_links":[],"categories":["CSS and JS"],"sub_categories":["Components"],"readme":"\u003ch1 align=\"center\"\u003e\n\t\u003cimg width=\"256\" src=\"https://raw.githubusercontent.com/virtyaluk/paper-ripple/master/media/paper-ripple.png\" alt=\"mutation-watcher\" style=\"clear: right;\"\u003e\n\u003cbr/\u003e\nPaperRipple v0.3.0\n\n\u003c/h1\u003e\n\n[![Build Status](https://travis-ci.org/virtyaluk/paper-ripple.svg)](https://travis-ci.org/virtyaluk/paper-ripple) [![Code Climate](https://codeclimate.com/github/virtyaluk/paper-ripple/badges/gpa.svg)](https://codeclimate.com/github/virtyaluk/paper-ripple) [![Dependency Status](https://gemnasium.com/virtyaluk/paper-ripple.svg)](https://gemnasium.com/virtyaluk/paper-ripple) [![ESDoc Coverage](https://doc.esdoc.org/github.com/virtyaluk/paper-ripple/badge.svg)](https://doc.esdoc.org/github.com/virtyaluk/paper-ripple/)\n\u003e Material Design Ripple effect in pure JS \u0026 CSS.\n \n**PaperRipple** lets you add a Material Design [ripple effect](https://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-surface-reaction) to UI elements.\n\n## :dvd: Install\n\n##### Bower:\n\n```bash\n$ bower install paper-ripple\n```\n\n##### NPM:\n```bash\n$ npm install paper-ripple --save\n```\n\n## How it looks like\n\n![](https://raw.githubusercontent.com/virtyaluk/paper-ripple/master/media/demo.gif)\n\nLive example at [codepen](http://codepen.io/virtyaluk/full/BoMXKM/).\n\n## :clipboard: Usage\n\nFirst, you need to include **PaperRipple** JS and CSS files to your HTML-page.\n\nAssume, you have next HTML:\n````html\n\u003cbutton class=\"paper-button\"\u003ebutton\u003c/button\u003e\n\u003cbutton class=\"paper-button blue-text\"\u003ebutton\u003c/button\u003e\n\u003cbutton class=\"paper-button orange-text\"\u003ebutton\u003c/button\u003e\n````\n\nYour JS will look like:\n```js\n// // Getting all the buttons\nvar button = document.querySelectorAll('button.paper-button');\n\n// Traversing the buttons\n[].forEach.call(buttons, function(button) {\n\t// New PaperRipple for the button\n\tvar ripple = new PaperRipple();\n\t\n\t// Adding ripple container to the button\n\tbutton.appendChild(ripple.$);\n\n\t// Subscribing to 'mousedown' and 'mouseup' button events to activate ripple effect\n\t// when a user clicks on the button.\n\tbutton.addEventListener('mousedown', function(ev) {\n\t\tripple.downAction(ev);\n\t});\n\tbutton.addEventListener('mouseup', function() {\n\t\tripple.upAction();\n\t});\n});\n```\n\n__NOTE:__ It's important that each element you add the ripple to must be relative position.\n\nIf you prefer to work with modules in JS, **PaperRipple** exports itself in AMD, CommonJS and as global variable if no `require` or `module` were found. In addition, under `dist\\systemjs` you may find **PaperRipple** as SystemJS module.\n\nEven more, if you prefer to work with jQuery you may find jQuery plugin based on **PaperRipple** under `dist` folder. So, the previous example may be simplified to the next:\n\n```js\n$('button.paper-button').paperRipple();\n```\n\n### Configuration\n\nYou may pass additional options to the constructor to control **PaperRipple** behavior:\n\n```js\nvar ripple = new PaperRipple(cfg);\n```\n\nIf you have DOM element you want to use as **PaparRipple** element, pass it to the constructor. But be careful, **PaperRipple** element must follow next structure:\n\n```html\n\u003cdiv class=\"paper-ripple\"\u003e\n\t\u003c!-- optional --\u003e\n\t\u003cdiv class=\"paper-ripple__background\"\u003e\u003c/div\u003e\n\n\t\u003c!-- optional --\u003e\n\t\u003cdiv class=\"paper-ripple__waves\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nvar rippleEl = document.querySelector('.paper-ripple'),\n\tripple = new PaperRipple(rippleEl);\n\nassert(ripple.$ === rippleEl); // true\n```\n\nOr you may pass object containing next options:\n\n* `initialOpacity`: *Number* - Defaults to `0.25`. The initial opacity of the each wave.\n* `opacityDecayVelocity`: *Number* - Defaults to `0.8`. How fast (opacity per second) the wave fades out.\n* `recenters`: *Boolean* - Defaults to `false`. If `true`, waves will exhibit a gravitational pull towards the center of their container as they fade away.\n* `center`: *Boolean* - Defaults to `false`. If `true`, waves will center inside its container.\n* `round`: *Boolean* - Defaults to `false`. If `true`, ripple effect will apply within a circle.\n* `target`: *HTMLElement* - Defaults to `null`. Target DOM element as the container for the waves.\n\n```js\nvar ripple = new PaperRipple({\n\tinitialOpacity: 0.3,\n\trecenters: true\n});\n```\n\nEach of these options may be changed after initializing:\n\n```js\nripple.center = true;\nripple.opacityDecayVelocity = 0.7;\n```\n**NOTE:** Changing of `$`, `$background` or `$waves` after initialization not recommended.\n\n### Styling\n\nUse CSS color property to style the ripple:\n\n```css\n.paper-ripple {\n\tcolor: #FF9800;\n}\n```\n\n**NOTE:** CSS color property is inherited so it is not required to set it on the `.paper-ripple` directly.\n\n## :green_book: Browser Support\n\n- Chrome\n- Firefox\n- Safari\n- Opera\n- IE9+\n\n__NOTE:__ IE9 doesn't support `classList` on `HTMLElement` object and `requestAnimationFrame`. You need to polyfill it. My choice: classList - [`bower install classlist`](https://github.com/components/classList.js) or [`npm install classlist-polyfill`](https://github.com/yola/classlist-polyfill); requestAnimationFrame - [`bower install window.requestanimationframe`](https://github.com/Polyfiller/window.requestAnimationFrame) or [`npm install window.requestanimationframe`](https://github.com/Polyfiller/window.requestAnimationFrame).\n\n## :mortar_board: Docs\n\n**PaperRipple** JS has an excellent documentation. [Esdoc](https://github.com/nanopx/gulp-esdoc) is used to generate it. To generate it by yourself do following:\n\nClone the repo:\n\n```bash\n$ git clone https://github.com/virtyaluk/paper-ripple.git\n```\nInstall dependencies:\n\n```bash\n$ npm install -g gulp \u0026\u0026 npm install\n```\n\nGenerate the docs:\n\n```bash\n$ gulp docs\n```\n\nDocs will be available under `docs` folder in the root of the project.\n\n## Running tests\n\nInstall dependencies:\n\n```bash\n$ npm install\n```\n\nRun them:\n\n```bash\n$ gulp test\n```\n\n## :calendar: Changelog\n\n### 0.2.0 (December 07, 2015)\n* Added new `round` property on main `PaperRipple` class.\n\n### 0.3.0 (June 01, 2017)\n* Fixes typo in jQuery plugin code.\n* Fixes [support of IE browsers](https://github.com/virtyaluk/paper-ripple/issues/1).\n\n## :green_book: License\n\n[Licensed under the MIT license.](https://github.com/virtyaluk/paper-ripple/blob/master/LICENSE)\n\nCopyright (c) 2017 Bohdan Shtepan\n\n---\n\n\u003e [modern-dev.com](http://modern-dev.com) \u0026nbsp;\u0026middot;\u0026nbsp;\n\u003e GitHub [@virtyaluk](https://github.com/virtyaluk) \u0026nbsp;\u0026middot;\u0026nbsp;\n\u003e Twitter [@virtyaluk](https://twitter.com/virtyaluk)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvirtyaluk%2Fpaper-ripple","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvirtyaluk%2Fpaper-ripple","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvirtyaluk%2Fpaper-ripple/lists"}