【JQuery コピペでOK!】夏ですね!波紋のようなアクションのページを作ってみよう!

最終更新日:  |  web関連, 記事一覧

どーもこんにちは、黒ブタです。

7月も中旬に差し掛かり、気温も大分上がってきました。
関東では雨の日が多く感じます。

「雨」と言って思い出しましたが、波紋のようなアクションをするJQueryがあったことを思い出した。
その名も「Ripple(波紋)」・・・そのまんまですね。
今回はそれ用のテストページを作りました。
あまり使い道はなさそうですが、水に関わるランディングページなどで使用することができそうです。
背景をうまく使えば大変綺麗なページが作れます。
デザインセンスに自信のある方は使ってみてください。

では使い方・・・・の前に、ダウンロードをしましょう

https://github.com/sirxemic/jquery.ripples

こちらのgithubで「Clone or download」でダウンロードします。
使うファイルは直下にある「jquery.ripples.js」のみです。
※試していませんが、ローカル環境では動作が確認できない可能性があります。
WindowsではXAMPP
MACではMAMP
などを入れて試してみてください

ここからコードの紹介をしていきます。
最低限必要なコードは↓


htmlコード(body)以降
※bodyのIDはなくてもいいです。

<body id="ripple">
<div id="content" class="clearfix">
</div>
</body>


jsコード
注意点はhead内に書くと作動しない可能性があるので、bodyの閉じタグ直前に書くのが良いかと思います。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="common/js/jquery.ripples.js"></script>
<script>
$(document).ready(function() {
try {
$('body').ripples({
resolution: 230,
dropRadius: 120,
perturbance: 0.2,
});
$('#content').ripples({
resolution: 512,
dropRadius: 100,
perturbance: 0.01,
});
}
catch (e) {
$('.error').show().text(e);
}
});
</script>

resolutionは反応の速さです。
perturbanceは深さです。
dropRadiusは円の大きさ?
それぞれの数値をご自身のお好みに合わせて変更してください。


cssコード
※背景はご自身のもの使ってください

body#ripple {
background:url(../img/pattern3.jpg) no-repeat;
background-size: cover;
min-height: 100%;
height:auto;
text-align: center;
}

たったこんだけで使えます。