jQuery Creat Animation

jQueryで簡単に水面に広がる波紋を作る

Ripples
さて、今回はマウスポインタを動かすと水面に波紋が広がる、とっても幻想的なアニメーションを簡単にjQueryにて制作してみたいと思います。ちょうどこのページにも小さなイメージにて波紋を施していますが、画面一面に波紋を動かすと、もっとダイナミックで美しく幻想的です。DEMOページを制作しましたので、画面いっぱいでのRipplesを確認したい方は、下記DEMO1をご確認願います。
→DEMO1

まずは下記URLよりプラグインをダウンロードをします。
https://github.com/sirxemic/jquery.ripples/→ダウンロードしてください。
ダウンロードしたファイルを開き、「dist」ファイルから「jquery.ripples-min.js」を読み込みます。この時、「dist」ファイルはindexファイルと同じところに置き、読み込むようにしてください。また、各スクリプトはhead内、もしくは</body>直前に記述してください。1ページ内に他のjQueryも一緒に置かれている場合、head内の記述では動かない場合があります。
[script]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.ripples-min.js"></script>
今回はページ全体に水面波紋を適用していますので、CSSにてbodyにてバックグラウンドイメージを設定します。
[CSS]
body {
background: url(../img/Galaxy_1.png) no-repeat center center; /*イメージURLはご自分の好きな画像を設定してください。*/
background-color: #000000;/*背景色*/
background-size: cover;/*coverを設定することによって、表示領域全体を覆うように設定します。*/
margin: 0;
color: #FFFFFF; 
	}
次に水面の動きや速さを設定します。速さや大きさは一度試してみて、好きな感じの動きをご自身で探していただくこととなります。初期設定をhead内、又は</body>直前にて下記のように設定します。
[script]
<script>
$(document).ready(function() {
$('body').ripples({ //波紋をつけたい要素の指定
resolution: 700, //波紋の広がりの速度(値が大きいほど遅くなる。)
dropRadius: 10, //波紋の大きさ(値が大きいほど大きくなる。)
perturbance: 0.1 //波紋による屈折量(値が大きいほどブレる。)
 });
});
</script>
テスト的に表示したいものであれば、CSSの記述は表示したい高さの設定(height)のみとなります。今回DEMO1での制作内容は説明を追加させたかったので、content要素を制作し、高さを600pxにて設定しています。高さ設定は要素を何も持たせない場合body内でも設定することも出来ます。
[CSS3]
.content{
margin: auto;
background-color: rgb(0,0,0,0.5);
width: 50%;
height: 600px;
}
如何でしょうか?美しい波紋は動きましたか?もし上手く動かない場合はDEMO1の全体HTML、CSSコードを下記に記述しておきますので、コピペしてご利用ください。
注意!)バックヤードのイメージ画像は必ずご自分の好きなものをダウンロードし、イメージファイルを作ってURLを指定してください。ここに設定しているファイルURLはダミーです。
[DEMO1 CSS3全体コード]

@charset "utf-8";
/* CSS Document */

body {
      background: url(../img/Galaxy_1.png) no-repeat center center; 
	  background-color: #000000;
	  background-size: cover;
	  margin: 0;
	  color: #FFFFFF;
	 
	}
	
a{
    color: #FFFFFF;
	text-decoration: none;
	
	}

.content{
    margin: auto;
    background-color: rgb(0,0,0,0.5);
	width: 50%;
	height: 600px;
	}
    
h1{
     padding-top: 100px;
     text-align: center;
	 }

.p_1{
     padding:2% 5%;
	 }

.back{
     margin:5% 0 0 5%;
	 display: inline-block;
     padding: 0.3em 1em;
     text-decoration: none;
     color: #ffffff;
     border: solid 2px #ffffff;
     border-radius: 3px;
     transition: .4s; 
     }
	 
.back:hover {
    background: #cccccc;
    color: #000000;
}

#footer{
    background-color: #000000;
	text-align: center;
	width: 100%;
	margin: 0;
	height: 50px;
	}
	
[DEMO1 HTML/script全体コード]

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BLACK SHIVA SAMPLE</title>
<link rel="stylesheet" href="css/sample_all.css">
<link href="https://fonts.googleapis.com/css?family=Marcellus+SC" rel="stylesheet"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.ripples-min.js"></script>
<!--初期設定-->
<script>
	$(document).ready(function() {
		$('body').ripples({ //波紋をつけたい要素の指定
			resolution: 700, //波紋の広がりの速度(値が大きいほど遅くなる。)
			dropRadius: 10, //波紋の大きさ(値が大きいほど大きくなる。)
			perturbance: 0.1 //波紋による屈折量(値が大きいほどブレる。)
		});
	});
</script>
</head>
<body>
<div class="content">
<h1>Ripples of water Demo1</h1>
<hr>
<p class="p_1">Ripples of water Demo1では、body全体を指定することで、画面上のすべてに波紋が動きます。全体的に波紋が広がるので、出来るだけ「resolution」(波紋が広がる速度)を遅くしてのご利用をお勧めします。ゆっくりであればあるほど、美しい波紋が出来上がります。<br>又、ブロックごと、またはセクションごとに波紋アニメーションを付けたい場合は対象にするクラス名、又はブロック名を変更する必要があります。Ripples of water Demo2を参照にして下さい。</p>
<div class="back">
<a href="index.html" target="_blank">1ページ前に戻る</a>
</div>
<div class="back">
<a href="https://black-shiva.com/artwork/link_p/artwork_3.html" target="_blank">バックヤードの素材をBLACK SHIVAでダウンロードする。</a>
</div>
</div>

<div id="footer"><a href="index.html">BLACK SHIVA@YAMAMOTO STUDIO(Ripples of water Demo1)</a></footer>

</div>
</body>
</html>

さてここで追記ですが、この波紋は勿論範囲を指定することができます。初期設定時に$('body').ripples({ //波紋をつけたい要素の指定というものがありました。この$('body')を指定したい要素に変更するだけでOK!感じがつかめない方はDEMO2をご覧ください。

DEMO2

このDEMO2に関しては$('.content')に要素変更をして、指定された範囲のみに波紋を適用しています。
コードはDEMO1とほとんど変わりません。是非、BLACK SHIVAの無料壁紙を使ってチャレンジテーマとして制作してみてください。
CSSメニューページに戻る