WEBサイトに表示されている画像やボタンをクリックすると、エフェクトが発生するとおしゃれですよね。
今回は、画像をクリックすると、水面に波紋が広がるような効果を追加することができる
jQueryプラグイン「Rippleria」を使用してみました。
Rippleriaファイルのダウンロード
rippleria HP
はじめに下記サイトからファイルをダウンロードします。
http://nsept.github.io/rippleria/
ダウンロードするとファイルがいくつか含まれていますが、必要なファイルは
- jquery.rippleria.min.css
- jquery.rippleria.min.js
の2ファイルです。
※ファイル名に「.min」があるものとないものがありますが、機能としての違いはありません。 「.min」付きのファイルは必要最低限の改行やスペースになっているため、ファイルサイズが少なくなっています。
FTPなどで2つのファイルをサーバーにアップロードします。
function.phpを編集する
サーバーにアップロードしたCSSファイルはwp_enqueue_style()関数、JavaScriptファイルはwp_enqueue_script()関数を使ってfunctions.phpに読み込みます。
以下のコードを子テーマのfunction.phpに追加します。
function add_files(){ wp_enqueue_style('rippleriacss',get_stylesheet_directory_uri().'/css/jquery.rippleria.css'); wp_enqueue_script('rippleriajs',get_stylesheet_directory_uri().'/js/jquery.rippleria.min.js'); } add_action('wp_enqueue_scripts', 'add_files');
function.phpを編集する時に気を付けること
私が編集でつまづいた箇所ややった方がいいことを箇条書きでまとめてみました。
- 編集ミスがあるとWordPressの管理画面が表示されなくなるので、必ずバックアップをとりましょう!
- <?php ?>で囲まれているコードをfunction.phpにコピペで追加するときは、<?php ?>の部分は削除してから追加します。
- ファイルまでのパスを関数を使って取得する場合は、
親テーマはget_template_directory_uri()、 子テーマはget_stylesheet_directory_uri()を使います。
bodyの閉じタグ前にスクリプトを追加
下記のスクリプトをbodyの閉じタグ前に記述します。
$('#rippleria').rippleria({ // aniamtion speed duration: 750, // custom easing effect easing: 'ease-in' }); $('#rippleria').click(function(e) { e.preventDefault(); var randInt = function (min, max) { var rand = min + Math.random() * (max - min) rand = Math.round(rand); return rand; }; $(this).rippleria('changeColor', 'rgba('+randInt(0,200)+','+randInt(0,200)+','+randInt(0,200)+',0.'+randInt(3,5)); });
画像をセットすれば、完了です。
<div class="sample01"> <a style="display: inline-block;" id="rippleria" href="#"> <img src="画像のURL" alt="image"> </a> </div>
画像をクリックすると、水面に波紋が広がるような効果が追加されました。
コメント