jQuery「Ripples」でつまずいたこと

2024年9月16日 20:05

jQuery「Ripples」はGitHubで公開中のsirxemic様のスクリプトです

わたしが作成中のWebサイトにて「body: background-image:url(〜);」に波紋を適用させるまでにつまずいたことを3点ほど書いていきます。

https://sirxemic.github.io/jquery.ripples/ ←Ripplesの参考事例サイト
https://github.com/sirxemic/jquery.ripples/ ←ソース

①jQueryが久々すぎてCDNの存在を忘れてた

大前提当たり前ですが、jQueryを用いたいときはCDNか、ソースをDLして持ってこなきゃいけないんでした。シンプルに忘れていました。
jQuery自体はCDNを用います。（用途に応じて最新を使ってください）
Ripplesは配布のjs（冒頭のソースリンクから）をDLしてHTMLと同階層に「js」フォルダの作成、その中にDLした「jquery.ripples-min.js」ファイルを入れます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./js/jquery.ripples-min.js"></script>

②画像が揺れていない、波紋がサンプルと違ってちゃちい

実装できた〜！と喜んでサイトを見てみると、なんか、画像の上に線が円状にでるだけです。CSSでも組めそうな単純さ…
わたしが見たsirxemic様のサイトとは大違いで、半日悩まされました。

上下の違い、明白ですよね。
当初実装したときは上のように画像とは関係なく、うす〜い波紋っぽい線が出るのみでした。
いろいろ試す上で、どうやらローカルの相対パスの画像リンクが原因っぽいとわかりました。
下のような波紋を出すためには、どうやらネット上にアップロードされている画像を絶対パスで配置すると失敗しなさそうです。

おそらくですが、Ripplesは画像を揺らすような動きをcanvasで行なっているため、ローカル環境にある画像にセキュリティ上アクセスできず、画像に干渉せず波紋の線のみのエフェクトが出たのではないかと思われます。

③別の場所の画像が消えたんだが？

<style>
    body {
        background-image: url('〜');
        background-size: cover;
    }
</style>

<script>
    $('body').ripples({
        resolution: 400,
        dropRadius: 10,
        perturbance: 0.04,
        interactive: false
    });
</script>

Ripplesを適用させたい画像をbodyの背景画像に設定していました。
なのでRipplesのセレクタもbodyに設定していました。

これで上手くいっていたのですが、別のページにも適用させた瞬間、SVGでClip-pathしていた画像が消えてしまいました…

直接な原因はわかりませんが、jQueryのRipplesを読み込ませた場合のみ画像が消えることを確認したので、なにかしら相性が悪いのだと思います。

<body>
    <!-- クリップパス用SVG -->

    <svg width="0" height="0">
        <clipPath id="clip01">
            <path d="m〜Z"/>
        </clipPath>
    </svg>


    <!-- 実際の表示用SVG -->

    <svg viewBox="0 0 0 0">
        <image xlink:href="./img/image.png" clip-path="url(#clip01)"/>
    </svg>
</body>

上記のように、Ripplesを適用させているbodyの中にsvgのClip-pathを置いていたので、Ripplesの方を移動させることにしました。

<div id="ripple-background">
    <!-- クリップパス用SVG -->
    <svg width="0" height="0">
        <clipPath id="clip01">
            <path d="m〜Z"/>
        </clipPath>
    </svg>

    <!-- 実際の表示用SVG -->
    <svg viewBox="0 0 0 0">
        <image xlink:href="./img/image.png" clip-path="url(#clip01)"/>
    </svg>
</div>


<style>
    #ripple-background {
        height: 100vh;
        position: absolute;
        background-image: url('〜');
        background-size: cover;
    }
</style>


<script>
    $('#ripple-background').ripples({
        resolution: 400,
        dropRadius: 10,
        perturbance: 0.04,
        interactive: false
    });
</script>

Ripplesを適用させるセレクタをbodyから、新たに作成したdivに変更しています。
それにともなってJavaScriptのセレクタも変更しています。

これで直面した問題は全て解決しました。
下記、まとめです。

まとめ

jQueryを使うときはCDNを忘れない（①参照）
使用するスクリプトもDLしてjsフォルダに入れる（①参照）
Ripplesはローカルの画像にはアクセスできない場合がある（②参照）
ローカル環境の相対パスで画像の指定をせず、絶対パスでネット上にある画像を用いる（わたしは一旦、X:旧Twitterにあげてリンクしました）（②参照）
Ripplesを適用した要素の子要素にSVGのClip-pathを用いている場合はClop-path内の画像が消える）（③参照）
Ripplesを適用するのは小さい範囲だけにして、子要素に影響が出ないようにする）（③参照）

おまけ

jQuery「Ripples」めちゃくちゃすてきなスクリプトですが、該当サイトのタブがバックグラウンド状態のまま、他のタブを開いていると…
該当サイトに戻ったとき、その間蓄積された時間分の波紋が一気に表示されます。
なんとも、イメージが変わると言うか…

解決のためには、バックグラウンド状態では波紋の生成を一時的に停止させ、タブに戻った時にリセットさせます。

具体的なコード↓

let rippleInterval;

function startRipples() {
    rippleInterval = setInterval(function() {
        let $el = $('#your-element'); // 波紋を表示する要素を指定
        let x = Math.random() * $el.outerWidth();
        let y = Math.random() * $el.outerHeight();
        $el.ripples('drop', x, y, 20, 0.04); // 波紋の大きさや強さを調整
    }, 2000); // 2秒に1回波紋を生成
}

function stopRipples() {
    clearInterval(rippleInterval);
}

// ページの表示状態を監視する
document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'visible') {
        // タブがアクティブに戻ったら波紋の生成を再開
        startRipples();
    } else {
        // タブがバックグラウンドになったら波紋の生成を停止
        stopRipples();
    }
});

// ページが最初にロードされたときに波紋を生成開始
startRipples();

よかったらお役立てください！

この記事が気に入ったらサポートをしてみませんか？