在design.google.com上找到的波紋效果

我試圖複製在design.google.com上找到的連鎖效果。點擊標題中的鏈接，它會在標題中引發波紋。我在這裏找到了一個教程：http://webdesign.tutsplus.com/tutorials/recreating-the-touch-ripple-effect-as-seen-on-google-design--cms-21655但是，本教程不會將鏈接的點擊事件限制在鏈接中，而是在頁眉中捕獲任何點擊事件。在design.google.com上找到的波紋效果

我所做的就是給有問題的鏈接提供一類「rippleeffect」，並引導js聽該類的「點擊」。這沒有預期的影響......或者任何影響。如果我更改js以聽取標題類（「mdl-layout__header」）中找到的「點擊」，它可以工作......只是不符合要求。

我已經上傳的代碼jsfiddle.net/thepaperescape/1qmsh7Ld/ 和https://github.com/thepaperescape/Ripple

請幫忙，謝謝！

來源

2016-07-27 thepaperescape

我強烈建議你起草了你正在努力實現的[jsfiddle.net]什麼（https://jsfiddle.net），並在這裏分享的鏈接，這是得到一些幫助的最佳方式你問題。 –

https://jsfiddle.net/thepaperescape/1qmsh7Ld/ – thepaperescape

據我瞭解，你需要跳轉到鏈接從防止錨的默認行爲效果這可以通過jQuery/JavaScript的本身添加下面的代碼的效果之後完成，您還需要preventDefault（）方法後，鏈接。

查看我的pen我用css3動畫創建了漣漪效果&通過jquery計算了偏移量。使用此屬性可以在效果後跳轉到錨鏈接。

window.location = $(this).attr("href")

來源

2016-07-28 15:32:15 Harsh

你能否修改我的代碼來演示你的解決方案如何滿足我的願望效果？ – thepaperescape

在design.google.com上找到的波紋效果

回答

相關問題