画像に波紋を追加できる jQuery Rippleriaとは

for featured image jQuery
2020.10.12

WEBサイトに表示されている画像やボタンをクリックすると、エフェクトが発生するとおしゃれですよね。

今回は、画像をクリックすると、水面に波紋が広がるような効果を追加することができる
jQueryプラグイン「Rippleria」を使用してみました。

Rippleriaファイルのダウンロード

rippleria_HP

rippleria HP

はじめに下記サイトからファイルをダウンロードします。
http://nsept.github.io/rippleria/

ダウンロードするとファイルがいくつか含まれていますが、必要なファイルは

  • jquery.rippleria.min.css
  • jquery.rippleria.min.js

の2ファイルです。


※ファイル名に「.min」があるものとないものがありますが、機能としての違いはありません。 「.min」付きのファイルは必要最低限の改行やスペースになっているため、ファイルサイズが少なくなっています。

FTPなどで２つのファイルをサーバーにアップロードします。


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>


画像をクリックすると、水面に波紋が広がるような効果が追加されました。

image
image

コメント