#author("2020-09-23T15:02:14+09:00;2020-09-23T15:01:29+09:00","default:inoue.ko","inoue.ko")
*jQuery Ripples
WebGLによる波紋の演出 [[DEMO>https://design.kyusan-u.ac.jp/SampleSite/JQ_Ripples/]]
~
背景画像に波紋をつくる jQuery WebGL Ripples の導入方法を紹介します。
~
***準備
-1）ファイルセットのダウンロード
https://sirxemic.github.io/jquery.ripples/ からDLして下さい。
その中で必要なのは '' jquery.ripples-min.js'' のみです。
あと、当然ですが ''jQuery'' が必要です。
-2） 構成ファイルの確認
--index.html （動作確認用）
--css（フォルダ）/ ''style.css''
--js （フォルダ）/ jquery-xxxxx.min.js jquery.ripples-min.js ''sample.js''
--images（フォルダ）/ sample.jpg
-3) index.html、style.css,、sample.jsの３つについて、それぞれ以下のソースをコピー＆ペーストしてお試しください。
&color(red){ローカルブラウズ( file:// )では正常動作しない場合があります。Webサーバーにアップして( http:// ) 動作確認して下さい。};
~
***HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="js/jquery-xxxxx.min.js"></script>
<script src="js/jquery.ripples-min.js"></script>
<script src="js/sample.js"></script>
<link href="css/style.css" rel="stylesheet">
<title>jQuery Ripples</title>
</head>
<body>
<main>
<h1>Sample Page</h1>
<p>jQuery WebGL Ripples</p>
</main>
</body>
</html>
~
***CSS
要点のみ記載しています
html {
height: 100%;
}
body {
display: flex;
background-image: url(../images/sample01.jpg);
background-size: cover;
height: 100%;
}
main {
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -250px;
background-image: url(../images/sample02.jpg);
background-size:cover;
width: 500px;
padding-top: 200px;
height: 300px;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
line-height: 180%;
}
-bodyの中央にmainが配置されるようにしています。
-body と main それぞれに、背景画像を設定しています。
~
***JavaScript
$(function() {
$('body').ripples({
resolution: 512,
dropRadius: 20, //px
perturbance: 0.04,
interactive: false,
});
$('main').ripples({
resolution: 256,
dropRadius: 20, //px
perturbance: 0.04,
});
});
setInterval(function() {
var $obj = $('body');
var x = Math.random() * $obj.outerWidth();
var y = Math.random() * $obj.outerHeight();
var dropRadius = 20;
var strength = 0.03 + Math.random() * 0.05;
$obj.ripples('drop', x, y, dropRadius, strength);
}, 400);
~
-前半は、body と main に波紋のパラメータを設定しています。
bodyは反応しませんが、中央 main 領域は、マウスオーバーやクリックに対応して波紋をインタラクティブに発生させます。
-後半は、body に一定時間ごとに波紋を発生させるための記述です。
-resolution は波紋の解像度で、数値が大きいほど滑らかになります。
-Radius は半径、perturbanceは摂動(波紋が生み出すブレ)を意味します。
~
~
