{"id":21502232,"url":"https://github.com/gabrielfins/ripple-effect","last_synced_at":"2025-07-15T22:32:35.631Z","repository":{"id":47071147,"uuid":"339626937","full_name":"gabrielfins/ripple-effect","owner":"gabrielfins","description":"Efeito de ripples baseado no Material Design.","archived":false,"fork":false,"pushed_at":"2024-11-03T17:56:57.000Z","size":291,"stargazers_count":18,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-20T15:02:41.571Z","etag":null,"topics":["css","css-animations","css-library","css3","css3-animations","html","html-css","html-css-javascript","html5","javascript","jquery","js","material","material-design","material-ui","webpack"],"latest_commit_sha":null,"homepage":"https://gabrielfins.github.io/ripple-effect","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/gabrielfins.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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}},"created_at":"2021-02-17T06:02:09.000Z","updated_at":"2024-11-14T22:36:59.000Z","dependencies_parsed_at":"2024-01-26T02:38:34.558Z","dependency_job_id":"bce66250-cac2-4044-b736-f38bd7b401f1","html_url":"https://github.com/gabrielfins/ripple-effect","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrielfins%2Fripple-effect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrielfins%2Fripple-effect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrielfins%2Fripple-effect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrielfins%2Fripple-effect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gabrielfins","download_url":"https://codeload.github.com/gabrielfins/ripple-effect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225885465,"owners_count":17539641,"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":["css","css-animations","css-library","css3","css3-animations","html","html-css","html-css-javascript","html5","javascript","jquery","js","material","material-design","material-ui","webpack"],"created_at":"2024-11-23T18:14:08.832Z","updated_at":"2024-11-23T18:14:09.386Z","avatar_url":"https://github.com/gabrielfins.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cimg src=\"images/ripple-effect-logo.svg\" alt=\"Ripple Effect\" width=\"350px\" /\u003e\n[![MIT license](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/gabrielfins/ripple-effect/blob/master/LICENSE.md)\n[![Website shields.io](https://img.shields.io/website-up-down-green-red/http/shields.io.svg)](https://gabrielfins.github.io/ripple-effect)\n\n### Efeito de ripples baseado no Material Design feito com **CSS, JavaScript e jQuery**\n\nEsse efeito utiliza seletores do jQuery e manipulação do DOM para obter um efeito extremamente preciso em relação ao original.\n\n## Demo\n[![forthebadge](https://forthebadge.com/images/badges/built-with-resentment.svg)](https://forthebadge.com)\n\n* https://gabrielfins.github.io/ripple-effect\n\n## Como usar\n[![forthebadge](https://forthebadge.com/images/badges/ctrl-c-ctrl-v.svg)](https://forthebadge.com)\n\nClasse | Efeito\n-------|-------\nmd-ripples | Adiciona o efeito ao componente\nripples-light | Muda a cor do efeito para sua versão clara\nripples-dark (padrão) | Muda a cor do efeito para sua versão escura\n\n##### Nota: as classes ripples-light e ripples-dark só funcionam em conjunto com a classe md-ripples.\n\n### Mudando os padrões do efeito\n\n* Exemplo:\n\n```css\n.md-ripples . ripple {\n    background-color: #21D4FD;\n    opacity: .32;\n}\n```\n\nNesse exemplo, todo elemento que tiver o efeito adicionado com `.md-ripples` terá o efeito da cor `#21D4FD`.\n\n### Criando classes personalizadas\n\n* Exemplo:\n\n```css\n.ripples-blue .ripple {\n    background-color: #B721FF;\n    opacity: .32;\n}\n```\n\nNesse exemplo, o elemento que tiver a classe `.ripples-blue` terá o efeito da cor `#B721FF`.\n\n##### Nota: a opacidade padrão é .16 e sua alteração é opcional.\n\n## Instalando no seu projeto\n[![forthebadge](https://forthebadge.com/images/badges/powered-by-electricity.svg)](https://forthebadge.com)\n\nVocê pode realizar a instalação das seguintes maneiras:\n\n1. Utilizando o npm\n\n```\nnpm install @gabrielfins/ripple-effect\n```\n\n2. Utilizando o yarn\n\n```\nyarn add @gabrielfins/ripple-effect\n```\n\n3. Baixando os arquivos\n\nAcesse o [site de demonstração](https://gabrielfins.github.io/ripple-effect), vá até a seção **\"Adicione ao seu projeto\"** e clique no botão **\"Baixar\"** para fazer o download apenas dos arquivos necessários. Ou baixe diretamente do repositório.\n\n## Adicionando ao seu projeto\n\n1. Instalando com npm ou yarn\n\nApós realizar a instalação, basta importar o pacote para o arquivo.\n\n```js\nimport \"@gabrielfins/ripple-effect\";\n```\n\n2. Ao baixar os arquivos\n\nPor esse método, basta adicionar a tag a seguir em qualquer lugar na tag `\u003chead\u003e` ou `\u003cbody\u003e` do seu documento html.\n\n```html\n\u003cscript src=\"ripples.js\"\u003e\u003c/script\u003e\n```\n\nInstale usando jsdelivr CDN (Install Using jsdelivr CDN):\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/gabrielfins/ripple-effect/dist/ripples.js\"\u003e\u003c/script\u003e\n```\n\n---\n#### Criado e mantido por [Gabriel Figueredo](https://github.com/gabrielfins)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabrielfins%2Fripple-effect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgabrielfins%2Fripple-effect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabrielfins%2Fripple-effect/lists"}