Welcart 和音（Waon）テーマでは、ブロックに追加 CSS クラスを指定することで、簡単にフェードインなどのアニメーションを適用できます。
追加 CSS クラスの指定方法（ブロックエディタ操作）
- 編集画面からブロックを選択します（見出し・画像・カラムなど、動かしたいブロック）。
- 右側のサイドバーで ［ブロック］タブ → 「詳細設定」 → 「追加CSSクラス」 を開きます。
- そこにアニメーション用クラス名（例：
anim-reveal）を入力します。
アニメーション一覧
「追加 CSS クラス」に anim-reveal を付与した要素は、スクロールイン時にフェードインします。
さらに、方向・速度を制御するサブクラスを組み合わせることで、動きのバリエーションを追加できます。
表示方向
| 指定クラス | 動作の説明 |
|---|---|
| anim-reveal | 【デフォルト】 標準のフェードイン。静かに現れます。 |
| anim-reveal anim-reveal–up | 【下から現れる】 要素が下から上へ浮かび上がるように表示します。 |
| anim-reveal anim-reveal–down | 【上から現れる】 要素が上から下へ滑り込むように表示します。 |
| anim-reveal anim-reveal–left | 【右から現れる】 右側から左方向へスライドしながらフェードイン。 |
| anim-reveal anim-reveal–right | 【左から現れる】 左側から右方向へスライドしながらフェードイン。 |
表示速度
| 指定クラス | 動作の説明 |
|---|---|
| anim-reveal anim-reveal–fast | 【早めに表示】 通常より短い時間でフェードインします。 |
| anim-reveal anim-reveal–slow | 【ゆっくり表示】 通常より長い時間をかけてフェードインします。 |
横並びカードを順番に表示したい場合
親要素に reveal-group 、子要素に anim-reveal を指定します。
これにより、スクロール時にカードが順番にアニメーション表示されます。
<div class="reveal-group">
<article class="anim-reveal">カード1</article>
<article class="anim-reveal">カード2</article>
<article class="anim-reveal">カード3</article>
</div>
PAGE TOP