Innovate ScrollStage
| 开发者 | webphilosopher |
|---|---|
| 更新时间 | 2026年9月2日 05:41 |
| PHP版本: | 7.2 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
- A built-in Studio editor (WP Admin → Innovate ScrollStage → Editor): pick an effect, tune its parameters live, preview it, and copy the recipe or export starter markup.
- Three scroll effects — Fade + Slide-in (each section fades and slides into the reading zone), Media Parallax (a section's media layer drifts at its own speed for depth), and Text Stagger (a headline assembles itself word by word, or letter by letter, as it scrolls in).
- Native tagging for your builder. Choose your builder under Settings and Innovate ScrollStage adds simple role/recipe controls, so you can turn your own containers into a scroll stage using the builder edition you already run.
- A starter template (Minimal) to drop in and edit natively.
- Universal code export that works in any builder with a raw-HTML/embed widget.
- Open the Studio editor and design an effect.
- Copy the recipe (a small JSON string).
- In your builder, tag a section as the scroll stage and paste the recipe. Innovate ScrollStage injects the data attributes at render and the runtime animates it on scroll.
- Elementor — native "Innovate ScrollStage" controls on containers/sections/columns.
- Gutenberg (block editor) — a "Innovate ScrollStage" inspector panel on Group/Columns/Cover blocks, plus a block pattern.
- WPBakery — paste the Studio's code export into a Raw HTML element, or use the "Innovate ScrollStage" fields on rows and columns.
- Any other builder with a raw-HTML/embed widget — paste the same code export.
assets/scroll-studio.js is the plain, human-readable build, and assets/scroll-studio.min.js is the same code minified for production. Both are produced by esbuild from the readable engine modules included in this plugin at app/packages/engine/. Every other script and stylesheet ships unminified, and the plugin loads no code from any remote server or CDN.
安装:
- Upload the
innovate-scrollstagefolder to/wp-content/plugins/, or install the plugin through the Plugins screen in WordPress. - Activate the plugin.
- Go to Innovate ScrollStage → Settings and select the page builder(s) you use.
- Open Innovate ScrollStage → Editor to design your first effect.
屏幕截图:
常见问题:
Do I need a paid edition of my page builder?
No. Builders differ in whether their free edition lets you put custom attributes on an element — Elementor, for instance, keeps that control in its paid tier. Innovate ScrollStage adds its own role and recipe controls instead, so they appear whichever edition you run.
What does it add to my pages?
Data attributes and marker classes, at render time only. Your content stays in native builder markup, so nothing changes about how you edit it or how search engines read it.
Will it slow down my site?
The runtime is a single small script that only initializes on pages that actually use an Innovate ScrollStage recipe, and it is event-driven — it does no work while the page is still.
Does it load anything from an external server?
No. The runtime ships with the plugin and no external script, font or service is requested.
Which browsers does it work in?
Every modern browser. The effects use standard CSS features (transforms, sticky positioning, clip-path and masks) rather than a third-party animation library.
Does it respect the "reduce motion" accessibility setting?
Yes. If a visitor's operating system is set to reduce motion, the runtime does not start any effect for them. Because no effect hides anything until it starts, those visitors simply get the page as ordinary static content — every panel visible and readable, just not animated. Clearing the setting starts the effects without needing a reload. The Studio editor itself always animates, since it is the tool you design the motion in.
Is there a paid version?
Yes, and it is entirely optional. A premium edition with five additional effects and a larger template library is sold separately by Innovate Web Development and installs alongside this one. Nothing in this plugin is locked, limited or time-restricted — everything described above is included and stays that way.
更新日志:
- Fixed: the Settings screen still listed Text Stagger among the premium effects, although it has been part of this plugin since 1.0.3. The list is now generated from what the plugin actually ships, so it cannot say otherwise again.
- Changed: the premium links now open a demo page where every effect is running on scroll, with the recipe that made each one, instead of the product home page.
- Added:
ScrollStudio.driver.refresh()— for developers whose pages change height without a scroll (a tab or accordion opening, a preview pane re-rendering). Call it and the animation re-measures immediately. Nothing else changes; the automatic refresh added in 1.0.3 still covers ordinary pages. - Compatibility: tested with WordPress 7.1.
- Added: Text Stagger is now included. Headlines assemble themselves word by word (or letter by letter) as they scroll into view, with control over direction, distance, how sequential the cascade is, and the easing curve. It was previously part of the premium edition; it is now a permanent part of this plugin, not a trial.
- Fixed: effects could keep a stale frame when the page reflowed while the visitor was not scrolling — a lazy-loaded image arriving, a web font swapping in, an accordion opening, or returning to a background tab. Animation state now updates on those changes too, instead of waiting for the next scroll.
- Fixed: the accessibility fix released in 1.0.1 could fail to reach sites upgrading from 1.0.0. The script version attached to the runtime had not been updated, so browser and page caches kept serving the previous file. If you installed 1.0.1 and reduced motion still animated, this release corrects it.
- Accessibility: the runtime now honours the operating system's "reduce motion" setting. Visitors who have asked for reduced motion get the page as static, fully readable content — no scroll animation, and nothing hidden.
- Fixed: the "Open the Editor" button and link on the Settings screen pointed at an out-of-date menu slug, so clicking either returned "you are not allowed to access this page". Both now open the Editor.
- Added: a Premium effects section in the Studio listing what the separately sold premium edition adds. Every entry is a link to that product page — nothing in this plugin is locked, and no licence check exists anywhere in it.
- Added: screenshots and a paid-version FAQ entry.
- Initial WordPress.org release: Studio editor, two scroll effects, Elementor / Gutenberg / WPBakery tagging, Minimal starter template, universal code export.