1
/
5
This page is intended for users in Singapore. Go to the page for users in United States.

波紋エフェクトを簡単に付けられるjQueryプラグインの『Ripples』



利用するのはjQueryプラグインの『Ripples』です。

読み込みからはじめよう

まずは「jQuery」を読み込みます。

そして、Githubから「jquery.ripples-min.js」をダウンロードしてきて読み込みます。


「jquery.ripples-min.js」は下記のGithubのURLからダウンロードができます↓

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


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="jquery.ripples-min.js"></script>


もしくは、下記のCDNで読み込んでください。

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>


エフェクトを入れる要素を追加

次にHTML側で波紋のエフェクトを加える要素を作ります。

<div class="area"></div>

Ripplesの設定をする

次はRipplesの設定をしていきますが、

難しい設定は無く、こちらの1行でOKです。

$(.area).ripples();

オプションの設定

Ripplesの設定が終われば、あとは関数にオプションを設定していくだけという、

なんとまあ、ありがたいプラグインになっております。


オプションは公式ドキュメントのREADMEを参照していただければと思います。

いくつか、波紋の大きさや広がる速度など、

重要なオプションの設定をしてみたコードがコチラになります。

$('.area').ripples({
dropRadius: 20, //波紋の大きさ
resolution: 500, //波紋の広がり速度
perturbance: 0.5 //波紋のブレ
});

プレビュー画面上をクリックしたり、マウスを動かしたりすると、

水面で波紋が広がるようなエフェクトがかかるのではないでしょうか。

オプションを触ってみる

最後に下記のように少しオプションをいじってみます。

$('.area').ripples({
dropRadius: 10, //波紋の大きさ
resolution: 600, //波紋の広がり速度
perturbance: 0.001 //波紋のブレ
});

波紋を小さくして、広がり速度を上げ、ブレを少し抑えるとどうなるでしょうか。


少し小刻みな波紋になりました。アメンボが水面をスイスイと動くのを彷彿とさせます。

最後に

波紋の調節の仕方によって、いろいろな使い方ができると思います。

全体的にエフェクトをかけるも良し、部分的な演出としてかけるも良しです。


雨や水面・海など使いどころは限られると思いますが、

簡単に波紋のエフェクトが実装できるので是非、使ってみてください。


ところで…ロジカルスタジオではフロントエンドエンジニアを募集しております。

一緒に新しい波を作っていきませんか?コチラからご応募お待ちしております↓


フロントエンドエンジニア
即戦力募集!最新技術を追い求めるフロントエンドエンジニアをWanted!
ロジカルスタジオは、テクノロジーとデザインの視点からクライアントの課題解決をめざす、大阪のクリエイティブプロダクションです。 クライアントの期待を超えて「もっと良くなる、を見つける」のが私たちのスタイル。企画・提案からデザイン制作・システム構築、運用、改善提案をワンストップで行えるのが一番の強みです。近年ではその実績と品質が評価され、案件も急増しています。 代表の古川が掲げる企業理念は「絆を大切に、周りの人を豊かにし、社会に貢献する」。 私たちはこのミッションを推進するため、「新しい技術へのチャレンジ精神」を軸に、「切磋琢磨する仲間」と「働きやすい職場環境」を整え、「成長と可能性を大切にする風土」を育ててきました。 2019年9月に増床し、外部向けのセミナーにも活用できるカンファレンスルームを拡充。スタッフによる公式ブログや、マスコットキャラクター「ロージー&カール」によるTwitterなど、情報発信も強化しています。 可能性の芽をすくい上げられるこの場所を、より大きくしていきたい。 私たちと一緒に、このビジョンを実現しませんか。
株式会社ロジカルスタジオ
株式会社ロジカルスタジオ's job postings
10 Likes
10 Likes

Weekly ranking

Show other rankings
If this story triggered your interest, go ahead and visit them to learn more