AFFINGER専用「RichAnimation（リッチアニメーション）プラグイン」で記事に動きのある演出をする方法！

WordPress の優良なテーマ AFFINGER の専用プラグイン「RichAnimation（リッチアニメーション）プラグイン」を使うことで、イメージや、複数のブロックをアニメーションで表示させることができ、サイト（記事）に動きのある演出を追加することが可能です。

動きのある演出は読者の興味に繋がりますので、読者を飽きさせず記事を楽しんでもらうための一助になる是非使いたい機能です。

本記事では、「RichAnimation（リッチアニメーション）プラグイン」のサンプルと、使い方などをご紹介いたします。

＼AFFINGER でオシャレサイトを作る方法はこちらをクリックしてください／

リッチアニメーションのサンプル

リッチアニメーションプラグインでは多様なアニメーション演出をワンクリックに近い操作で実現できるため、サイト（ブログ）に動きを付けたページを簡単に作ることができ、読者を飽きさせません。リッチアニメーションプラグインで実際にできることの一部をご紹介します。

ビジネスサイトのようなカッコいい演出も可能です。

【オシャレに着こなす大人のカジュアル】

スタイリッシュなあなたに合わせる、ふわっと優しさを見せつつも男を感じさせるファッション。ワンポイントの決め手にショルダーでシックにキメるコントラストがたまらない。

【シックに着こなす大人のカジュアル】

ダンディなあなたに合わせる、大人カジュアル、遊びすぎない色合いにワンポイントでシックに決めるブラックショルダーのコントラストがたまらない。

ブロックエディタの場合はマウス操作のみで設定できて便利です。

アニメーションさせたいブロックを選択して「グループ化」します。

グループのプロパティに「リッチアニメ」がありますので、使いたいアニメーションを指定します。

ポイント

グループのプロパティを表示するためには、グループを選択する必要があります。

グループの選択が上手く操作できない場合は、次の□が２個斜めに重なったアイコンをクリックしてみてください。

プレビュー表示してみてください。アニメーションして表示します。

クラシックブロック（またはクラシックエディタ）でリッチアニメーションを設定する方法です。

タグが埋め込まれます。もしアニメーションしたいコンテンツの外にタグがある場合は、タグの中にコンテンツを入れてください。

■ 埋め込まれるタグはこちらです。

[st-rich-animation type="lr" delay="0" duration="1000" offset="200"]

（コンテンツ）

[/st-rich-animation]

プレビュー表示してみてください。アニメーションして表示します。

リッチアニメタグの各属性です。

属性名	説明
type	パターンを指定する "bt"：下から "tb"：上から "rl"：右から "lr"：左から "bs"：大きいサイズから "sb"：小さいサイズから "fade"：フェードインのみ
delay	表示を開始する時間（ミリ秒）
duration	表示を終了する時間（ミリ秒）
offset	表示を開始する位置（pt）