Divi は Web ページにアニメーションを編集過程をリアルタイムに確認しながら設定することができます。アニメーションの設定はセクション、行、モジュールのそれぞれで設定できます。

WordPressテーマ Diviの使い方5
サイトにアニメーションを設定する

1.アニメーション設定の場所

アニメーションを設定するには、

セクション(青色)、行(緑色)、モジュール(灰色)のそれぞれの「⚙(歯車)」アイコンをクリックします。
設定のパネルが表示されるので「デザイン」タブの「アニメーション」をクリックします。※行やモジュールでも同様です。

2.アニメーションを設定する

1)Animation Style(アニメーションスタイル)

Animation Style では、アニメーションの形状を設定できます。

  • フェード:フェードし現れる効果
  • スライド:スライド移動し現れる効果
  • Bounce:ポンポンと弾む効果
  • Zoom:ズーム拡大する効果
  • 反転:反転から開く効果
  • Fold:折り畳みから開く効果
  • Roll :ロール回転効果

2)Animation Repeat(アニメーションリピート)

Animation Repeat では、クリックすることで、1回のみか連続か選べます。

  • Once:1回のみ
  • Loop:連続実施

3)Animation Direction(アニメーション方向)

「✔(チェックマーク)」をクリックして承認します。

Animation Direction では、アニメーションの方向を設定できます。

4)Animation Duration(アニメーション期間)

Animation Duration では、アニメーションの実行期間(時間)を設定できます。

単位はミリセカンド(ms)

5)Animation Delay(アニメーションディレイ)

Animation Delay では、アニメーションの実行開始までの遅延時間を設定できます。

単位はミリセカンド(ms)

6)Animation Intensity(アニメーション強度)

Animation Intensity では、アニメーションの動きの大きさを設定できます。

単位は%です。

7)Animation Starting Opacity(アニメーション 開始 透過度)

Animation Opacity では、アニメーション開始時の透過度を設定できます。透過状態から現れてきます。

単位は%です。

8)Animation Speed Curve(アニメーション速度曲線)

Animation Speed Curve では、アニメーションの実行速度曲線を設定できます。

  • Ease-In-Out:最初と最後をゆっくりにします
  • Ease:ゆっくり
  • Ease-In:ゆっくり開始し速く
  • Ease-Out:最後をゆっくりにします
  • 線形:直線状にします

アニメーションを設定することでサイトに動きを出せます。Divi ではセクション、行、モジュールのそれぞれに動きを設定できます。適度に動かすことはサイトのイメージアップにつながることもあります。設定してみましょう。

ワードプレス Divi レッスン Diviの使い方図解

写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。

Diviの使い方10 モジュールの利用1 画像 と 広告

今回は Divi の各種モジュールのうちから、画像モジュールと広告モジュールについて図解したいと思います。画像モジュールと広告モジュール Diviの使い方10-1...
divi-tips-sns-monarch-logo

ワードプレス Divi MONARCH インストールと設定

Divi を開発している Elegant Themes にはSNSとの連携をより容易にすることができるプラグイン MONARCH もあります。Divi を購入していると MONARCH...

Divi用の子テーマ作成プラグインを利用する Diviの使い方8-1-3

今回はDivi で子テーマを作成する方法の3つ目としてプラグインを利用する方法を図解します。複数のプラグインがありますが、その中から今回は「Divi...
divi-lesson8-2-logo

ワードプレス Divi の使い方8 外観のカスタマイズ2 サイトの文字の大きさを変える

Divi にはサイトの文字の大きさを変える複数の方法が存在します。それぞれで使いどころを分けて利用すると便利です。Diviの使い方8 外観のカスタマイズ2...

Pin It on Pinterest