jQuery Ripples
WebGLによる波紋の演出 DEMO
背景画像に波紋をつくる 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の３つについて、それぞれ以下のソースをコピー＆ペーストしてお試しください。
ローカルブラウズ( 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は摂動(波紋が生み出すブレ)を意味します。