Title: CanvaMotion for Elementor
Author: Abdullah Sharaf
Published: <strong>3 می 2026</strong>
Last modified: 3 می 2026

---

جستجوی افزونه‌ها

![](https://ps.w.org/canvamotion-for-elementor/assets/banner-772x250.png?rev=3521654)

![](https://ps.w.org/canvamotion-for-elementor/assets/icon-256x256.png?rev=3521654)

# CanvaMotion for Elementor

 توسط [Abdullah Sharaf](https://profiles.wordpress.org/as8495/)

[دانلود](https://downloads.wordpress.org/plugin/canvamotion-for-elementor.1.0.1.zip)

 * [جزئیات](https://fa.wordpress.org/plugins/canvamotion-for-elementor/#description)
 * [نقد و بررسی‌ها](https://fa.wordpress.org/plugins/canvamotion-for-elementor/#reviews)
 *  [نصب](https://fa.wordpress.org/plugins/canvamotion-for-elementor/#installation)
 * [توسعه](https://fa.wordpress.org/plugins/canvamotion-for-elementor/#developers)

 [پشتیبانی](https://wordpress.org/support/plugin/canvamotion-for-elementor/)

## توضیحات

CanvaMotion adds a new “Animated Background” capability to any Elementor Container
or legacy Section element. It renders lightweight, GPU-friendly particle animations
using the HTML5 Canvas 2D API and plain JavaScript — no external libraries, no iframes,
no coding required.

**Three animation types**

 * **Neural Network** — Floating nodes connected by a glowing line web. Mouse repels
   nodes away from the cursor.
 * **Particle Field** — Glowing particles that drift and pulse in brightness. Mouse
   attracts particles magnetically toward the cursor.
 * **Constellation** — Sparse twinkling stars joined by dashed lines. Mouse exerts
   gentle gravity pulling nearby stars closer.

**What you can control per container**

 * Enable / disable animation with a single toggle
 * Choose animation type from a dropdown
 * Set dot colour, line colour, and optional canvas background colour
 * Adjust dot count (10–200), dot size (1–10 px), speed (0.1–5×), and mouse influence
   radius (50–400 px)
 * Live preview inside the Elementor editor — no page reload required

**Performance**

 * Animations pause automatically when scrolled out of the viewport (IntersectionObserver)
 * Canvas resizes automatically with the container (ResizeObserver)
 * JavaScript loads in the footer — zero render-blocking
 * No external HTTP requests at runtime
 * Canvas uses `pointer-events: none` — all content inside the container stays fully
   clickable

**Compatibility**

 * Works with modern Elementor Containers and legacy Section elements
 * Requires Elementor (free) — no Elementor Pro needed

## نصب

 1. Upload the `canvamotion-for-elementor` folder to `/wp-content/plugins/`, or install
    via **WP Admin  Plugins  Add New  Upload Plugin**.
 2. Activate the plugin through the **Plugins** menu in WordPress.
 3. Elementor (free) must be installed and active — an admin notice will appear if 
    it is not.

**How to use**

 1. Open any page in the Elementor editor.
 2. Click a **Container** (or Section) element to select it.
 3. Go to the **Style** tab (half-circle icon) in the left panel.
 4. Scroll down to **Animated Background** and expand it.
 5. Toggle **Enable Animated Background** to **Yes**.
 6. Choose an animation type and adjust colours, dot count, size, speed, and mouse 
    radius.

## سوالات متداول

### Does this work with legacy Section elements?

Yes. The plugin supports both modern Elementor Containers and legacy Section elements.

### Will the animation block clicks on content inside the container?

No. The canvas element uses `pointer-events: none`, so all buttons, links, and other
content inside the container remain fully interactive.

### Does it slow down my page?

No. Animations pause automatically when the container leaves the viewport. JavaScript
is loaded in the footer (non-blocking) and makes no external HTTP requests at runtime.
For best performance, keep dot count between 40–80.

### Does it work without Elementor?

No. Elementor (free) must be installed and active.

### Does it use jQuery or any external library?

No. The plugin uses vanilla JavaScript (ES6+) only.

### Is Elementor Pro required?

No. The free version of Elementor is all you need.

## نقد و بررسی‌ها

نقد و بررسی‌ای برای این افزونه یافت نشد.

## توسعه دهندگان و همکاران

“CanvaMotion for Elementor” نرم افزار متن باز است. افراد زیر در این افزونه مشارکت
کرده‌اند.

مشارکت کنندگان

 *   [ Abdullah Sharaf ](https://profiles.wordpress.org/as8495/)

[ترجمه “CanvaMotion for Elementor” به زبان شما.](https://translate.wordpress.org/projects/wp-plugins/canvamotion-for-elementor)

### علاقه‌ مند به توسعه هستید؟

[Browse the code](https://plugins.trac.wordpress.org/browser/canvamotion-for-elementor/),
check out the [SVN repository](https://plugins.svn.wordpress.org/canvamotion-for-elementor/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/canvamotion-for-elementor/)
by [RSS](https://plugins.trac.wordpress.org/log/canvamotion-for-elementor/?limit=100&mode=stop_on_copy&format=rss).

## گزارش تغییرات

#### 1.0.1

 * Fix: IntersectionObserver was not disconnected on Elementor re-renders, causing
   ghost animation loops to accumulate.
 * Fix: Frontend assets (CSS + JS) no longer load on every page — only on pages 
   built with Elementor.
 * Fix: plugins_loaded hook priority raised to 20 to prevent a false “Elementor 
   missing” admin notice when Elementor loads after this plugin.
 * Fix: Container resize now proportionally rescales particle positions instead 
   of resetting all particles to random locations.
 * Perf: Line colour parsed once per populate() and cached; eliminates ~60 redundant
   object allocations per second.
 * Code: Each particle node now holds its own copy of the colour object instead 
   of a shared reference.

#### 1.0.0

 * Initial release.
 * Three animation types: Neural Network, Particle Field, Constellation.
 * Eight configurable controls per container element.
 * Live preview inside the Elementor editor.
 * IntersectionObserver for off-screen pause, ResizeObserver for responsive canvas.

## اطلاعات

 *  نگارش **1.0.1**
 *  Last updated **7 روز پیش**
 *  نصب‌های فعال **کمتر از 10**
 *  نگارش وردپرس ** 6.0 یا بالاتر **
 *  Tested up to **6.9.4**
 *  نگارش PHP ** 7.4 یا بالاتر **
 *  زبان
 * [English (US)](https://wordpress.org/plugins/canvamotion-for-elementor/)
 * Tags
 * [animation](https://fa.wordpress.org/plugins/tags/animation/)[background](https://fa.wordpress.org/plugins/tags/background/)
   [canvas](https://fa.wordpress.org/plugins/tags/canvas/)[elementor](https://fa.wordpress.org/plugins/tags/elementor/)
   [particles](https://fa.wordpress.org/plugins/tags/particles/)
 *  [نمایش پیشرفته](https://fa.wordpress.org/plugins/canvamotion-for-elementor/advanced/)

## امتیازها

هنوز هیچ نقدی ارسال نشده است.

[Your review](https://wordpress.org/support/plugin/canvamotion-for-elementor/reviews/#new-post)

[مشاهده همه بررسی‌ها](https://wordpress.org/support/plugin/canvamotion-for-elementor/reviews/)

## مشارکت کنندگان

 *   [ Abdullah Sharaf ](https://profiles.wordpress.org/as8495/)

## پشتیبانی

چیزی برای گفتن دارید؟ نیاز به کمک دارید؟

 [مشاهده انجمن پشتیبانی](https://wordpress.org/support/plugin/canvamotion-for-elementor/)