波紋エフェクトプラグイン「jquery.ripples」

2018/09/04 サイト制作 投稿者:前原

今回は波紋エフェクトプラグイン「jquery.ripples」をご紹介します。
「jquery.ripples」は画像を水面のようにして、マウスホバーやクリックに合わせ波紋が広がるようなエフェクトをかけるプラグインです。
DEMOはこちら
(スマホには基本対応していませんのでお気を付けください。※当方のiOSではクリックだけは反応しました。)

jquery.ripplesの使い方

jquery.ripplesの使い方についてご説明します。

HTML

まずbody内に画像を表示させる場所を用意してあげます。

div要素のidにdemoと名付けました。

CSS

要素のbackgroundに波紋エフェクトをかけたい画像を指定します。
この時忘れずに要素自体のサイズも指定してあげましょう。
(backgroundなのでサイズを確保しないと描画されません。)

今回は画面いっぱいに画像を表示させました。

js

続いて公式GitHubから、プラグインをダウンロードしてきて解凍します。
公式GitHub
使うのは「jquery.ripples-min.js」です。
jquery.js本体と一緒に読み込みます。

その後で、要素にjquery.ripplesを設定するscriptを書きます。

これで動くはずです。

Chromeブラウザのローカルプレビューだと、何故か波紋が控えめになる不具合がありましたので、
波紋の大きさなどの調整を行う際は、他のブラウザでも確認してみてください。

ちなみにbackgroundに複数画像を設定すると表示がおかしくなりますので、
:before、:after疑似要素を使って指定を分けるなど、background画像は1要素に1枚にしましょう。

コードまとめ

カスタマイズ

オプションをいじってみます。
速度を速く、波紋は小さく、揺れの量を大きく、変更してみました。

オプションDEMO
小雨が降ったような波紋になりました。
工夫次第で様々な演出が出来ると思います。色々試してみてください。

まとめ

上手くできたでしょうか?
揺れる水面は癒し効果がありますね。ずっと眺めていたくなります。
このプラグインを効果的に使えばワンランクおしゃれなサイトが出来そうです。
手軽に実装できるので積極的に使っていきたいものです。

Windows 7 の延長サポート終了まで

days
4
2
4
hours
1
5
minutes
0
8
seconds
2
8

Office 2010 の延長サポート終了まで

days
6
9
7
hours
1
5
minutes
0
8
seconds
2
8

カレンダー

   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
   1234
567891011
12131415161718
19202122232425
262728    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)