【SWELL】particles.jsで背景に固定アニメーションを設定する方法

11月24日更新
最新バージョンのSWELL（2.8.1）に対応させました。

WordPressテーマSWELLの背景にparticles.jsでワチャワチャと動くアニメーションを実装した作業メモです。

背景にワチャワチャ動くエフェクトを入れてみたサイトです①

→実物のサイトを開く

背景にワチャワチャ動くエフェクトを入れてみたサイトです②

→実物のサイトを開く

サンプルサイト

particles.jsをSWELLに実装したサンプルサイトです。

解説用により構成がシンプルなサンプルを作ってみました↓

トップページ

→デモサイトを開く

トップページだけでなく、ページごとに異なるアニメーションを付けています。

→雪チックなアニメーションを上から下になアニメーションを実装したサンプル

→四角いブロックを横に移動させるアニメーションのサンプル

サンプルサイトの構成

【バージョン】

• WordPress：6.3

• SWELL：2.7.8.2

• particles.js：2.0.0

WordPress、テーマともに記事執筆時に利用可能な最新バージョンです。

カスタマイズの概要

PHPテンプレートファイルを一切編集しない方法です。

コード管理系のプラグインCode Snippetsプラグインを使っています（無料のやつです）。もちろん子テーマのfunctions.phpにコードを追加しても構いません。

テーマ内のheader.phpやらfooter.phpを子テーマにコピーしてコードを書き加えると、テーマのアップデート時にアップデートの内容を確認するという面倒な作業があります。

正直めんどうなので、その手のカスタマイズはしないほうが無難です。

今回のカスタマイズでは子テーマ内にparticles.js関連のファイルをアップロードしますが、header.phpやfooter.phpといったPHPテンプレートは一切編集しない方法です。

更新履歴

• 2023年11月   記事更新

• 2023年8月   記事更新

• 2023年7月　記事公開

有料記事部分では、particles.js公式サイトからダウンロードしたファイルをWordPressテーマSWELLに設置する方法をコード付きで紹介します。


「トップページだけにアニメーションを表示したい」「サイト全体を対象にしたい」。「この記事は別のアニメーションを表示したい」といった条件ごとに表示を変えるといったケースにも対応したカスタマイズです。

＜こんなことが実現できます＞

• トップページだけにアニメーションを表示する

• 全ページにアニメーションを表示する

• 記事Aにはこれ、記事Bにはこのアニメーションを表示する

※JSコード内の各種オプション解説みたいなものは含みません。