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にあるリップルエフェクト

私がしたことは、問題のリンクに「波及効果」のクラスを与え、そのクラスへの「クリック」を聞くようにjsに指示しました。これは、望ましい影響...または実際には何の影響もありません。ヘッダクラス（ "mdl-layout__header"）にある "クリック"を聞くようにjsを変更すると、うまくいきません。

私は助けてください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でオフセットを計算しました。このattrを使用して、効果の後にアンカーリンクにジャンプします。

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

出典

2016-07-28 15:32:15 Harsh

あなたのソリューションが私の望みの効果をどのように満たしているかを実証するためにコードを修正してください。 – thepaperescape

design.google.comにあるリップルエフェクト

答えて

関連する問題