見出し画像

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

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

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


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

→実物のサイトを開く


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

→実物のサイトを開く


サンプルサイト


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

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

【SWELL】particles.jsを背景に設定したサンプル
トップページ

デモサイトを開く


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

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

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





サンプルサイトの構成


【バージョン】

  • 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コード内の各種オプション解説みたいなものは含みません。


ここから先は

6,795字 / 16画像

¥ 7,980

この記事が気に入ったらサポートをしてみませんか?