トップページにパーティクルエフェクト(Particle Effects)という、粒子(パーティクル)のアニメーション(エフェクト)を使っているサイトがあります。(上記画像のようなやつ参照)
私も以前、こういうのを使いたいと考えていたことがあるのですが、これをサイトに設置するには、JavaScriptの設定が必要であったことや、Adobe AEでパーティクルエフェクトを作成する必要があったため、大変だと思い諦めていました。
しかし最近、Themifyビルダーを使えば、パーティカルエフェクトを簡単に実装できることがわかったので、その方法をシェアします。
パーティクルエフェクトとは?
パーティクルエフェクトとは、粒子(パーティクル)を動かすことで、近未来的な雰囲気や宇宙空間のような雰囲気、火の粉の演出をしたりすることができるエフェクトです。
一般的には、Adobe After Effects(Adobe AE)を使って作成するか、市販されているエフェクトを購入する必要があります。
しかし、今回紹介する方法は、Vincent Garreau(ビンセントガロー氏)が公開し、無料で使えるパーティクルエフェクト利用します。
粒子(default)の他にも、NASA、Bubble、Snow、NyanCatというエフェクトを作成できます。
パーティクルエフェクトのカスタマイズ実験
しかし、今回紹介する方法は、Vincent Garreau(ビンセントガロー氏)が公開し、無料で使えるパーティクルエフェクト利用します。
粒子(default)の他にも、NASA、Bubble、Snow、NyanCatというエフェクトを作成できます。
私自身パーティクルエフェクトについて詳しい訳ではなため、どんなことができるのか?を実験するために、いろいろ触ってみました。
もしかしたら、どれも一度は見たことがあるかもしれないですね。
上記の動画では、どんなカスタマイズができるのか?を実験していますので、興味がある方はチェックしてみてください。

私も「あのサイトがこのエフェクトを使っていたのか!」という発見がありました。
パーティクルエフェクトをカスタマイズする
では早速パーティクルエフェクトをカスタマイズしていきます。
今回は簡単なカスタマイズだけを行います。
まず、https://vincentgarreau.com/particles.js/にアクセスして、右側のOpene Controlsをクリックしカスタマイズメニューを開きます。
ちなみに今回は、デフォルトの粒子デザインを利用したいので、dedfaultのままカスマイズしますが、BubbleやNyan Catなどを使いたい場合は、最初にdefaultをクリックて任意の
エフェクトを選択しましょう。
背景色を変える
まず、これから加える変更がわかりやすくなるように、背景色を変更します。
page gackground(css)をクリックし、background-colorを赤から黒に変更します。
背景が黒で白色の粒子(パーティクル)の動きがはっきり見えるようになります。
ちなみにThemifyテーマの場合、このページで設定した背景色は適用されないので、何色に設定しても大丈夫です。
Particlesの色を変える
ではいよいよこれからカスタマイズをしていきます。
Particles → colorクリックし、Value(single string)を開きます。デフォルトでは#ffffffの”白色”が設定されています。
Themifyテーマを使っていて、サイトの背景色が白色になっている場合は、パーティクルエフェクトが同色で見えなくなるので、白以外の色を設定してください。
今回はピンク色を設定します。
Particlesの大きさを変える
Particlesのタブの中にあるsizeをクリックし、valueの値を変更します。デフォルトでは3が設定されています。
Valueの値を変更することで、粒子(パーティクル)の大きさが変動します。今回は8に変更します。
線の色を変える
Particlesタブのline_linkedをクリックし、colorを変更します。デフォルトでは#ffffffの白色が設定されています。
ここもValueと同様に、WEBサイトの背景色が白色になっている場合は、同じ白同士でエフェクトが見えなくなるので、白以外の色に設定してください。
ここもピンクを設定します。
検出方法を変える(Themify テーマの場合)
次に、Themifyテーマを利用している場合の設定として、検出方法を変えます。
Themifyテーマの場合この設定を行わないと、マウスホバーやマウスクリックの動作が無効にされてしまうので、忘れずに行いましょう。
interactivityタブをクリックし、detect_onをcanvasからwindowに変更します。
はい、パーティクルエフェクトの設定はこれでOKです。
実際に利用する際には、もっと細かくいろいろ設定できるので、好みや目的に合うように自由にカスタマイズしてください。
カスタマイズしたParticlesファイルをダウンロードする
ここまでカスタマイズした内容をダウンロードします。
Controlsメニューの一番下にあるDownlolad Current config(json)をクリックし、ファイルをダウンロードします。
ちなみに、ダウンロードせずにしばらく放置しておくと、ページの再読み込みが必要になり、カスタマイズした内容がリセットされてしまうので、先にダウンロードしておくことをおすすめします。
パーティクルエフェクトのカスタマイズ実験
しかし、今回紹介する方法は、Vincent Garreau(ビンセントガロー氏)が公開し、無料で使えるパーティクルエフェクト利用します。
粒子(default)の他にも、NASA、Bubble、Snow、NyanCatというエフェクトを作成できます。
パーティクルをサイトに設置する
次は、パーティクルエフェクトを設置するページを作成していきます。
新規固定ページを作成
Themifyテーマを利用しているワードプレスにログインし、”固定ページ”か”投稿”から、パーティクルを設置するページを作成します。
ちなみに、既存のページに追加することもできますが、同じ方法で設置できるので、今回は新規固定ページを使って紹介します。
パーティクルエフェクトを読み込む準備
まず、タイトルとテキストコンテンツを設置します。(テキストコンテンツはなくても大丈夫です。)
次に、Rowの紫の丸部分にマウスカーソルを合わせて、歯車マークからRowオプションを開きます。
・Row HeightをデフォルトからFull Heightに変更
今回はテキストコンテンツが1行なので、Rowの高さをFull Heightにしましたが、テキストなどのコンテンツの高さがある程度確保できるのであれば、Row Heightの設定はしなくても大丈夫です。
・CSS Classにparticles-jsと入力
これを入力することによって、Rowのコンテンツ内にパーティクルエフェクトを読み込みます。
既存のページでもCss ClassにParticles-jsと入力すれば、パーティクルエフェクトを読み込むことができます。
※この時点ではまだ、ダウンロードしたパーティクルエフェクトをワードプレスサイトにアップロードしていないので、エフェクトは表示されません。
固定ページの緒設定
下の方にあるThemify Custom PanelのPage Optionsで、Sidebar OptionをNo sidebarに設定、Content WidthをFullwidthに設定します。
これによって、サイドメニューなし&横画面いっぱいにコンテンツが表示されるようになりました。
これで、パーティクルエフェクトを設置するページの準備はOKです。このページを保存します。
次に、ダウンロードしたパーティクルスクリプトを、ワードプレスサイトに追加します。
スクリプト用のコードをコピペする
ダッシュボードから、Themify Ultora → Thmify Settingsをクリックします。
Themifyの設定メニューが表示されるので、Gernal タブのFooter Codeをクリックし、次のコードをコピペします。
<script src="//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
let particles_config =
window.addEventListener( 'load', function() {
document.querySelectorAll( '.themify_builder_row.particles-js' ).forEach( function( el, i ) {
const container = document.createElement( 'div' );
container.id = 'tf_particles_' + i;
container.className = 'tf_abs tf_w tf_h';
el.prepend( container );
particlesJS( 'tf_particles_' + i, particles_config );
} );
} );
</script>
パーティクルコードをコピペする
次に、ダウンロードしたパーティクルファイルを開き、ファイルの内容をすべてコピーします。
コピーしたものを、先ほど貼り付けたコードの三行目あたりにある、let particles_config = の後に貼り付けます。
そしてSAVEをクリックし、設定した内容を保存します。
これで、パーティクルエフェトが読み込まれるようになりました。
では、正しく、設置されているかを、作成したページを開いて確認して見ましょう。
もし、正しく動作していない場合は、コードのコピペミスか、detect_onをWindowに変更し忘れかが考えられますのでもう一度確認してみてください。
パーティクルを設置する際の注意点
パーティクルエフェクトをWordPressサイトに設置する際には、いくつかの注意点や留意点がありますので紹介します。
モバイルアクセスはホバー機能が無効
ホバー機能っていうのは、今の設定ですと、粒子がマウスカーソルを避けるように動く機能のことです。(他にも違う動作をさせることができます)
パーティクルエフェクトは、スマホなどのモバイル端末からアクセスすると、そのマウスホバー機能が無効になります。
もし、「それでは困る」と思う方は、別の方法を調べるか、制作会社に開発を依頼するなどしてください。
尚、画面をタップすることでマウスクリックと同じ効果が現れます。マウスホバーのみ機能しないと感じです。
コンテンツの高さが必要
今回紹介した方法で設置するパーティクルエフェクトは、コンテンツの高さがある程度ないとエフェクトが見えにくくなります。
ですから、今回作成したサンプルの文章は1行だけでしたので、今回はRow OptionsでRow HeightをFull Heightに設定し高さを作りました。
しかし実際に設置する際には、文章量を増やすかコンテンツを増やせば、Row Optionsで設定を変えなくても大丈夫です。
すべてのページで読み込まれる
今回紹介した方法はThemify settingsのFooter Codeにパーティクルコードを記載したため、すべてのページでそのコードが読み込まれるようになります。
ページ毎にパーティクルの呼び出しする必要があるため、呼び出しをしなければ、画面上には問題ないです。
しかし、毎回パーティクルコードを読み込ませることになるので、ページの読み込みスピードにほんのちょっとだけ影響が出ます。
まぁ、気にならない人は気にならないと思いますけど。
まとめ
Themifyサイトにパーティクルエフェクトの設置方法を紹介しました。
この方法であれば、重要なファイルに触ることなくパーティクルエフェクトを設置できるので、初心者の方でも安心して挑戦できるのでオススメです。
何も知らない人からすると、このパーティクルエフェクトが設置してあるだけで、最新技術やテクノロジーに強そうって感じてしまうので、不思議ですよね?

サイトに広告も設置せずに、完全無料で公開しているなんてVincent Garreau氏は神ですね!
まだThemifyを入手していないという方はこれを機会に是非