GENE Scroll Hero Pro
Get Pro購入

Documentationドキュメント

A quick guide to installing and using GENE Scroll Hero Pro. Need a hand? Contact support.GENE Scroll Hero Pro のインストールと使い方ガイド。お困りですか？ サポートへ。

1. Install the free plugin無料版をインストール

Everyone starts with the free plugin from WordPress.org — there’s no separate download. In Plugins → Add New, search for “GENE Scroll Hero”, then click Install and Activate (or get it from WordPress.org). Requires WordPress 6.4+ and PHP 7.4+.まずは WordPress.org の無料版から始めます（別途ダウンロードは不要です）。プラグイン → 新規追加で「GENE Scroll Hero」を検索し、インストール・有効化します（またはWordPress.org から入手）。WordPress 6.4+ / PHP 7.4+ が必要です。

2. Unlock Pro (optional)Pro を解放（任意）

Bought a Pro license? You don’t install anything new — the same plugin you already have unlocks in place. After purchase, open the plugin’s Account page and enter your license key. That turns on the Pro features (multiple swapping headlines and fine scroll control) on the plugin you installed from WordPress.org.Pro ライセンスを購入した場合も、新しくインストールするものはありません。今入れているプラグインがそのまま解放されます。購入後、プラグインのアカウントページでライセンスキーを入力してください。WordPress.org から入れた同じプラグイン上で Pro 機能（スクロールで次々入れ替わる複数見出し・スクロール長の微調整）が有効になります。

3. Add the Scroll Hero blockScroll Hero ブロックを追加

In any post or page, open the inserter and look under the “GENE Motion” category for Scroll Hero. Insert it and configure it in the right-hand sidebar. The editor shows a calm, static preview; the scroll and playback run on the front end only.任意の投稿・固定ページでインサーターを開き、「GENE Motion」カテゴリの「Scroll Hero」を挿入。右サイドバーで設定します。エディタ内は静止プレビューで、スクロール再生はフロントでのみ動きます。

4. Settings設定

Smooth video: scrubbing only lands on keyframes, so export a short clip with every frame as a keyframe — for example ffmpeg -i in.mp4 -an -vf "fps=24,scale=1280:-2,format=yuv420p" -c:v libx264 -preset slow -crf 28 -g 1 -movflags +faststart out.mp4.滑らかな動画: スクラブはキーフレームにしか飛べないため、全フレームをキーフレーム化した短いクリップを書き出してください。例: ffmpeg -i in.mp4 -an -vf "fps=24,scale=1280:-2,format=yuv420p" -c:v libx264 -preset slow -crf 28 -g 1 -movflags +faststart out.mp4。

5. Accessibility & fallbacksアクセシビリティとフォールバック

The hero respects the visitor’s “reduce motion” setting and falls back to a clean looping-video hero with the headline shown. The same fallback applies with no JavaScript, or inside a theme whose layout would break a pinned section — it never leaves a broken pin, and the page never gains a sideways scrollbar. There is no scroll hijacking: the page scrolls normally and the video follows along.ヒーローは訪問者の「視差効果を減らす」設定を尊重し、見出しを表示したままループ動画ヒーローにフォールバックします。JavaScript 無効や、ピンを壊すレイアウトのテーマでも同じフォールバックが効き、崩れたピンは残さず、横スクロールバーも出ません。スクロールジャックもなく、ページは普通にスクロールし動画が追従します。

6. Performance & librariesパフォーマンスとライブラリ

No jQuery, no GSAP, no ScrollTrigger. Nothing loads from a third-party CDN. The hero’s small script and styles load only on the pages that actually use it, so the rest of your site stays light.jQuery も GSAP も ScrollTrigger も不使用で、外部CDNから一切読み込みません。各ブロックの小さなスクリプトとCSSは、実際に使ったページだけで読み込まれるので、サイトの他の部分は軽いままです。

7. Themesテーマ

Works with any block-aware WordPress theme. These are native blocks in the standard editor, so no page builder is required. Deactivate the plugin and your content stays; the motion simply stops.ブロック対応のどの WordPress テーマでも動作します。標準エディタの素のブロックなので、ページビルダーは不要です。プラグインを停止しても中身は残り、演出が止まるだけです。

8. Billing & license課金とライセンス

Plans are billed yearly and purchased directly (no trial) — try it first with the free plugin on WordPress.org. Pro is $69 / year ($29 your first year); Agency is $199 / year. See Pricing and the Refund Policy. When a license expires, pages you’ve already built keep working; the blocks render for every visitor. You stop getting updates and can’t insert or edit the blocks until you renew.プランは年額・直接購入です（トライアルなし）。まずは WordPress.org の無料版でお試しください。Pro は $69/年（初年 $29）、Agency は $199/年。料金と返金ポリシーをご覧ください。ライセンス失効後も作成済みページは動作（ブロックは全訪問者に表示）。アップデートが止まり、更新するまでブロックの挿入・編集はできません。