JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現
Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！
↑私が10年以上利用している会計ソフト！
wavify
See the Pen wavify Demo by Mana (@manabox) on CodePen.
wavifyはjQueryのプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVGコードを用意すればOK。
HTML
<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
$('#wave').wavify({
height: 60,
bones: 3,
amplitude: 40,
color: '#0bd',
speed: .25
});
path につけたIDを指定して、スピードや高さ、色をカスタマイズすればOK！
jQuery Ripples
See the Pen jQuery Ripples Demo by Mana (@manabox) on CodePen.
jQuery Ripplesを使うとカーソルの動きに合わせて要素の表面を揺らし、まるで水面に波紋が広がるような表現ができます。jQueryを使っているので、jQueryのファイルとjQuery Ripplesのファイルを読み込んで準備OK！
HTML
<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
.container {
height: 100vh;
background: url(images/bg.jpg) center center;
background-size: cover;
}
波紋をつけたい要素に背景画像を設置すると、動きがわかりやすくておすすめ。
JavaScript
$('.container').ripples({
resolution: 400
});
オプションで波紋の大きさや解像度を設定できます。
bubbly-bg
See the Pen bubbly-bg.js Demo by Mana (@manabox) on CodePen.
bubbly-bgはとっても手軽に背景にパーティクルをふよふよ浮かばせられるスクリプト。ファイルを読み込ませてJavaScriptで bubbly(); と記述するだけでデフォルトのスタイルで実装できます。
HTML
<body> コンテンツ ・・・ <script src="https://cdn.jsdelivr.net/npm/bubbly-bg@1.0.0/dist/bubbly-bg.js"></script> <script>bubbly();</script> </body>
JavaScript
bubbly();
デモページでは6つのスタイルが用意されており、「Copy Config」ボタンをクリックするとJavaScriptのコードがコピーできます。カスタマイズの参考になりますね。オプションでは色やパーティクルの数、動きを調整できます。
particles.js
See the Pen Particle.js Demo by Mana (@manabox) on CodePen.
particles.jsもパーティクルを実装できるスクリプトですが、bubbly-bgよりもカスタマイズ性が高いです。こちらは canvas タグを使いますよ。
HTML
<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
.background {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 0;
}
position: absolute; で絶対位置を決め、背景として画面に広げます。
JavaScript
window.onload = function() {
Particles.init({
selector: '.background'
});
};
selector に canvas タグにつけたクラス名を指定すればOK。デフォルトだと黒いちっこい点がちまちま動いているだけなので、オプションの sizeVariations でサイズ、color でパーティクルの色をカスタマイズしましょう。オプションでは他にも、パーティクルが動くスピードやパーティクルの数などを指定できます。
See the Pen Particle.js w/ Line Demo by Mana (@manabox) on CodePen.
パーティクル同士を線でつなげるには connectParticles: true オプションが使えます。書き方が少し変わるので注意。
JavaScript
var particles = Particles.init({
selector: '.background',
sizeVariations: 10,
color: ['#00bbdd', '#404B69', '#DBEDF3'],
connectParticles: true
});
Raindrops.js
See the Pen Raindrops.js Demo by Mana (@manabox) on CodePen.
Raindrops.jsを使えばぴちゃんぴちゃんと水面にしずくが落ちているような動きが加えられます。jQueryとjQuery UI、Raindrops.jsのファイルを読み込んでスタート。
HTML
<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
jQuery(".container").raindrops({
color: "#0bd",
canvasHeight: 250
});
オプションで水面の色やしずくの大きさなどが設定できます。
デザインに合わせてあれこれカスタマイズしてみてください！
