ケンバーンズホバー効果をDiviの画像、モジュール、行に追加する方法

ケンバーンズエフェクトはしばらく前から存在しています。 この効果は、アメリカのドキュメンタリー映画家、ケンバーンズがパンとズームのテクニックを組み合わせて使用​​し、映画の中で画像に命を吹き込んだことで有名になりました。 ウェブデザインでは、ケンバーンズエフェクトが背景画像に命を吹き込むための人気のあるデザインテクニックであることが証明されています。

ケンバーンズ効果は、画像のホバー効果としても使用できます。 確かにあなたはこれが以前に使われたのを見たことがあります。 画像に命を吹き込むために、Webデザイナーは画像にホバー効果を追加して、画像をズーム、移動、回転させます。

TransformエフェクトをDiviBuilderにリリースすると、ケンバーンズのホバーエフェクトを画像に簡単に追加できるようになりました。 これらの変換オプションを使用すると、画像を好きなように拡大縮小（ズーム）、移動（またはパン）、回転させることができます。 そして、これらの変換を画像のホバー状態に適用できるため、デザインの可能性はほぼ無限大です。

このチュートリアルでは、Divi Builderを使用して、画像や行に完全にユニークなケンバーンズホバー効果を簡単に作成できることを示します。

始めましょう。

スニークピーク

これは、Diviの変換オプションを使用して簡単に実行できるケンバーンズホバー効果のスニークピークです。

基本コンセプトの説明

ケンバーンズのホバー効果を作成するための基本的な概念には、Diviの新しい変換オプションを使用して、画像にカーソルを合わせたときに画像を拡大縮小、配置、回転することが含まれます。 スケール変換プロパティを特定の割合で増やして、ホバー時に画像を大きくすることができます。 変換変換プロパティを使用して、x軸とy軸に沿って画像を移動できます。 また、特定の度数値（この場合はx軸の回転の度数値）を設定することにより、rotatetransformプロパティを使用して画像を回転させることができます。 最後に、遷移時間（速度）と速度曲線を制御して、ケンバーンズホバー効果の流れの速度を制御できます。 3つの変換プロパティと遷移プロパティが連携して、写真に命を吹き込むケンバーンズホバー効果を作成します。

Diviが提供する組み込み設定を使用して、変換プロパティと遷移プロパティを簡単に微調整できます。 ただし、この効果を機能させるための鍵は、画像を含む列に適用する必要があるcssの単純な行（overflow：hidden）を含みます。 画像の拡大縮小、移動、回転を行うため、画像のオーバーフローを、画像を含む列の外側に非表示にする必要があります。

基本的な考え方と機能を整えたら、Diviの変換オプションを使用して画像を希望どおりに正確に配置することがいかに簡単であるかは注目に値します。

ケンバーンズホバー効果の例を無料でダウンロード

無料のKenBurns Hover Effect Exampleを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

zipファイルをダウンロードしたら、フォルダーを解凍します。 次に、DiviBuilderの移植性機能を使用して.jsonレイアウトをインポートします。 または、Diviのドラッグアンドドロップ機能を使用して、ファイルをDiviBuilderにドラッグすることもできます。 それでおしまい！

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

新しいページの開始

最初に行う必要があるのは、新しいページを作成することです。 次に、ページにタイトルを付けて、フロントエンドにDiviBuilderをデプロイします。 次に、「最初から構築する」オプションを選択します。

1列の行の画像にケンバーンズ効果を追加する

この最初の基本的な例では、1列の行の1つの画像にケンバーンズホバー効果を追加する方法を示します。 この効果を実現するために、スケール、移動、回転の変換オプションを使用します。

まず、1列の行を持つ新しい新しいセクションを作成します。 次に、画像モジュールを行に追加します。

カラムのオーバーフローを隠す

画像設定の更新を開始する前に、行設定を開き、[詳細設定]タブをクリックします。 次に、次のカスタムCSSを列のメイン要素に追加します。

overflow: hidden;

これにより、ホバー時に画像がより大きなサイズに拡大縮小されるたびに、画像が列コンテナを超えて拡張（またはオーバーフロー）するのを防ぎます。 これを追加しないと、画像がコンテナから抜け出し、ページの他の要素が非表示になります。 技術的には、このcssを列ではなく行のメイン要素に追加できますが、カスタム行のパディングも削除する必要があります。

行設定を保存します。

画像を追加する

これで、画像を画像モジュールに追加できます。 イメージモジュールの設定を開き、イメージを追加します。

画像が列よりかなり大きいことを確認してください。 これは、ホバー時に画像をより大きなサイズに拡大縮小するときに画像がぼやけて見えないようにするために重要です。 1列の行のデフォルト設定を使用している場合、列の最大幅は1080pxになります。 そのため、幅が約1500ピクセル、高さが約900ピクセルの画像を使用しています。

重要：経験則として、画像が大きいほど、画質を損なうことなく、画像を拡大縮小、移動、回転するために必要なスペースが増えます。

トランスフォームホバー効果の追加

画像が配置されたので、これらの変換オプションを使用してKenBurnsホバー効果を作成します。 [デザイン]タブに移動して、[変換]オプションを開きます。 ホバー効果をアクティブにして、ホバータブを選択します。 これで、変換効果のカスタマイズは、画像モジュールのホバー状態にのみ適用されます。 次に、[変換スケール]タブで、以下を更新します。

変換スケールのx軸（ホバー）：136％
変換スケールのy軸（ホバー）：136％

次に、[変換変換]タブをクリックして、以下を更新します。

変換変換x軸（ホバー）：3％
変換変換y軸（ホバー）：9％

これにより、画像が左に3％、下に9％移動します。 この特定の画像では、ズームインしてカップルを列ビューポートの中央に移動する効果を求めていました。

デフォルトでは、平行移動の長さの値はピクセル単位（パーセンテージではありません）になります。 画像の移動にはピクセルを使用できますが、パーセンテージを使用すると、ポジショニングの応答性が向上することがわかりました。

次に、[変換] [回転]タブをクリックして、以下を更新します。

変換回転x軸（ホバー）：6度

移行オプションの更新

最後に、遷移期間（変換ホバー効果が完了するまでにかかる時間）と速度曲線（遷移がその期間にわたって速度を変更できるようにするタイミング関数）を更新する必要があります。 この例では、ホバーに対するより劇的な（そして古典的な）ケンバーンズ効果のために、移行にもっと時間がかかるようにします。 これを行うには、[詳細設定]タブに移動し、次のように遷移オプションを更新します。

移行時間：2000ms（または2秒）
遷移速度曲線：線形（これにより、遷移の速度が継続時間で変化しないことが保証されます）

最終結果

それでは、最終結果を確認しましょう。 以下のgifの途切れに惑わされないでください。 ライブサイトでは、移行は非常にスムーズです。

ケンバーンズホバー効果を3列の行の複数の画像に追加する

複数の列の画像にケンバーンズホバー効果を追加する場合は、同じプロセスが適用されます。 あなたがする必要がある主なことは、あなたの画像を含む各列に「overflow：hidden」cssスニペットを確認して追加することです。

上記の前の例を使用して、行の列構造を3列のレイアウトに変更します。

次に、各列のオーバーフローを非表示にするカスタムCSSスニペットで行設定を更新します。

列1のメイン要素CSS：

overflow:hidden;

列2のメイン要素CSS：

overflow:hidden;

列3の主要要素CSS：

overflow:hidden;

次に、イメージモジュールをコピーして、列2と列3に貼り付けます。

それでおしまい。 これが最終結果です。

このデザインはギャラリーグリッドレイアウトの典型的なものであるため、ホバーアニメーションをシャープにするために、トランジション期間を少し速くすることをお勧めします。 これは、Diviの複数選択機能を使用して簡単に行うことができます。 Ctrlキーまたはcmdキーを押しながら、すべてのイメージモジュールを選択します。 次に、画像の1つにある設定歯車アイコンをクリックして、要素設定モーダルを開きます。

これで、要素設定で行った更新がすべての画像に一度に適用されます。 次のように、要素設定の遷移オプションを更新します。

移行時間：500ms

有効な新しい移行期間は次のとおりです。

背景画像のある任意のモジュールにKenBurnsホバー効果を追加する

ケンバーンズのホバー効果は、画像モジュール以外のモジュールにも使用できます。 これは、モジュールの背景画像と一緒にテキストまたはアイコンを変換する場合にうまく機能します。

ケンバーンズエフェクトをテキストモジュールに追加する方法は次のとおりです。

まず、1列の行を持つ新しい通常のセクションを作成します。 次に、テキストモジュールを行に追加します。

次の内容でテキストモジュールを更新します。

<h1>We're Engaged!</h1>

次に、モジュールに背景画像を追加します。 ホバー時に画像を拡大縮小および移動する余地を残すのに十分な大きさの画像を追加することを忘れないでください。

次に、見出しのデザインオプションを次のように更新します。

見出しフォント：プラタ
見出しのテキストサイズ：6vw
カスタムパディング：上10vw、下10vw、左3vw

移行時間：5000ms

次に、次の変換設定をテキストモジュールに追加します。

変換スケールのx軸（ホバー）：118％
変換スケールのy軸（ホバー）：118％

変換変換x軸（ホバー）：6％
変換変換y軸（ホバー）：6％

次に、列の次のカスタムCSSで行設定を更新します。

列のメイン要素CSS：

overflow:hidden;

結果を確認してください。

ホバーすると、テキストと背景画像が一緒に変換されることに注目してください。

ケンバーンズホバー効果と追加のホバー効果の組み合わせ

モジュールに適用されるKenBurns Hover Effectを追加のエフェクトと組み合わせて、さらに創造性を高めることもできます。

ケンバーンズホバー効果とフィルター効果の組み合わせ

それらを忘れた場合、フィルター効果は、特にホバー時に、モジュールにクリエイティブなスタイルを追加するための優れた方法です。 また、これらのフィルター効果を変換効果と組み合わせて、非常にユニークなホバートランジションを作成できます。

表示するために、テキストモジュールにケンバーン効果を追加した上記の例を使用してみましょう。 テキストモジュールにはすでに変換ホバー効果が設定されているので、フィルター効果を追加して、画像を白黒からカラーに変更しましょう。

テキストモジュールの設定を開き、次のフィルターオプションを更新します。

飽和度（デフォルト）：0％
飽和（ホバー）：100％

この遷移により、テキストモジュールはデフォルトで0％の彩度に設定され、色が取り除かれて白黒になります。 ホバー時に100％に戻すと、画像の元の色が追加されます。

これが、ケンバーンズホバー効果と組み合わせたフィルター効果の最終的な効果です。

ケンバーンズホバー効果と行変換効果の組み合わせ

この例では、ケンバーンズのホバー効果と行に追加された追加の変換効果を組み合わせる方法を紹介します。 アイデアは、変換効果を使用して行をデフォルトの状態で拡大縮小および回転し、ホバー時に元のデザインを復元することです。

注：この手法は、実際には、単一のモジュールを持つ1列の行に対してのみ適切に機能します。 これは、訪問者がモジュールと行に同時にカーソルを合わせる必要があるためです。 したがって、モジュールは行の高さと幅全体を占める必要があります。 追加のモジュールまたは間隔は、ホバー状態を壊し、問題を引き起こします。

これを行うために、ケンバーンズホバー効果と追加のフィルター効果をすでに組み合わせた現在のテキストモジュールデザインを維持します。 つまり、これは実際にはトリプルホバー効果です！

テキストモジュールを含む行の設定を開きます。 次に、以下を更新します。

カスタムパディング：0px上、0px下、0px左、0px右

これは、テキストモジュールと行の間に追加の間隔がないことを確認するためです。

次に、次のように行にボックスシャドウを追加します。

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウブラー強度：36px
影の色：rgba（0,0,0,0.17）

次に、次の変換効果を追加します。

変換スケールのx軸（デフォルト）：70％
変換スケールのx軸（ホバー）：100％
変換スケールのy軸（デフォルト）：70％
変換スケールのy軸（ホバー）：100％

変換回転y軸（デフォルト）：19度
変換回転y軸（ホバー）：0度
変換回転z軸（デフォルト）：23度
変換回転z軸（ホバー）：0度

それでは、最終結果を確認しましょう。

コンテンツの行全体にKenBurnsホバー効果を追加する

念のために言っておきますが、Ken Burnsのホバー効果を使用して、コンテンツの行全体をホバーで生き生きとさせることもできます。 これは、訪問者を混乱させたり気を散らしたりする方法になるため、コンテンツが多い行にはあまり実用的ではありません。 ただし、ヘッダーなどの場合、これは便利な設計手法になる可能性があります。 秘訣は、カスタムCSSスニペット「overflow：hidden」をセクションに追加することです。 次に、変換効果を行に追加できます。

最終的な考え

ケンバーンズエフェクトはしばらく前から存在していますが、Diviで画像やモジュールに非常にユニークなホバーエフェクトを作成するのに役立つ場合があります。 秘訣は、驚くほど直感的なDiviTransformオプションの使用方法を知ることです。 このチュートリアルで提供されているこの例は、概念を紹介し、うまくいけば、あなた自身の使用法に少しインスピレーションを与えることを目的としています。 変換オプションをDiviで利用可能な他のすべてのスタイリングオプションと組み合わせるすべての方法を考えると、たくさんのアイデアが浮かび上がります。

コメントでお返事をお待ちしております。

乾杯！