![見出し画像](https://assets.st-note.com/production/uploads/images/109650587/rectangle_large_type_2_0761a8a254c4dd738860754d49aacac2.jpeg?width=1200)
【SWELL】particles.jsで背景に固定アニメーションを設定する方法
11月24日更新
最新バージョンのSWELL(2.8.1)に対応させました。
WordPressテーマSWELLの背景にparticles.jsでワチャワチャと動くアニメーションを実装した作業メモです。
![](https://assets.st-note.com/img/1700811375748-iJBcLkBf76.jpg?width=1200)
![](https://assets.st-note.com/img/1700811383823-dLmaHT9psh.jpg?width=1200)
サンプルサイト
particles.jsをSWELLに実装したサンプルサイトです。
解説用により構成がシンプルなサンプルを作ってみました↓
![【SWELL】particles.jsを背景に設定したサンプル](https://assets.st-note.com/img/1688342908975-2xQivc6mp8.jpg?width=1200)
トップページだけでなく、ページごとに異なるアニメーションを付けています。
→雪チックなアニメーションを上から下になアニメーションを実装したサンプル
サンプルサイトの構成
【バージョン】
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コード内の各種オプション解説みたいなものは含みません。
ここから先は
¥ 7,980
この記事が気に入ったらサポートをしてみませんか?