記事の詳細
【コピペでOK!】WordPressを使用してクリック位置から波紋が広がるようなエフェクトをjQueryで実装する方法
今回は「WordPressを使用してクリック位置から波紋が広がるようなエフェクトを実装する方法」を記載します。
具体的には下記のような機能になります。
※各枠内をクリックしてみてください。
参考サイト様は下記になります。
https://qiita.com/nekoneko-wanwan/items/c9f26ce049bd422e555c
参考サイト様は非常に親切に書いてあるので、ほぼ実装するだけになるのですが、WodPressでjQueryを使った機能を実装する際には、”$”によるコンフリクトを回避しなければなりません。
「そんなの技術者じゃないと分からないよ!」ということにならないように、コピペだけでいけるように編集したコードを記載します。
今回のブログの見出しはコチラです!
CSS(スタイルシート)に波紋用のスタイルを設定する
スタイルシート(”XXXX.css”のファイル。WordPressの場合は基本的に”style.css”に記載します。)に下記スタイルを追記します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
/* クリックできる要素 */ .ripple { /* エフェクトに直接関係はない */ margin: 20px; background-color: #f7f7f7; height: 100px; width: 200px; text-align: center; line-height: 100px; cursor: pointer; /* 必須 */ overflow: hidden; position: relative; } /* エフェクト要素 */ .ripple__effect { /* 値の変更はエフェクト形体・サイズ・スピードに影響する */ width: 150px; height: 150px; /* 必須 */ position: absolute; border-radius: 100%; pointer-events: none; transform: scale(0); opacity: 0; } /* エフェクト要素の色を指定 */ .ripple__effect.is-orange { background: #f1c40f;} .ripple__effect.is-blue { background: #4aa3df;} .ripple__effect.is-black { background: #999;} /* classが付与されたらアニメーションを実行 */ .ripple__effect.is-show { animation: ripple 0.75s ease-out; } /* アニメーションの定義 */ @keyframes ripple { from { opacity: 1; } to { transform: scale(2); opacity: 0; } } |
これでスタイルシートの設定は完了になります。
次に、記事にプログラムのコードを埋め込みます。
記事にHTMLタグとjQueryのコードを仕込む
WordPressの固定ページや投稿ページ内に下記のコードを仕込みます。
※このとき、ビジュアルエディタではなくテキストエディタでコードを打ち込むことに注意して下さい。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<div class="ripple"> オレンジ <span class="ripple__effect is-orange"></span> </div> <div class="ripple"> ブルー <span class="ripple__effect is-blue"></span> </div> <div class="ripple"> ブラック <span class="ripple__effect is-black"></span> </div> <script> jQuery(function($) { $(function() { var $clickable = $('.ripple'); /* mousedownだと直ぐに発動し、clickだとマウスボタンを離した時に発動する */ $clickable.on('mousedown', function(e) { var _self = this; var x = e.offsetX; var y = e.offsetY; var $effect = $(_self).find('.ripple__effect'); var w = $effect.width(); var h = $effect.height(); /* クリックした座標を中心とする */ $effect.css({ left: x - w / 2, top: y - h / 2 }); /* jsではclassの付け替えをするだけ */ if (!$effect.hasClass('is-show')) { $effect.addClass('is-show'); /* * エフェクトアニメーションが終わったらclassを削除する * ここでは、単純にcssで設定するdurationと時間を合わせているだけですが * keyframes終了のイベント(AnimationEnd)が取れるかと思うので、それで対応した方が良いかも */ setTimeout(function() { $effect.removeClass('is-show'); }, 750); } return false; }); }); }); </script> |
WordPressでは”$”の記述は既に別の機能で使われているため、”$”を使用する場合は”jQuery(function($)”としてスクリプトを囲うことで、囲った中の”$”だけはjQueryとして機能させる必要があります。
これで仕込みは全て完了になります、非常に簡単に機能が実装できますね!
覚えておいて損はない!jQueryのコンフリクト解消の記述方法!
いかがでしたか?
以前の私はWordPressでjQueryを使用する際には”$”を全て”jQuery”に置換をして設置していました。
ですが、コードが非常に見づらくなることと、他のシステムで使う際にまた置換をしたりと、せっかく作ったプログラムなのに汎用性がイマイチで悩んでいました。
ローカル内でのjQueryの使用方法を覚えてからはコンフリクトに悩むこともなくなり、すっきりとしたプログラムが書けるようになりました。
プログラマーさんは可読性や汎用性を気にする方が多いと思いますので、この辺りはしっかりと作りこんでいきたいですね。
ではまた!
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。