內容簡介
ITmaroon Back Anime 是一款為 Gutenberg 區塊添加裝飾性背景動畫的外掛，專為現代佈景主題和網站編輯器設計，提供動態且吸引人的內容展示。
【主要功能】
• 提供粒子背景區塊與波浪背景區塊
• 支援桌面與行動裝置的響應式設定
• 無需外部 CDN，性能優化加載
• 不收集個人數據，保護隱私
• 包含可讀的 TypeScript 原始碼
外掛標籤
開發者團隊
原文外掛簡介
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
Install the shared development packages in the WordPress wp-content directory:
npm install –save-dev @wordpress/scripts typescript
npm install itmar-block-packages
Install this plugin’s dependencies in the plugin directory:
npm install
Run the TypeScript type check and production build:
npm run typecheck
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
block-class-package on GitHub
block-class-package on Packagist
itmar-block-packages on npm
itmar-block-packages on GitHub
