Webデザインツール「STUDIO」でよく見かける、画像が表示される際に色がスライドして中身が現れる「スライド・リビール（Slide Reveal）」アニメーション。
日本語で言うなら、舞台の幕がシュッと引かれるような「幕開け」エフェクトです。
今回ご紹介するコードを使えば、この洗練された動きを導入できます。
使用例↓
メディアとテキストブロックにも対応済み！
StudioのこのようなサイトをWordPressでも作りたい…！という想いから作成しました！
Revify「幕開け」アニメーションの特長
最新版のRevifyコードは、実運用での「使いやすさ」と「ノーコードの柔軟性」を究極まで追求しています。
- 軽量・防御設計:
- IntersectionObserverを採用し、画面内に入った瞬間だけ動作。二重実行防止処理も完備しています。
- 角丸（border-radius）に自動適応:
- 画像に設定された角丸をJSが自動検知。幕も綺麗に角が丸まった状態でスライドします。
- 管理画面でカスタマイズ:
- 色、速度、遅延、イージングをPHPを触らずに変更可能。
導入動画
実装方法
使用方法動画
コードスニペットを導入する
こちらのボタンをクリックしてスニペットをダウンロードします。
会員限定コンテンツ
ここは会員限定コンテンツです。
＼お申込みはこちら／
コードスニペットをオンにします。
アドオン機能導入方法
管理画面「プラグイン」から、「プラグインを追加」を選択。
「プラグインの検索」欄に、Code Snippetsと入力。
このプラグインを「今すぐインストール」・「有効化」します。
該当ページから、コードスニペットをダウンロードします。
コピペではなく、ダウンロード形式で使用するものは上画像のような黄色いボタンで統一しています。
インポート/エクスポートが容易な、コード管理プラットフォームです。
「ひとつの機能としてパッケージングされたコード群」を、利用者はコードを触ることなくスイッチ（トグル）のオンオフで導入できる神ツールです。
管理画面「スニペット」「インポート」から、先ほどダウンロードしたコードスニペットをインストールします。
重複インストールを防ぐために下段にチェックを入れ、
Choose Filesエリアに先ほどダウンロードしたファイルをドラッグ&ドロップします。
インストールするファイルにチェックを入れ、「Import Selected」を押します。
管理画面「スニペット」「すべてのスニペット」から、先ほどインポートしたスニペットの左端にあるスイッチ（トグル）をオンにします。
目当ての機能が有効化されているか確認します。
使い方：CSSクラスを書き込むだけ
WordPressのエディタで、アニメーションさせたい画像を選択し、右サイドバーの「高度な設定」＞「追加CSSクラス」にクラスを入力します。
基本の形
slide-reveal
これだけで、デフォルトの青色の幕が左から右へ流れます。
オプションを組み合わせる
スペース区切りでオプションを追加できます。
- 右から左へ:
slide-reveal left - 色を変える:
slide-reveal red - 速くする:
slide-reveal fast - 遅らせる:
slide-reveal delay-1
例： slide-reveal left purple fast delay-1 （左へ抜ける / 紫色 / 素早く / 0.5秒遅れて開始）
管理画面でのカスタマイズ
設定は、WordPress管理画面の「設定」＞「スライドアニメーション」から変更・追加できます。
便利なコピー機能
管理画面の右側には、現在使えるクラス名の一覧が表示されます。クリックするだけでコピー完了の通知（トースト）が出るため、エディタへの貼り付け作業もスムーズです。
仕組み：幕レイヤー（Mask-Wrap）方式
このスクリプトは、実行時にJavaScriptで画像そのものを「幕専用のレイヤー（span要素）」でくるみ込みます。
この方式の最大のメリットは、「元のブロック（figureタグなど）のCSSを1ミリも変更しない」ことです。これにより、WordPressテーマが持つ配置ロジックと競合することなく、安全にリッチな演出を追加できます。
まとめ：洗練されたサイト体験をあなたの手で
これまでは高度なコーディングスキルが必要だったスライド・リビールアニメーションも、Revifyの幕レイヤー方式を使えば、ノーコードの操作感を損なうことなく簡単に導入できます。
特に画像の配置や角丸の設定がそのまま活かせる点は、運用フェーズでのストレスを大幅に軽減してくれるはずです。
サイトを訪れたユーザーに驚きと心地よさを与える「幕開け」エフェクト。あなたのWordPressサイトにも取り入れて、ワンランク上のデザインを実現してみませんか。
配置を崩さず、角丸にも対応したRevifyの「幕開け」アニメーションで、ワンランク上のサイト体験を提供しましょう！
