{
  "name": "ripple-js",
  "version": "1.4.0",
  "description": "A small library for ripple effects",
  "main": "ripple.min.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/SirBaaron/ripple-js.git"
  },
  "keywords": [
    "ripple",
    "material-design",
    "animation",
    "library",
    "small"
  ],
  "author": {
    "name": "Aaron Längert"
  },
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/SirBaaron/ripple-js/issues"
  },
  "homepage": "https://github.com/SirBaaron/ripple-js#readme",
  "readme": "# ripple-js\r\n**A small Javascript library for ripple effects**\r\n\r\n<br><br>\r\n\r\n####View a demo [here](http://sirbaaron.github.io/ripple-js/demo/)\r\n\r\n<br><br><br>\r\n\r\n### Setup\r\n**With npm:**<p>1. At the root of your index, type `npm install ripple-js` into the command line.<br>2. Add the tag `<script src=\"node_modules/ripple-js/ripple.min.js\"></script>` to your index file.\r\n\r\n \r\n**Then simply add the class ripple to elements**\r\n\r\n<br><br><br>\r\n### Properties\r\n\r\nTo customize the ripple effect you can set the following tags on your ripple elements:\r\n* **ripple-color**<br>Customize the background of the ripple <p>°Corresponds to the css `background` property. You can set it to a color, a gradient or even a picture.<br>°_Examples:_ `ripple-background=\"#FF8C00\"`, `ripple-background=\"radial-gradient(red, yellow, green)\"`, `ripple-background=\"url('some-image.jpg')\"`<br>°_Default Value:_ `white`\r\n* **ripple-opacity**<br>Set the opacity of the ripple <p>°Corresponds to the css `opacity` property. Set it to a numerical value between 0 and 1, where 0 means full transparency and 1 no transparency<br>°_Example:_ `ripple-opacity=\"0.7\"`<br>°_Default value:_ `0.6`\r\n* **ripple-shadow**<br>Add a shadow to the ripple <p>°Corresponds to the css `box-shadow` property.<br>°_Example:_ `ripple-shadow=\"box-shadow: 0px 0px 25px 2px rgba(112,112,112,0.63)\"`<br>°_Default value:_ `none`\r\n* **ripple-press-expand-time**<br>Change the time the ripple needs to fully expand while the element is being pressed. <p>°The unit of measurement is seconds.<br>°_Example:_ `ripple-press-expand-time=\"10\"`<br>°_Default value:_ `3`\r\n* **ripple-release-expand-time**<br>Set the time the ripple needs to ripple away when the user releases the mouse / touch. <p>°The unit of measurement is seconds.<br>°_Example:_ `ripple-release-expand-time=\"1.5\"`<br>°_Default value:_ `0.4`\r\n* **ripple-leave-collapse-time**<br>Configure the time the ripple collapses in itselft when the user moves the touch / mousepress away from the element. <p>°The unit of measurement is seconds.<br>°_Example:_ `ripple-leave-collapse-time=\".8\"`<br>°_Default Value:_ `0.4`\r\n* **ripple-cancel-on-move**<br>If applied, the ripple cancels on the slightest touch movement. <br>°Normally the ripple gets canceled when the touch is being moved out of the container. With this attribute, the touch gets canceled on a touchmove or mousemove. This is especially great for when the container can be scrolled around by the user.\r\n\r\n<br><br><br>\r\n###Methods\r\n\r\n* **registerRipples()**<br>Call this method to register ripple elements afterwards <p>°If you add ripple elements after the document has loaded, you then need to call this function. The function gets called auomatically on initial load.<br>°_Example:_ \r\n```\r\ndocument.body.innerHTML += '<div class=\"ripple\">Added Afterwards</div>';\r\nripple.registerRipples();\r\n```\r\n* **ripple(element)**<br>With this function you can trigger a ripple programatically.<p>°The only argument it takes is the element you want to start the ripple at. This element needs to have been registered before!<br>°The ripple starts at the center of the element. This function is useful when you want to click an element based on key presses.<br>°_Example:_ `ripple.ripple(document.getElementById(\"someEl\"));`\r\n\r\n<br><br><br>\r\n###Events\r\n\r\n* **ripple-button-click**<br>This event gets fired when a ripple is released<p>The only parameter is `target`, which is the element that got clicked\r\n\r\n\r\n<br><br><br>\r\nTip: To unregister an element, simply remove the `ripple` class.\r\n",
  "readmeFilename": "README.md",
  "gitHead": "622c52dea7f5c3de58cf489c5438d3e80e1d21f3",
  "_id": "ripple-js@1.4.0",
  "_shasum": "e2d807969c7c53f6d65be1bae9df137b7ce3c791",
  "_from": "ripple-js@*"
}