BLOG ブログ

> ブログ

CSS HTML jQuery WEBデザイン

2019.07.25

【おすすめ】水たまり風のjQueryプラグイン使い方

いやー最近猛暑日が続きますね、すっかり夏ですね！
と言うことで、夏になると夏っぽいサイトを作りたくなることがありますよね！⇦僕だけ
そこで面白いjQueryのプラグインを見つけました。

[jquery.ripples.js]水たまり風のjQuery!!

波紋のようにも見えますよね！波紋カッターァァァ
すいません、ふざけすぎました（汗）

冗談はさておき、何と言ってもこのエフェクト触るのがすごく楽しい！！

見ていても涼しげが感じられますしね。

jquery.ripples.jsはこちらから

[jquery.ripples.js] 使い方

jquery.ripples.js というプラグインです。

ダウンロードしたファイル内の「jquery.ripples.js」と「jquery.js」を読み込ませます。

HTML

⑴<head>内に以下コード記入

<link rel="stylesheet" href="hoge.css">

1	<link rel="stylesheet" href="hoge.css">

⑵</body>前に以下コード記入

<script src="jquery.js"></script>
<script src="jquery.ripples.js"></script>
<script src="hoge.js"></script>

⑶<body>内に以下コード記入

<div class="stage">

　<div class="hoge"></div>

</div>

</div>

CSS　(例なので好きに変更可能です)

.hoge{
width:1000px;
height:500px;
background: url(‘画像のパスを指定してください’) #fff;
}

.hoge{

width:1000px;

height:500px;

background: url(‘画像のパスを指定してください’) #fff;

}

JavaScript

$(function(){

let $hoge = $(‘.hoge’);

$hoge.ripples({
resolution: 400,
dropRadius: 25,
perturbance: 0.05
});
});

$(function(){

let $hoge = $(‘.hoge’);

$hoge.ripples({

resolution: 400,

dropRadius: 25,

perturbance: 0.05

});

まとめ

いかがでしたでしょうか？とっても簡単ですよね！
こんなに素敵なエフェクトなのに簡単すぎる！ありがたいです
皆さんもこの機会にjquery.ripples.jを使って素敵な作品を作ってみてはいかがでしょうか！
以上jQueryのプラグインについての記事でした。
ご覧いただきありがとうございます。

【おすすめ】ディセンダントの楽曲！これを聞けばきっとハマるはず！！

前の記事(PREV)

夏のキャッスルショー「オー！サマー・バンザイ！」を観てきた！！

次の記事(NEXT)

Twitterのタイムラインがスマホではみ出る問題

BLOG ブログ

【おすすめ】水たまり風のjQueryプラグイン使い方

[jquery.ripples.js]水たまり風のjQuery!!

[jquery.ripples.js] 使い方

HTML

⑴<head>内に以下コード記入

⑵</body>前に以下コード記入

⑶<body>内に以下コード記入

CSS　(例なので好きに変更可能です)

JavaScript

まとめ

Related Posts:

関連記事はこちら

Ranking

Category

BLOG ブログ

【おすすめ】水たまり風のjQueryプラグイン使い方

[jquery.ripples.js]水たまり風のjQuery!!

[jquery.ripples.js] 使い方

HTML

⑴<head>内に以下コード記入

⑵</body>前に以下コード記入

⑶<body>内に以下コード記入

CSS (例なので好きに変更可能です)

JavaScript

まとめ

Related Posts:

関連記事はこちら

Ranking

Category

CSS　(例なので好きに変更可能です)