<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous">
</script>
<script src="http://localhost:10072/wp-content/uploads/demos/_assets/raindrops.js">
</script>
<style>@charset "utf-8";
/*========= レイアウトのためのCSS ===============*/
#wrapper {
height: 100vh;
/*テキストを中央寄せ*/
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: #00704a;
}
a,
p {
color: #fff;
}</style>
</head>
<body>
<body>
<div id="wrapper">
<p>※使用したライブラリ<br>
<a href="https://daniellaharel.com/raindrops/" target="_blank">https://daniellaharel.com/raindrops/</a>
</p>
<!--/wrapper-->
</div>
<script>jQuery("#wrapper").raindrops(
//指定したエリアに描画
{
color: "#7b5544", //コーヒーの色を指定
canvasHeight: 450, //canvasの高さを指定。初期値は親の高さの50%。
waveLength: 100, //波の長さ(広がり)を指定。数値が大きいほど長さは小さくなる。初期値は340。
waveHeight: 200, //波の高さを指定。数値が大きいほど高さは高くなる。初期値は100。
rippleSpeed: 0.05, //波紋のスピードを指定。数値が大きいほど波紋は速くなる。初期値は0.1。
density: 0.04, //コーヒーの波紋の量を指定。数値が大きいほど波紋は小さくなる。初期値は0.02。
frequency: 5 //コーヒーが落ちる頻度を指定。数値が大きいほど頻度は多くなる。初期値は3。
});
//# sourceURL=pen.js</script>
</body>
</html>