画面に波を起こすJavaScript-qwave.js


jqueryのlake.jsを改造して、JavaScriptだけで画面に波を起こすようにしました。
Windows7〜8.1のIE11、Chrome、Firfox、
タブレットのiOSのiPad、Android Nexcus7
とうで動くことが確認できました。
ただ、CPUの遅いパソコンでIEを使うとフリーズするかもしれません

ソース

<html>
<head>
<meta charset="shift_jis">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>qwave</title>
</head>
<body>
<script>

ur="./";           //ファイルのある場所
file="aosagi.jpg,80";//写真,縮尺率%(省略時=100)
mask="aosagi.png,1"; //マスク,透明色:0=透明処理済み/1=白を透明にする
waves = 10;        //波の数(+-で流れ方向が変わる)
speed = 0.2;       //波の速さ(小さいと準備時間がかかる)
scale = 0.3;       //波の振幅
lake  = "0,100";   //波の範囲(縦位置で上から 開始%,終了%)
          //   (範囲を狭めると準備時間が短縮できる)
</script>

<script src="http://qpon-toyota.com/jquery/wave/qwave.js" charset="shift_jis">
</script>

</body>
</html>

***.jpg
同じ写真で水面を白で塗りつぶすか 透明処理をすしpngかgifで保存

***.png

個人のサイト場合はqwave.jsを直リンクで使用して結構です。
ダウンロードする時は↑を右クリックして取り込んでください
他の揺れソース