現象
ripples-jsを利用してサイト１のように波紋のエフェクトを実装したいが
ローカルで実装するとサイト２のように波紋が小さくなってしまう。
サイト１
https://black-shiva.com/css3_technique/animation/ripples/
サイト２
https://logical-studio.com/develop/web/20201120-jquery-ripples/
原因
ripples-jsのソースコードを詳しく見たわけではないので詳細な原因はわかりませんが、
ブラウザの開発者ツールにCross originのエラーが出力されているので恐らく
ripples-jsの内部の画像を読み込んでいる箇所に問題があるかと思います。
（※画像を読み込んでcanvasタグを作成してそれで描画しているような気がするので、cross origin担ったときはそのcanvasタグが生成されていないように見えました）
ネットを探してみると同じような現象が発生している人を発見。
（こちらは解決まで至っていませんが。）
ご参考
https://gomiryo.com/徒然草2-0/ripples-jsの波紋が弱いなんで？/
解決方法
エラーにcross originが表示されているので同ドメインから実行するようにしてやれば解決するかと思います。
実際に以下の条件で波紋を大きくすることができました。
・画像をhttps～で他ドメインの画像リソースを指定せずにローカル（同ドメイン内）に置く。
・WEBサーバ上から実行する
以下にそのhtmlのソースコードを記載してますが、その中に★コメントで注意点を書いていますので参考にしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- ★ripplesが中で画像読み込みを行ってる（多分get requestとかなげてる）のでサーバ上で実行する -->
<script src="jquery.ripples-min.js"></script>
<meta charset="UTF-8">
<title>HTML5サンプル</title>
<style>
body {
/* ★ここをhttp://～のようにインターネットから指定しない */
background: url(./img/Light4.jpg) no-repeat center center;
background-color: #000000;
background-size: cover;
margin: 0;
color: #FFFFFF;
}
.content{
margin: auto;
background-color: rgb(0,0,0,0.8);
width: 50%;
height: 600px;
}
</style>
<script>
$(document).ready(function() {
$('body').ripples({ //波紋をつけたい要素の指定
resolution: 700, //波紋の広がりの速度（値が大きいほど遅くなる）
dropRadius: 10, //波紋の大きさ（値が大きいほどでかくなる）
perturbance: 0.1 //波紋による屈折量（値が大きいほどブレる）
});
});
</script>
</head>
<body>
<div class="content">
<h1>サンプル</h1>
</div>
</body>
</html>作成したサンプルを以下のURLに配置しておきます。
https://kobe-systemdesign.work/ripples_sample/sample.html
※例えば上記のhtml一式をnode.jsのhttp-serverというライブラリ使用してローカルサーバを立ち上げて確認すればローカル環境でも確認が可能です。
コメント