[共通オプション] ホバーアニメーション

ここで紹介する機能を利用するには、DigiPress 専用プラグイン「DigiPress Ex – Blocks」が必要です。

「DigiPress Ex – Blocks」プラグインを利用することで、WordPress のブロックエディターの対象となるコアブロックおよびカスタムブロックの共通オプションとして「ホバーアニメーション」機能が追加されます。

この機能では、対象となるブロックコンテンツのマウスオーバー時に施される遷移アニメーションの適用有無とそのトランジションの詳細について設定します。

その他のエディター機能については以下をご覧ください。

機能の概要

動画準備中

このブロック共通オプションにアクセスするには、対象ブロックが選択された状態でサイドバーの「ホバーアニメーション」パネルのトグルをチェックし、パネルを開きます。

マウスオーバー時にブロック全体の不透明度を変化させたい場合に 0〜1 の範囲で調整します。
不透明度が 1(100%)から 0(0%) に近づくにつれブロックの透過度合いが増していきます。

デフォルト値は「0.8」(80%)となり、ホバーアニメーションを初めて有効にしたときは、マウスオーバー時にブロックが 20% 透過された状態のエフェクトが適用されます。

マウスオーバー時にブロックコンテンツの表示位置、拡大率、回転率、傾きを変化させる場合にトグルをオンにしてポップアップの設定パネルを開いて調整します。

マウスオーバー時にブロックコンテンツにボックスシャドウ加工を施したい場合にトグルをオンにしてポップアップの設定パネルを開いて調整します。

マウスオーバー時にブロックコンテンツの背景色（単色またはグラデーション）を変化させたい場合にトグルをオンにしてポップアップの設定パネルを開いて調整します。

このオプションはブロック共通オプションの「ブロック背景」をサポートするブロックにて背景色が既に設定されている場合のみ表示されます。

マウスオーバー時にブロックコンテンツにフィルター加工を施した状態に遷移させる場合にトグルをオンにしてポップアップの設定パネルを開いて調整します。

上記で調整したマウスオーバー時の状態に変化させるまでの時間、遅延、変化量を調整します。

「イージングパターン」は、移動時の加速曲線を表すイージング関数のキーワードを選択します。
“カスタム” を選択すると、独自のカスタム曲線を指定できます。
カスタム曲線での遷移は “イージングプレビュー” にリアルタイムで反映されます。

編集操作の妨げになるため、ブロックエディタ側ではブロックのマウスオーバー時にホバーアニメーションは反映されません。エディタ側でマウスオーバー時のアニメーションを確認するには、「プレビュー」ボタンをクリックします。

「背景色」の項目は、同じくブロック共通オプションである「ブロック背景」にて背景色または背景グラデーションが設定されている場合のみ、同じ背景色のスタイル（単色またはグラデーション）で表示されます。

このブロック共通オプションは以下のブロックにて利用可能です。

WordPress標準ブロック

カスタムブロック

今後追加される新規ブロックについても随時対象となります。

本機能は無料版では対象外です。