【jQuery】リアルな波紋を再現するプラグイン「jQuery Ripple」

【jQuery】リアルな波紋を再現するプラグイン「jQuery Ripple」

Webデザイン

2015/01/30　 2019/04/16

bodyや要素ごとに設定できるリアルな波紋を表現する面白いエフェクトです。エフェクトを指定した要素の背景は少しぼかしが入った画像等を使用すると効果的です。

jquery.ripples

Githubに公開されてますのでjquery.ripples.jsをダウンロードしてください。

sirxemic/jquery.ripples

使い方はjqueryとダウンロードした「jquery.ripples.js」を読み込ませます。

Java File

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.ripples.js"></script>

jsではエフェクトを適応させたいクラスなどを設定して完成です。

Java

$('.クラス').ripples({
    resolution: 512,
    dropRadius: 20,
    perturbance: 0.04,
});

＼ Webデザインに関するお役立ち情報を定期的に配信中／

Follow @webclips_jp

POPULAR POSTS

【2022年版】無料で使えるフリーイラスト素材サイト41選（商用利用可）
【2022年版】漢字が使える日本語フリーフォント93選
フォントを調べる時に役に立つツール・サイト10選
無料で使える日本語・英語のかわいいフリーフォント20選
【2022年版】 Google Fontsの使い方とおすすめ日本語フォント
【2022年版】無料で使えるフリー画像・写真素材サイト27選（国内/海外）

前のページ

次のページ