Title: ITmaroon Back Anime
Author: Isamu Takeda
Published: <strong>2026 年 8 月 25 日</strong>
Last modified: 2026 年 8 月 25 日

---

搜尋外掛

![](https://ps.w.org/itmaroon-back-anime/assets/banner-772x250.png?rev=3664558)

![](https://ps.w.org/itmaroon-back-anime/assets/icon-256x256.gif?rev=3685783)

# ITmaroon Back Anime

 由 [Isamu Takeda](https://profiles.wordpress.org/itmaroon/) 開發

[下載](https://downloads.wordpress.org/plugin/itmaroon-back-anime.1.0.1.zip)

 * [詳細資料](https://tw.wordpress.org/plugins/itmaroon-back-anime/#description)
 * [使用者評論](https://tw.wordpress.org/plugins/itmaroon-back-anime/#reviews)
 *  [安裝方式](https://tw.wordpress.org/plugins/itmaroon-back-anime/#installation)
 * [開發資訊](https://tw.wordpress.org/plugins/itmaroon-back-anime/#developers)

 [技術支援](https://wordpress.org/support/plugin/itmaroon-back-anime/)

## 外掛說明

ITmaroon Back Anime is a collection of Gutenberg blocks that add decorative background
animations to your content.
 This plugin is designed for modern block themes and
the Site Editor. It has been tested with WordPress 7.0.4.

Included blocks (current version):
 * Particle Background Block (tsParticles v3)*
Wave Background Block (Canvas-based wave animation)

Performance-minded loading:
 * Front-end scripts are registered through block.json
and loaded only when the block exists on the page (viewScript). * No runtime CDN
is required for animation libraries.

tsParticles (v3) integration:
 * The Particle Background Block is powered by tsParticles
v3 and uses the following npm packages which are bundled into the plugin build: –@
tsparticles/engine (^3.9.1) – @tsparticles/slim (^3.9.1) – @tsparticles/shape-image(
^3.9.1) – @tsparticles/pjs (^3.9.1) – itmar-block-packages * The slim bundle is 
used for smaller footprint while keeping common particle features. * Particle options
are generated in a tsParticles v3 compatible format (not legacy particles.js format).

Mobile / Desktop responsive settings:
 * The Wave Background Block supports separate
values for desktop and mobile (e.g., wave height and wave sizes). * In the editor,
the responsive preview switches based on viewport size. * On the front-end, the 
responsive behavior is applied using a screen-width check (matchMedia) to mirror
the editor logic.

Privacy:
 * This plugin does not collect personal data. * This plugin does not send
data to external services.

### Development / Source Code

The human-readable TypeScript source code and build configuration are included with
this plugin and are also available in the public GitHub repository:
 https://github.
com/itmaroon/itmaroon-back-anime

This project is developed in a shared npm environment. Common development packages,
including @wordpress/scripts, TypeScript, and itmar-block-packages, are installed
in the wp-content directory and resolved from wp-content/node_modules by each plugin.

#### Build

 1. Install the shared development packages in the WordPress wp-content directory:
 2. npm install –save-dev @wordpress/scripts typescript
 3. npm install itmar-block-packages
 4. Install this plugin’s dependencies in the plugin directory:
 5. npm install
 6. Run the TypeScript type check and production build:
 7. npm run typecheck
 8. npm run build

This plugin includes built assets generated from npm dependencies.
 The Particle
Background Block uses tsParticles v3 packages: * @tsparticles/engine (^3.9.1) * @
tsparticles/slim (^3.9.1) * @tsparticles/shape-image (^3.9.1) * @tsparticles/pjs(
^3.9.1) * itmar-block-packages

#### Development dependencies and source code

 * [ITmaroon Back Anime on GitHub](https://github.com/itmaroon/itmaroon-back-anime)
 * [block-class-package on GitHub](https://github.com/itmaroon/block-class-package)
 * [block-class-package on Packagist](https://packagist.org/packages/itmar/block-class-package)
 * [itmar-block-packages on npm](https://www.npmjs.com/package/itmar-block-packages)
 * [itmar-block-packages on GitHub](https://github.com/itmaroon/itmar-block-packages)

## 螢幕擷圖

[⌊Particle Background Block - example (Geometric patterns and waves)⌉⌊Particle Background
Block - example (Geometric patterns and waves)⌉[

Particle Background Block – example (Geometric patterns and waves)

[⌊Particle Background Block - example (Bubbles and Waves)⌉⌊Particle Background Block-
example (Bubbles and Waves)⌉[

Particle Background Block – example (Bubbles and Waves)

[⌊Particle Background Block - example (Snow falling)⌉⌊Particle Background Block -
example (Snow falling)⌉[

Particle Background Block – example (Snow falling)

[⌊Particle Background Block - example (A flurry of falling blossoms)⌉⌊Particle Background
Block - example (A flurry of falling blossoms)⌉[

Particle Background Block – example (A flurry of falling blossoms)

[⌊Particle Background Block - settings panel⌉⌊Particle Background Block - settings
panel⌉[

Particle Background Block – settings panel

[⌊Wave Background Block - settings panel⌉⌊Wave Background Block - settings panel⌉[

Wave Background Block – settings panel

## 適用於區塊編輯器

這個外掛提供 2 個可供區塊編輯器使用的區塊。

 *   Falling
 *   Wave

## 安裝方式

 1. Upload the plugin folder to the /wp-content/plugins/ directory, or install it through
    the WordPress Plugins screen.
 2. Activate the plugin through the ‘Plugins’ screen in WordPress.
 3. In the block editor or Site Editor, search for the “Falling” or “Wave” block and
    insert it into your layout.
 4. Adjust animation settings in the block sidebar (Inspector).

Notes: * Background animation blocks are typically used inside containers (e.g.,
Group/Cover/Section-like blocks) to decorate content behind other blocks. * For 
best results, ensure the parent/container block has a visible area (height/spacing)
where the animation should appear.

## 常見問題集

### Does this plugin load external scripts (CDN)?

No. The animation library for particles is bundled in the plugin build via npm packages(@
tsparticles/engine, @tsparticles/slim, @tsparticles/shape-image, @tsparticles/pjs).

Front-end scripts are loaded only when the relevant block is present on the page.

### Will the scripts run on pages that do not use these blocks?

No. Front-end scripts are registered via block.json viewScript and are loaded only
when the block is rendered on the page.

### Is this plugin compatible with the Site Editor (Full Site Editing)?

Yes. The blocks are intended to work in both the post editor and the Site Editor.

### How does mobile support work for the Wave block?

The Wave block supports separate desktop/mobile values (e.g., wave height and wave
sizes).
 In the editor, the preview switches by viewport size. On the front-end,
the plugin applies a screen-width based selection so mobile devices can use different
values than desktop.

### Does this plugin affect accessibility?

The canvas animations are decorative backgrounds. Canvas elements are output with
aria-hidden=”true” so they are not announced to assistive technologies.

## 使用者評論

這個外掛目前沒有任何使用者評論。

## 參與者及開發者

以下人員參與了開源軟體〈ITmaroon Back Anime〉的開發相關工作。

參與者

 *   [ Isamu Takeda ](https://profiles.wordpress.org/itmaroon/)

[將〈ITmaroon Back Anime〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/itmaroon-back-anime)

### 對開發相關資訊感興趣？

任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/itmaroon-back-anime/)、
查看 [SVN 存放庫](https://plugins.svn.wordpress.org/itmaroon-back-anime/)，或透過
[RSS](https://plugins.trac.wordpress.org/log/itmaroon-back-anime/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/itmaroon-back-anime/)。

## 變更記錄

#### 1.0.1

first publish

#### 0.1.0

 * Release
 * Added Particle Background Block powered by tsParticles v3
 * Added Wave Background Block with responsive desktop/mobile values
 * Front-end scripts are loaded only when blocks are present (block.json viewScript)

## 中繼資料

 *  版本 **1.0.1**
 *  最後更新 **4 週前**
 *  啟用安裝數 **少於 10 次**
 *  WordPress 版本需求 ** 6.4 或更新版本 **
 *  已測試相容的 WordPress 版本 **7.1.1**
 *  PHP 版本需求 ** 8.2 或更新版本 **
 *  語言
 * [English (US)](https://wordpress.org/plugins/itmaroon-back-anime/)
 * 標籤:
 * [animation](https://tw.wordpress.org/plugins/tags/animation/)[background](https://tw.wordpress.org/plugins/tags/background/)
   [block](https://tw.wordpress.org/plugins/tags/block/)[Particle](https://tw.wordpress.org/plugins/tags/particle/)
   [wave](https://tw.wordpress.org/plugins/tags/wave/)
 *  [進階檢視](https://tw.wordpress.org/plugins/itmaroon-back-anime/advanced/)

## 評分

這個項目尚無任何評論記錄。

[撰寫評分](https://wordpress.org/support/plugin/itmaroon-back-anime/reviews/#new-post)

[查看全部使用者評論](https://wordpress.org/support/plugin/itmaroon-back-anime/reviews/)

## 參與者

 *   [ Isamu Takeda ](https://profiles.wordpress.org/itmaroon/)

## 技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

 [檢視技術支援論壇](https://wordpress.org/support/plugin/itmaroon-back-anime/)