Title: Hísi Anim – Scroll Animations for Elementor, Bricks & Gutenberg Author: Peter Joseph K. Roderickson Published: 2026 年 6 月 2 日 Last modified: 2026 年 6 月 3 日 --- 搜尋外掛 ![](https://ps.w.org/hisi-anim/assets/banner-772x250.png?rev=3557821) ![](https://ps.w.org/hisi-anim/assets/icon-256x256.png?rev=3557821) # Hísi Anim – Scroll Animations for Elementor, Bricks & Gutenberg 由 [Peter Joseph K. Roderickson](https://profiles.wordpress.org/peterjosephkings/) 開發 [下載](https://downloads.wordpress.org/plugin/hisi-anim.1.1.0.zip) * [詳細資料](https://tw.wordpress.org/plugins/hisi-anim/#description) * [使用者評論](https://tw.wordpress.org/plugins/hisi-anim/#reviews) * [安裝方式](https://tw.wordpress.org/plugins/hisi-anim/#installation) * [開發資訊](https://tw.wordpress.org/plugins/hisi-anim/#developers) [技術支援](https://wordpress.org/support/plugin/hisi-anim/) ## 外掛說明 **Hísi Anim** adds smooth, modern **scroll animations** to any WordPress site — without bloat, without jQuery and without writing a single line of code. Pick an effect, and your headings, images, containers and sections animate beautifully as the visitor scrolls. It is built for page builders: **Elementor** (classic and the new V4 atomic elements) and **Bricks** get native controls baked right into the editor, and **any other builder** — Gutenberg (block editor), Oxygen, Beaver Builder or your own theme — works too by simply adding a CSS class. Hísi Anim combines two complementary techniques so you get the best of both worlds: * **Entrance effects** — scroll-driven animations built on the modern CSS `animation- timeline: view()`. They progress _as you scroll_, tying the motion to the reading pace for a premium, high-end feel. * **Reveals** — triggered once when the element enters the viewport (IntersectionObserver), perfect for clean, one-shot entrances. You can even combine one Entrance effect with one Reveal on the same element and both play together, elegantly. #### Why Hísi Anim * **Truly lightweight & fast** — pure vanilla JavaScript, no jQuery and no heavy libraries. Supporting browsers load nothing extra. * **No code required** — choose effects from a dropdown in Elementor and Bricks; everywhere else, add a class. * **See it while you build** — a live preview of the selected animation right inside the editor panel, plus animations that play on the canvas. * **Accessible by default** — fully respects the visitor’s `prefers-reduced-motion` setting. * **Works everywhere** — modern CSS where supported, with an automatic polyfill for browsers like Firefox, loaded only when needed. #### Animations included **Entrance effects (scroll-driven):** Blur (vertical, left, right), Scale, Background zoom, Parallax, 3D rotate, Dim to light, Skew and Horizontal drift. **Reveals (on viewport entry):** Blur up, Scale in, 3D tilt, Drift, Line reveal and Clip-path reveals (top, right, bottom, left). #### Native Elementor controls A dedicated **Hísi Anim** section is added to every element: * **Classic widgets (Editor V3):** under the Advanced tab — entrance effect, reveal and reveal duration. * **Atomic elements (Editor V4):** under the General tab — same controls, native to the new atomic widgets. #### Native Bricks controls A **Hísi Anim** control group on every Bricks element, with its own icon in the Style tab and in the element quick-access bar — entrance effect, reveal and reveal duration. #### Any other builder (Gutenberg, Oxygen, Beaver Builder…) Add the classes to the element’s “CSS classes” field: * Base class (required): `hisi-anim` * Entrance effects: `ha--scrollBlur`, `ha--scrollBlurLeft`, `ha--scrollBlurRight`,` ha--scrollScale`, `ha--scrollZoom`, `ha--scrollParallax`, `ha--scrollRotate`,` ha--scrollDim`, `ha--scrollSkew`, `ha--scrollDriftX` * Reveals: `ha--blurUp`, `ha--scaleIn`, `ha--tiltIn`, `ha--drift`, `ha--lineReveal`,` ha--clipPathRight`, `ha--clipPathLeft`, `ha--clipPathTop`, `ha--clipPathBottom` * Reveal duration: `data-anim-time="1.2"` attribute #### Built for page builders The engine detects elements injected dynamically (MutationObserver) and includes robust fallbacks, so animations trigger reliably even when the builder re-renders the page or IntersectionObserver doesn’t fire on first paint. ### Credits This plugin bundles the scroll-timeline polyfill by Robert Flack (https://github. com/flackr/scroll-timeline), licensed under the Apache License 2.0, used to support scroll-driven animations in browsers without native `animation-timeline` support. ## 安裝方式 1. Upload the `hisi-anim` folder to `/wp-content/plugins/`, or install the ZIP from** Plugins Add New Upload Plugin**. 2. Activate the plugin through the **Plugins** screen. 3. In **Elementor** or **Bricks**, open any element and use the **Hísi Anim** controls. In other builders, add the `hisi-anim` classes to the element. ## 常見問題集 ### Does it work with Elementor? Yes — natively. You get a Hísi Anim section with effect, reveal and duration controls on both classic widgets (Editor V3) and the new atomic elements (Editor V4). ### Does it work with Bricks Builder? Yes — natively. A Hísi Anim control group is added to every Bricks element, with its own icon in the Style tab and the quick-access bar. ### Does it work with Gutenberg, Oxygen or Beaver Builder? Yes. Any builder that lets you add a CSS class to an element is supported: add ` hisi-anim` plus the effect/reveal class to the element. ### Does it require jQuery? No. Hísi Anim is pure, dependency-free JavaScript. ### Will it slow down my site? No. It is intentionally lightweight, uses modern CSS for the heavy lifting, and only loads the compatibility polyfill on browsers that need it. ### Can I preview the animation inside the editor? Yes. The Hísi Anim panel shows a live preview of the selected animation, and effects also play on the editor canvas while you build. ### Do animations work in Firefox and Safari? Yes. Scroll-driven effects use a modern CSS feature; on browsers without native support the plugin automatically loads a polyfill, while supporting browsers download nothing extra. ### Is it accessible? Yes. All animations respect the visitor’s “reduce motion” operating-system preference(` prefers-reduced-motion`). ## 使用者評論 這個外掛目前沒有任何使用者評論。 ## 參與者及開發者 以下人員參與了開源軟體〈Hísi Anim – Scroll Animations for Elementor, Bricks & Gutenberg〉 的開發相關工作。 參與者 * [ Peter Joseph K. Roderickson ](https://profiles.wordpress.org/peterjosephkings/) 〈Hísi Anim – Scroll Animations for Elementor, Bricks & Gutenberg〉外掛目前已有 1 個本地化語言版本。 感謝[全部譯者](https://translate.wordpress.org/projects/wp-plugins/hisi-anim/contributors) 為這個外掛做出的貢獻。 [將〈Hísi Anim – Scroll Animations for Elementor, Bricks & Gutenberg〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/hisi-anim) ### 對開發相關資訊感興趣？ 任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/hisi-anim/)、查看 [SVN 存放庫](https://plugins.svn.wordpress.org/hisi-anim/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/hisi-anim/?limit=100&mode=stop_on_copy&format=rss) 訂閱[開發記錄](https://plugins.trac.wordpress.org/log/hisi-anim/)。 ## 變更記錄 #### 1.1.0 * New entrance effects (scroll-driven): Parallax, 3D rotate, Dim to light, Skew and Horizontal drift. * New reveal animations: Blur up, Scale in, 3D tilt, Drift and Line reveal. * New: live preview of the selected animation inside the Elementor and Bricks panels. * New: animations now play inside the editor canvas (Elementor and Bricks) while you build. * New: grouped, labelled options in the Elementor selectors (classic and atomic). * Improvement: refined ease-out curves and full `prefers-reduced-motion` support across all effects. * Improvement: effects reorganized into Entrance (scroll-driven) and Reveal categories. * Fix (Elementor V4): the reveal-duration control no longer reports an invalid value. * Fix (Bricks): the Hísi Anim quick-access icon now opens its control group on the first click. * Fix (editors): clip-path reveals no longer leave the element hidden when it is selected. #### 1.0.0 * Initial release. * Front-end assets and animation engine (IntersectionObserver + MutationObserver, no jQuery). * Native Elementor integration (classic V3 and atomic V4). * Native Bricks integration (“Hísi Anim” control group with custom icon). * Conditional scroll-timeline polyfill for browsers without native `animation-timeline: view()`. ## 中繼資料 * 版本 **1.1.0** * 最後更新 **2 天前** * 啟用安裝數 **少於 10 次** * WordPress 版本需求 ** 5.8 或更新版本 ** * 已測試相容的 WordPress 版本 **7.0** * PHP 版本需求 ** 7.2 或更新版本 ** * 語言 * [English (US)](https://wordpress.org/plugins/hisi-anim/) 及 [Spanish (Spain)](https://es.wordpress.org/plugins/hisi-anim/). * [將這個外掛本地化為你的母語版本](https://translate.wordpress.org/projects/wp-plugins/hisi-anim) * 標籤: * [animations](https://tw.wordpress.org/plugins/tags/animations/)[bricks](https://tw.wordpress.org/plugins/tags/bricks/) [elementor](https://tw.wordpress.org/plugins/tags/elementor/)[parallax](https://tw.wordpress.org/plugins/tags/parallax/) [scroll animations](https://tw.wordpress.org/plugins/tags/scroll-animations/) * [進階檢視](https://tw.wordpress.org/plugins/hisi-anim/advanced/) ## 評分 這個項目尚無任何評論記錄。 [Your review](https://wordpress.org/support/plugin/hisi-anim/reviews/#new-post) [查看全部使用者評論](https://wordpress.org/support/plugin/hisi-anim/reviews/) ## 參與者 * [ Peter Joseph K. Roderickson ](https://profiles.wordpress.org/peterjosephkings/) ## 技術支援 使用者可在技術支援論壇提出意見反應或使用問題。 [檢視技術支援論壇](https://wordpress.org/support/plugin/hisi-anim/)