LogoMark.png

jQuery/WebGL_Ripples の変更点

#author("2020-09-23T15:02:14+09:00;2020-09-23T15:01:29+09:00","default:inoue.ko","inoue.ko")
#author("2026-07-28T16:09:07+09:00;2026-07-28T13:58:53+09:00","default:inoue.ko","inoue.ko")
*jQuery Ripples
WebGLによる波紋の演出　[[DEMO>https://design.kyusan-u.ac.jp/SampleSite/JQ_Ripples/]]
WebGLによる波紋の演出　[[DEMO>https://design.cs.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は摂動(波紋が生み出すブレ)を意味します。
~
~