Image Compare

image-compare フェンスコードブロックから、ビフォー・アフター比較スライダーを生成します。スライダーはビルド時に HTML を出力し、小さなクライアントスクリプトで操作を追加します。JavaScript が動かない場合も 2 枚の画像を並べて読めます。

English

概要

```image-compare
before: ./before.png
after: ../assets/after.png
beforeAlt: 変更前
afterAlt: 変更後
orientation: horizontal
label: ホームページ
```

before と after は必須です。画像パスは Markdown 画像と同じ規則でノートからの相対パスとして解決します。外部 URL、プロトコル相対 URL、コンテンツディレクトリの外へ出るパスは拒否します。

ブロックは <figure> とネイティブの range input になります。マウス、タッチ、キーボードのすべてで操作でき、1 ページに複数のブロックを置けます。SPA でページが置き換わると、各スライダーのリスナーは破棄されます。

設定

import { defineConfig } from "@riebeckite/core";
import { imageCompare } from "@riebeckite/plugin-image-compare";
 
export default defineConfig({
  // ...
  plugins: [imageCompare()],
});

プラグインは専用のスタイルシートとページ単位のクライアントエントリを登録します。無効にした場合は何も出力しません。

オプション

ブロックのフィールド

使用例

```image-compare
---
before: ../../assets/themes/theme-default-light.png
after: ../../assets/themes/theme-default-dark.png
beforeAlt: ライトモードの Default テーマ
afterAlt: ダークモードの Default テーマ
label: Default テーマのライト表示とダーク表示
---
```

BeforeAfter

BeforeAfter

出力とアクセシビリティ

静的な figure には 2 枚の画像と Before / After のラベルを表示します。JavaScript が動くと静的な一覧を隠し、操作可能なステージを表示します。range input はステージ全体を覆い、ネイティブのキーボード操作を保ち、フォーカス時はステージに輪郭を出します。変更後の画像は clip-path で切り抜くため、ドラッグ中に画像の位置や縮尺は変わりません。各画像は元の縦横比のまま表示され、ステージの高さは高い方の画像に合わせて広がります。2 枚は同じ幅で撮影すると切り替え位置で内容がそろいます。高さが違っても構いません。

スタイルは既存の --rb-color-* テーマトークンを使い、Default、Light、Dark の各テーマで動作します。グラデーション、ガラス効果、過剰な角丸、アニメーションは使いません。

診断

関連資料

• Gallery
• プラグインシステム