jQuery Creat Animation
jQueryで簡単に水面に広がる波紋を作る
Ripples
→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')に要素変更をして、指定された範囲のみに波紋を適用しています。
