Name | Date | Size | #Lines | LOC | ||
---|---|---|---|---|---|---|
.. | - | - | ||||
.github/ | H | 25-Apr-2025 | - | 34 | 14 | |
demo/ | H | 25-Apr-2025 | - | 416 | 320 | |
test/ | H | 25-Apr-2025 | - | 279 | 225 | |
.bower.json | H A D | 25-Apr-2025 | 1.4 KiB | 45 | 45 | |
.gitignore | H A D | 25-Apr-2025 | 17 | 2 | 1 | |
.travis.yml | H A D | 25-Apr-2025 | 765 | 24 | 23 | |
CONTRIBUTING.md | H A D | 25-Apr-2025 | 3.4 KiB | 78 | 39 | |
README.md | H A D | 25-Apr-2025 | 1.1 KiB | 41 | 32 | |
bower.json | H A D | 25-Apr-2025 | 1.1 KiB | 36 | 35 | |
hero.svg | H A D | 25-Apr-2025 | 1.2 KiB | 31 | 29 | |
index.html | H A D | 25-Apr-2025 | 935 | 28 | 13 | |
paper-ripple.html | H A D | 25-Apr-2025 | 20.1 KiB | 764 | 569 |
README.md
1[](https://travis-ci.org/PolymerElements/paper-ripple) 2 3##<paper-ripple> 4 5Material design: [Surface reaction](https://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-surface-reaction) 6 7`paper-ripple` provides a visual effect that other paper elements can 8use to simulate a rippling effect emanating from the point of contact. The 9effect can be visualized as a concentric circle with motion. 10 11<!--- 12``` 13<custom-element-demo> 14 <template> 15 <script src="../webcomponentsjs/webcomponents-lite.js"></script> 16 <link rel="import" href="paper-ripple.html"> 17 <style is="custom-style"> 18 div { 19 height: 100px; 20 width: 100%; 21 box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24); 22 } 23 24 paper-ripple { 25 color: #4285f4; 26 } 27 </style> 28 <next-code-block></next-code-block> 29 </template> 30</custom-element-demo> 31``` 32--> 33```html 34<div style="position: relative"> 35 <paper-ripple></paper-ripple> 36</div 37``` 38 39 40 41