Linux 软件免费装

在这里免费安装WordPress以及其他软件

Banner图

CMXR — Canvas Motion Backgrounds

开发者 expoxr
更新时间 2026年7月8日 23:29
PHP版本: 7.4 及以上
WordPress版本: 7.0
版权: GPL-2.0-or-later
版权网址: 版权信息

标签

elementor animation background shapes canvas

下载

1.0.1

详情介绍:

Canvas Motion Background Made Easy. CMXR lets you build and manage animated canvas motion backgrounds directly from the WordPress admin. Compose moving shapes — orbs, blobs, and multi-ring forms — that render on an HTML5 canvas, sit behind your page content, and are driven by a tiny vanilla-JS engine with zero frontend dependencies. Key features:

安装:

From ZIP
  1. Download the plugin ZIP
  2. Go to Plugins > Add New > Upload Plugin
  3. Upload the ZIP and click Install Now
  4. Activate the plugin
Manual
  1. Extract the cmxr-canvas-motion-backgrounds folder
  2. Upload it to /wp-content/plugins/
  3. Go to Plugins and activate CMXR
Usage
  1. Go to CMXR > New Animation in the WordPress admin
  2. Add shapes, configure colors, animation types, and sizes
  3. Note the Animation ID (e.g., hero-bg)
  4. Add that ID as a CSS ID on any element in your page
  5. The animation renders automatically as the element's background

屏幕截图:

  • New Animation Dashboard
  • Settings Page
  • New Animation — different shapes
  • Different color styling for shapes
  • Different color animation styling for shapes
  • Different shapes with easy blur, opacity, size, and position controls
  • Different shape animation styles

升级注意事项:

1.0.1 Fixes admin footer layout overlap and removes obsolete pre-release migration code. No manual upgrade steps required. 1.0.0 Initial release — no upgrade steps required.

常见问题:

Does this require Elementor?

No. CMXR works with any theme or page builder. Add the CSS ID to any HTML element or Elementor section.

How do I control which shape appears on top?

Drag shapes in the configurator's left sidebar. The shape at the top of the list renders above all others. The layer badge (number) shows each shape's stacking order.

How do I attach an animation to an Elementor section?

In Elementor, open the section settings → Advanced tab → CSS ID field. Enter the Animation ID shown in the configurator or dashboard.

Why is the animation not showing?

  1. Verify the Animation ID is set in the configurator
  2. Confirm the animation is set to Active on the dashboard
  3. Confirm the CSS ID on your element exactly matches the Animation ID (case-sensitive)
  4. Check the Debug page (CMXR > Debug) for registered animations and asset URLs

Can I have multiple animations on one page?

Yes. Each animation targets a unique CSS ID. Add as many as you need.

Does it affect page performance?

The engine pauses automatically when the animated element is scrolled off-screen. It also respects the browser's prefers-reduced-motion setting and caps the device pixel ratio (configurable in Settings) to control canvas resolution on HiDPI displays.

Is there a limit on shapes per animation?

Up to 20 shapes per animation.

更新日志:

1.0.1 1.0.0