backgrounds]を紹介します。https://on-ze.com/demo/js-bubbly-bg/導入方法まずはGitHubにて配布されている本体ファイルをダウンロードしてきましょう。download」をクリックするとダウンロードがはじまります。ここで入手したzipファイルを解凍すると「bubbly-bg.js」というJavaScriptが展開されます。これをHTMLの適当な箇所で読み込みましょう。初期化するためのコードも同時に記述しておきます。src="bubbly-bg.js"></script><script>bubbly();</script></head>驚くべきことに、なんとコレだけで実装完了です!背景色や泡の色、ぼかし効果などを変更したい場合は次のオプション設定で細かく指定することができます。設定できる項目は以下のとおり。#fff});それぞれ次のような意味。泡の影なお「compose」で指定するのはcanvas要素のglobalCompositeOperation属性で、次の値が用意されています。source-atopsource-insource-outsource-overdestination-atopdestination-indestination-outdestination-overlighterdarkercopyxor通常は「lighter」「darker」「source-over」あたりを指定するのが一般的でしょうか。それぞれがどのように描画されるかは、言葉での説明よりも実際に1つずつ試してみて理解するのがイイと思います。jQueryなどに依存せず、単体で使えるのが嬉しいポイントです。データ容量も軽いので気軽に使えそうですね。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comTwitterFacebookFeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。Images]を紹介します。【JavaScript】ページの背景にポリゴン状の幾何学模様を描画する[particles.js]の使い方。11選WordPressの[404.php]などに設定しておくと便利な各種リダイレクトの方法。script要素[async]と[defer]を使ってパフォーマンスアップする方法。