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://cn.wordpress.org/plugins/hisi-anim/#description) * [评价](https://cn.wordpress.org/plugins/hisi-anim/#reviews) * [安装](https://cn.wordpress.org/plugins/hisi-anim/#installation) * [开发进展](https://cn.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** * 最后更新：**1 天前** * 活跃安装数量 **不到10** * WordPress 版本 ** 5.8 或更高版本 ** * 已测试的最高版本为 **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://cn.wordpress.org/plugins/tags/animations/)[bricks](https://cn.wordpress.org/plugins/tags/bricks/) [elementor](https://cn.wordpress.org/plugins/tags/elementor/)[parallax](https://cn.wordpress.org/plugins/tags/parallax/) [scroll animations](https://cn.wordpress.org/plugins/tags/scroll-animations/) * [高级视图](https://cn.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/)