{"id":16954697,"url":"https://github.com/williankeller/ripple-effect-click","last_synced_at":"2025-07-28T09:40:18.116Z","repository":{"id":95407288,"uuid":"41673415","full_name":"williankeller/ripple-effect-click","owner":"williankeller","description":"Add ripple effect to any element you want when the click action happens (\"ripple effect\")","archived":false,"fork":false,"pushed_at":"2019-10-21T09:06:24.000Z","size":45,"stargazers_count":15,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-25T17:49:23.420Z","etag":null,"topics":["android","animation","css","css3","jquery","jquery-plugin","lollipop","lollipop-effect","ripple","ripple-effect"],"latest_commit_sha":null,"homepage":"http://williankeller.github.io/ripple-effect-click/","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/williankeller.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"williankeller","custom":["https://paypal.me/williankeller"]}},"created_at":"2015-08-31T12:11:47.000Z","updated_at":"2019-10-21T09:06:26.000Z","dependencies_parsed_at":"2023-04-13T21:25:56.189Z","dependency_job_id":null,"html_url":"https://github.com/williankeller/ripple-effect-click","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williankeller%2Fripple-effect-click","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williankeller%2Fripple-effect-click/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williankeller%2Fripple-effect-click/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williankeller%2Fripple-effect-click/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/williankeller","download_url":"https://codeload.github.com/williankeller/ripple-effect-click/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248487510,"owners_count":21112187,"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":["android","animation","css","css3","jquery","jquery-plugin","lollipop","lollipop-effect","ripple","ripple-effect"],"created_at":"2024-10-13T22:10:21.103Z","updated_at":"2025-04-11T21:44:28.899Z","avatar_url":"https://github.com/williankeller.png","language":"JavaScript","funding_links":["https://github.com/sponsors/williankeller","https://paypal.me/williankeller"],"categories":[],"sub_categories":[],"readme":"# Ripple Effect Click\n\n[![Build Status](https://travis-ci.org/williankeller/ripple-effect-click.svg?branch=master)](https://travis-ci.org/williankeller/ripple-effect-click)\n\nYou probably have noticed that ripple effect --(known as \"ripple\")-- when you click on an element on your Android.\nNow you can implement it to your application very fast and easily.\n\n### How to use:\nSimple and standard use, just define the class or element you want to add the ripple effect.\nThis example will apply the ripple effect to all buttons you have.\n```javascript\n$('button').rippleEffect();\n```\n\nYou also can define more than one element into the same definition, just like this:\n```javascript\n$('button, .to-ripple, .element-test').rippleEffect();\n```\n\n### Extra configurations:\nThere are some extra settings you can apply to the ripple's configuration:\n- timingFunction\n- duration\n\n**Animation properties:**\n* *CSS animation-timing-function Property:*\n    - `timingFunction`: linear\n    - ```javascript\n      $('button').rippleEffect({\n          timingFunction: 'linear'\n      });\n      ```\n* *CSS animation-duration Property:*\n    - `duration`: '0.65s'\n    - ```javascript\n      $('button').rippleEffect({\n          duration: '2s'\n      });\n      ```\n\n### Contribution\nWant to contribute to this extension? The quickest way is to open a [pull request on GitHub](https://help.github.com/articles/using-pull-requests).\n\n\n### Support\nIf you encounter any problems or bugs, please open an issue on [GitHub](https://github.com/williankeller/ripple-effect-click/issues).\nNeed help setting up or want to customize this extension to meet your business needs? Please let me know!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwilliankeller%2Fripple-effect-click","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwilliankeller%2Fripple-effect-click","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwilliankeller%2Fripple-effect-click/lists"}