アニメーションの設定と利用方法

LP Creator のアニメーション設定について解説します。

ここでは特に「ブロックアニメーション」のデフォルト速度・遅延時間の設定について説明しています。

アニメーションが動かない、アニメーションの設定がない、プレビューボタンが動かない場合は、
バージョンが古い可能性があります。テーマとプラグインを最新バージョンにアップデートして下さい。

他のアニメーションプラグインが入っている場合、競合して正常に動かない可能性があります。必ず他のアニメーション系のプラグインを無効にして下さい。

アニメーションの利用箇所について

以下の箇所でアニメーションが利用できます。

ブロックアニメーションの設定

フェードインやスライドイン等のエントリーアニメーションが設定できます。

テーマのバージョンを「1.6.0」以上に、プラグインのバージョンを「4.4.0」以上にアップデートして下さい。

アニメーションの速度・遅延を「個別ブロック単体」で設定でき、「サイト全体」と「ページ単位（LPのみ）」の共通設定もできます。

優先順位は、デフォルト値　＜　サイト全体　＜　ページ単位（LPのみ）　＜　ブロック単体　になっています。

デフォルト値は、速度1.2秒、遅延0.2秒になっています。

サイト全体の設定

管理画面の左メニューから「ブロック設定」に進みます。

サイト全体のデフォルト値をここで変更できます。

ページ単位

各ページの編集ページ下にあるメタボックスより変更できます。

値を入力したら保存し、ページを更新して下さい。

デフォルト値に戻したい場合は空欄にして保存して下さい。

LPテンプレート（「LP」と「モバイル特化(LP)」）のみ変更ができます。

ブロック単位

アニメーションさせたいブロックを選択して、右パネルに「アニメーション」が出てきます。

ボタンの場合はボタン特有の常時アニメーション（光る・揺れる）があります。

デフォルト値は「サイト全体」もしくは「ページ単位」で設定した値が設定されます。

ワードプレス標準ブロックの「段落」「画像」「動画」「埋め込み」ブロックに同じアニメーション設定ができるように拡張しています。（※ カーテン系アニメーションは設定できません）

各アニメーションについて

カーテン系アニメーション

左から右にアニメーション表示するカーテン系のアニメーションが2種類入っています。
「カーテン」と「カーテン（ダブル）」があります。

カーテンアニメーションのサンプル

「カーテン」

「カーテン（ダブル）」

カーテン系アニメーションの注意点

カーテン系アニメーションが入っているブロックと、入っていないブロックがあります。（ほとんどのブロックに入っています。）

例えば、WP標準の段落ブロックには入っていませんので、無いブロックで利用したい場合は、上記のように、ボックス等のブロックで囲って、ボックスブロックにアニメーションを設定します。

ボックスブロックの設定を「横幅を内容幅に合わせる」をON、パディング上下左右を全て0にすると囲みの余白がなくなります。