材料設計 - 製作上點擊漣漪 - 在點擊

Question

首先點動畫，這裏的鏈接（點擊任何瓷磚）：http://www.google.com/design/#resources

我已經通過代碼

<svg width="100%" height="100%" overflow="hidden"> 
    <defs></defs> 
    <g> 
     <ellipse cx="27.5" cy="189.46875" rx="20" ry="20" stroke="none" fill="white" class="ripple" fill-opacity="0.5" style="-webkit-transform: scale(1); opacity: 0;"> 
     </ellipse> 
    </g> 
</svg> 

在消失點擊，在點擊上面的橢圓生成。

任何人都可以幫助如何創建點擊點？

Answer 1

使用event.pageX和event.pageY可在事件處理程序中查找鼠標座標。使用這些值來定位圓。

jsfiddle.net/pu8jX

Answer 2

我創建了這個插件，它可在github你去抓https://github.com/ninox92/Google-material-design-ripple-effect/

預覽：http://thomasreynders.com/google-material-design-plugin/

Answer 3

這是我發現的最好的例子，我希望他們服務！

http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design

其他驚人庫是Waves：點擊谷歌的材質設計

http://publicis-indonesia.github.io/Waves/