41 lines
1.1 KiB
Markdown
41 lines
1.1 KiB
Markdown
|
[](https://travis-ci.org/PolymerElements/paper-ripple)
|
||
|
|
|
||
|
|
##<paper-ripple>
|
||
|
|
|
||
|
|
Material design: [Surface reaction](https://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-surface-reaction)
|
||
|
|
|
||
|
|
`paper-ripple` provides a visual effect that other paper elements can
|
||
|
|
use to simulate a rippling effect emanating from the point of contact. The
|
||
|
|
effect can be visualized as a concentric circle with motion.
|
||
|
|
|
||
|
|
<!---
|
||
|
|
```
|
||
|
|
<custom-element-demo>
|
||
|
|
<template>
|
||
|
|
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||
|
|
<link rel="import" href="paper-ripple.html">
|
||
|
|
<style is="custom-style">
|
||
|
|
div {
|
||
|
|
height: 100px;
|
||
|
|
width: 100%;
|
||
|
|
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
|
||
|
|
}
|
||
|
|
|
||
|
|
paper-ripple {
|
||
|
|
color: #4285f4;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<next-code-block></next-code-block>
|
||
|
|
</template>
|
||
|
|
</custom-element-demo>
|
||
|
|
```
|
||
|
|
-->
|
||
|
|
```html
|
||
|
|
<div style="position: relative">
|
||
|
|
<paper-ripple></paper-ripple>
|
||
|
|
</div
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
|