{"id":17749343,"url":"https://github.com/devloop01/softripple-js","last_synced_at":"2025-05-12T13:15:18.102Z","repository":{"id":41628095,"uuid":"268887293","full_name":"devloop01/softripple-js","owner":"devloop01","description":"A small library for creating soft ripple interactions on any webpage","archived":false,"fork":false,"pushed_at":"2022-12-12T23:27:48.000Z","size":1456,"stargazers_count":13,"open_issues_count":18,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-12T13:14:59.179Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/devloop01.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":"2020-06-02T19:13:07.000Z","updated_at":"2020-12-27T17:56:28.000Z","dependencies_parsed_at":"2023-01-28T03:01:34.875Z","dependency_job_id":null,"html_url":"https://github.com/devloop01/softripple-js","commit_stats":null,"previous_names":["devloop01/soft-ripple-js"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devloop01%2Fsoftripple-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devloop01%2Fsoftripple-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devloop01%2Fsoftripple-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devloop01%2Fsoftripple-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devloop01","download_url":"https://codeload.github.com/devloop01/softripple-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253745195,"owners_count":21957319,"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":[],"created_at":"2024-10-26T11:22:52.669Z","updated_at":"2025-05-12T13:15:17.677Z","avatar_url":"https://github.com/devloop01.png","language":"JavaScript","readme":"# Soft Ripple\n\n![image](https://i.imgur.com/msl0Lti.gif)\n\nA small Javascript library to create soft ripple interaction\n\nCheck the demos: [here](https://codepen.io/dev_loop/full/KKVKqrq)\n\n## Installation\n\nYou can install softripple-js in your project via npm\n\n```\nnpm install --save softripple-js\n```\n\nOr load the ES module directly\n\n```html\n\u003cscript src=\"https://unpkg.com/softripple-js/dist/softripple.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nIt's pretty easy to use. Just import the package an declare SoftRipple with the element you want the ripple effect to take place.\n\n```javascript\nconst rippleEffect = new SoftRipple(el);\n```\n\nAlso you can add effect to multiple elements at once.\n\n```javascript\nconst el1 = document.getElementById(\"el1\");\nconst el2 = document.getElementById(\"el2\");\nconst rippleEffect = new SoftRipple([el1, el2]);\n```\n\nYou can also pass in options as the second argument which needs to be an object.\n\n```javascript\nconst rippleEffect = new SoftRipple(el, { options });\n```\n\n## Options\n\nTo customize the ripple effect you can use the following properties, and then pass them as an object as the second argument of the constructor.\n\n#### rippleColor\n\nA String representing the color of the ripple. Defaults to the `background-color` of the element.\n\n#### transitionDuration\n\nDuration of the transition in seconds. Default is `0.8s`.\nminimum is `0.4` seconds and max is `2` seconds.\n\n#### rippleWidth\n\nWidth of the ripple. Defaults to `4`.\nminimum is `2` and max is `8`.\n\n#### rippleMaxSize\n\nMaximum size of the ripple. Defaults to `100`.\nminimum is `50` and max is `200`.\n\n#### randomSize\n\nBoolean property to set random size of the ripples. Default value is `false`.\n\n#### randomColor\n\nBoolean property to set random color of the ripples. Default value is `false`.\n\n#### overrideDefaults\n\nBoolean property to override the defaults. Default value is `false`.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevloop01%2Fsoftripple-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevloop01%2Fsoftripple-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevloop01%2Fsoftripple-js/lists"}