JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現

Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！

wavify

GitHub

wavifyはjQueryのプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVGコードを用意すればOK。

HTML

01
02
03
04
05
06
07
08
09
10
11
12
<body>
  コンテンツ
  ・・・
 
<!-- SVG -->
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"><path id="wave" d=""/></svg>
 
<!-- ファイルの読み込み -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
  <script src="js/jquery.wavify.js"></script>
</body>

SVGの path 要素にIDを振っておきます。

JavaScript

1
2
3
4
5
6
7
$('#wave').wavify({
  height: 60,
  bones: 3,
  amplitude: 40,
  color: '#0bd',
  speed: .25
});

path につけたIDを指定して、スピードや高さ、色をカスタマイズすればOK！

jQuery Ripples

Webサイト｜GitHub

jQuery Ripplesを使うとカーソルの動きに合わせて要素の表面を揺らし、まるで水面に波紋が広がるような表現ができます。jQueryを使っているので、jQueryのファイルとjQuery Ripplesのファイルを読み込んで準備OK！

HTML

1
2
3
4
5
6
7
8
9
<body>
  <div class="container">
    コンテンツ
    ・・・
  </div>
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/jquery.ripples-min.js"></script>
</body>

CSS

1
2
3
4
5
.container {
  height: 100vh;
  background: url(images/bg.jpg) center center;
  background-size: cover;
}

波紋をつけたい要素に背景画像を設置すると、動きがわかりやすくておすすめ。

JavaScript

1
2
3
$('.container').ripples({
    resolution: 400
});

オプションで波紋の大きさや解像度を設定できます。

bubbly-bg

Webサイト｜GitHub

bubbly-bgはとっても手軽に背景にパーティクルをふよふよ浮かばせられるスクリプト。ファイルを読み込ませてJavaScriptで bubbly(); と記述するだけでデフォルトのスタイルで実装できます。

HTML

1
2
3
4
5
6
7
<body>
  コンテンツ
  ・・・
 
  <script src="https://cdn.jsdelivr.net/npm/bubbly-bg@1.0.0/dist/bubbly-bg.js"></script>
  <script>bubbly();</script>
</body>

JavaScript

1
bubbly();


デモページでは6つのスタイルが用意されており、「Copy Config」ボタンをクリックするとJavaScriptのコードがコピーできます。カスタマイズの参考になりますね。オプションでは色やパーティクルの数、動きを調整できます。

particles.js

Webサイト｜GitHub

particles.jsもパーティクルを実装できるスクリプトですが、bubbly-bgよりもカスタマイズ性が高いです。こちらは canvas タグを使いますよ。

HTML

1
2
3
4
5
6
7
<body>
  コンテンツ
  ・・・
 
  <canvas class="background"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js"></script>
</body>

HTMLには「background」というクラスをつけた canvas タグを用意し、ファイルを読み込ませます。

CSS

1
2
3
4
5
6
7
.background {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: 0;
}

position: absolute; で絶対位置を決め、背景として画面に広げます。

JavaScript

1
2
3
4
5
window.onload = function() {
  Particles.init({
    selector: '.background'
  });
};

selector に canvas タグにつけたクラス名を指定すればOK。デフォルトだと黒いちっこい点がちまちま動いているだけなので、オプションの sizeVariations でサイズ、color でパーティクルの色をカスタマイズしましょう。オプションでは他にも、パーティクルが動くスピードやパーティクルの数などを指定できます。

パーティクル同士を線でつなげるには connectParticles: true オプションが使えます。書き方が少し変わるので注意。

JavaScript

1
2
3
4
5
6
var particles = Particles.init({
  selector: '.background',
  sizeVariations: 10,
  color: ['#00bbdd', '#404B69', '#DBEDF3'],
  connectParticles: true
});

Raindrops.js

Webサイト｜GitHub

Raindrops.jsを使えばぴちゃんぴちゃんと水面にしずくが落ちているような動きが加えられます。jQueryとjQuery UI、Raindrops.jsのファイルを読み込んでスタート。

HTML

01
02
03
04
05
06
07
08
09
10
<body>
  <div class="container">
    コンテンツ
    ・・・
  </div>
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="js/raindrops.js"></script>
</body>

水面として表示させたい要素にクラスを加えます。ここでは「container」に設定。

JavaScript

1
2
3
4
jQuery(".container").raindrops({
  color: "#0bd",
  canvasHeight: 250
});

オプションで水面の色やしずくの大きさなどが設定できます。

デザインに合わせてあれこれカスタマイズしてみてください！

シェアする

コメント

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください！もちろん無料です！ :)