Diviで分割テキストシャッターアニメーションデザインを使用して画像オーバーレイを作成する方法

公開: 2021-03-05

画像オーバーレイは、Webサイトに画像を表示するときに、引き続き人気のあるデザイン資産です。これらは、画像を表示するための創造的な方法を提供するだけでなく、特に画像にカーソルを合わせたりクリックしたりするときにカスタムアニメーションを追加するときに、画像の表示をより楽しく魅力的にすることができます。

このチュートリアルでは、Diviでスプリットテキストシャッターアニメーションを使用して画像オーバーレイを作成する方法を紹介します。最初に、分割テキストシャッターを使用してカスタム画像オーバーレイを作成する方法を示します。次に、Diviの組み込みの変換オプションを使用して、3つの完全にユニークな画像オーバーレイシャッターアニメーションデザインを作成する方法を示します。これらのクリエイティブなジュースを流すためのデザイン例をさらにいくつか紹介します。

飛び込んで始めましょう！

スニークピーク

このチュートリアルの画像オーバーレイデザインを簡単に見てみましょう。

そして、これがこのチュートリアルで使用されたのと同じデザインを示すcodepenです。

レイアウトを無料でダウンロード

スプリットテキストシャッターアニメーションとブレンドモードを備えた画像オーバーレイ

このチュートリアルの画像オーバーレイ分割テキストシャッターアニメーションデザインに手を置くには、最初に下のボタンを使用してそれらをダウンロードする必要があります。ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。「再購読」したり、追加のメールを受信したりすることはありません。

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

無料でダウンロード

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

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

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

divi通知ボックス

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

コーナータブの拡張

開始するには、次のことを行う必要があります。

まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

パート1：分割テキストシャッターを使用した画像オーバーレイの構築

チュートリアルのこの最初の部分では、分割テキストシャッターを使用して画像オーバーレイの初期設定を作成します。これが完了したら、後でシャッターにアニメーションを追加できます。

行

まず、通常のセクションに2列の行を追加します。

スプリットテキストシャッターアニメーションとブレンドモードを備えた画像オーバーレイ

モジュールを追加する前に、行設定を開き、ガター幅を更新します。

側溝幅：2

スプリットテキストシャッターアニメーションとブレンドモードを備えた画像オーバーレイ

列の更新

列は、画像とシャッターオーバーレイ要素を保持するメインコンテナになります。また、ホバー時にシャッターアニメーションを開始するメインターゲットにもなります。つまり、カーソルが列の内側に移動すると、子要素（シャッター）のアニメーションがオンになり、カーソルが列の外側に移動すると、アニメーションがオフになります。

列を「シャッター列」として指定し、後で「ホバー時に」アニメーション化するには、次のCSSクラスを列に追加します。

CSSクラス：シャッターカラムオンホバー

次に、オーバーフローを非表示に更新して、アニメーション中に変換された要素が列コンテナを超えたときに表示されないようにします。

水平オーバーフロー：非表示
垂直オーバーフロー：非表示

スプリットテキストシャッターアニメーションとブレンドモードを備えた画像オーバーレイ

メイン画像の追加

列1内に、画像モジュールを追加します。これは、シャッターオーバーレイの後ろに配置するメイン画像として機能します。

スプリットテキストシャッターアニメーションとブレンドモードを備えた画像オーバーレイ

画像を画像モジュールにアップロードします。

スプリットテキストシャッターアニメーションとブレンドモードを備えた画像オーバーレイ

次に、画像の配置を中央に設定します。

スプリットテキストシャッターアニメーションとブレンドモードを備えた画像オーバーレイ

分割テキストを使用したトップシャッターの作成

画像が配置されたので、テキストモジュールを使用してトップシャッターを追加します。画像の下に新しいテキストモジュールを追加します。

スプリットテキストシャッターアニメーションとブレンドモードを備えた画像オーバーレイ

本文領域に「divi」というテキストを追加して、テキストモジュールのコンテンツを更新します。

スプリットテキストシャッターアニメーションとブレンドモードを備えた画像オーバーレイ

[デザイン]タブで、テキストスタイルを次のように更新します。

テキストフォント：ポピンズ
テキストフォントの太さ：重い
テキストフォントスタイル：TT
テキストテキストの色：#ffffff
テキストテキストサイズ：200px（デスクトップ）、30vw（タブレットと電話）
テキスト文字の間隔：-0.03em
テキスト行の高さ：0em
テキストの配置：中央

スプリットテキストシャッターアニメーションとブレンドモードを備えた画像オーバーレイ

次に、サイズと間隔のオプションを更新します。

幅：100％
高さ：50％
マージン：0px下

スプリットテキストシャッターアニメーションとブレンドモードを備えた画像オーバーレイ

[詳細設定]タブで、以下を更新します。

CSSクラス：トップシャッター

後でコードを使用して、CSSクラスを使用して変換アニメーションのオンとオフを切り替えます。

次に、このカスタムCSSをメイン要素に追加します。

display:flex;
align-items:flex-end;
justify-content:center;

このコードはflexを使用して、テキストがモジュールの下部に垂直に配置されていることを確認します。テキストの行の高さは0であるため、テキストは上半分のみを示す分割として表示されます。

スプリットテキストシャッターアニメーションとブレンドモードを備えた画像オーバーレイ

トップシャッターを配置するには、最初にテキストのオーバーフローを非表示にしてから、次のように絶対位置を指定する必要があります。

水平オーバーフロー：非表示
垂直オーバーフロー：非表示
位置：絶対

これにより、シャッターが画像の上半分に移動します。

スプリットテキストシャッターアニメーションとブレンドモードを備えた画像オーバーレイ

分割テキストを一致させて下部シャッターを作成する

上部のシャッターが完成したので、上部のシャッターテキストモジュールを複製することで、下部のシャッターの作成をすぐに開始できます。

スプリットテキストシャッターアニメーションとブレンドモードを備えた画像オーバーレイ

次に、複製テキストモジュールを開き、以下を更新します。

CSSクラス：トップシャッター

align-itemsプロパティの「flex-end」を「flex-start」に置き換えて、メイン要素のCSSを更新します。最終的なCSSは次のとおりです。

display:flex;
align-items:flex-start;
justify-content:center;

「フレックススタート」を使用すると、テキストはモジュールの上部に垂直に配置されます。また、テキストの行の高さは0であるため、テキストは分割として表示され、下半分のみが表示されます。

次に、次のように垂直オフセットで絶対位置を更新します。

垂直オフセット：50％

これにより、シャッターテキストモジュールが画像の下半分の上に配置されます。

これで、両方のシャッターの分割テキストが完全に一致するように配置されます。

スプリットテキストシャッターアニメーションとブレンドモードを備えた画像オーバーレイ

この時点で、分割テキストシャッター画像オーバーレイのセットアップが正常に作成されました。これは、コンテナとしてのシャッター列、メイン画像、画像の上半分にある上シャッター、および画像の下半分にある下シャッターで構成されます。

スプリットテキストシャッターアニメーションとブレンドモードを備えた画像オーバーレイ

これを、変換プロパティを使用したシャッター効果アニメーションを含む次のいくつかの例のスターターテンプレートの一種として使用します。

パート2：コード

シャッターアニメーションの機能を追加するには、コードモジュールを使用したCSSとJSのスニペットがいくつか必要です。

ページに新しいコードモジュールを追加します。最初のオーバーレイビルドに使用した最初の上部セクションの右側の列に追加できます。

スプリットテキストシャッターアニメーションとブレンドモードを備えた画像オーバーレイ

CSS

次のCSSをコードボックスに貼り付けて、必要なスタイルタグでラップしていることを確認します。

  /* transition duration of shutter animation */
  .top-shutter,
  .bottom-shutter {
    transition: transform 1s;
  }
  /* disables all transform options created in
  Divi Builder for both shutters */
  .divi-transform-none .top-shutter,
  .divi-transform-none .bottom-shutter {
    transform: none;
  }
  .on-click {
    cursor:pointer;
  }

このCSSは本当にシンプルです。実行しているのは、クラス「divi-transform-none」の列内のシャッターにtransform：noneを適用することだけです。このクラスは、アニメーションを作成するためにJSでオンとオフを切り替えます。トランジション：transform 1sは、トランジション（またはアニメーション）の期間を最後の1秒に設定するだけです。

JS

CSSの後に、次のJQueryをコードボックスに追加して、必要なスクリプトタグでラップしていることを確認します。

(function ($) {
  $(document).ready(function () {
    /*
  Toggle shutter transform animation on hover.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-hover divi-transform-none".
  */
    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

    /*
  Toggle shutter transform animation on click.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-click divi-transform-none".
  */
    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });
  });
})(jQuery);

スプリットテキストシャッターアニメーションとブレンドモードを備えた画像オーバーレイ

コードの最初の部分では、列に「shutter-column on-hover divi-transform-none」というクラスがある場合は常に、ホバー時にシャッター変換アニメーションを切り替える機能が追加されています。

    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

コードの2番目の部分では、列に「shutter-column on-click divi-transform-none」というクラスがある場合は常に、クリック時にシャッター変換アニメーションを切り替える機能が追加されています。

    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });

パート3：分割テキストシャッターアニメーションデザイン

デザイン＃1

最初のシャッターアニメーションデザインを作成するために、最初のセクションを複製してデザインプロセスを開始します。これにより、分割テキストシャッターを使用できるように、事前に作成された画像オーバーレイを備えた新しいセクションが作成されます。

スプリットテキストシャッターアニメーションとブレンドモードを備えた画像オーバーレイ

トップシャッターに変換プロパティを追加する

通常、CSSを使用して変換プロパティを使用して何かをアニメーション化する場合、要素には最初は変換スタイルがなく、ユーザーがアイテムにカーソルを合わせるかクリックするたびに変換スタイルが適用されます。 Diviでは、プロセスを反転し、最初にDiviBuilderを使用して要素に変換スタイルを追加することから始めます。これにより、デザインを視覚的に編集しながら、組み込みの変換オプションを使用できます。次に、すべての変換デザイン要素の追加が完了したら、最初に（CSSクラスを使用して）それらを無効にし、ユーザーがオーバーレイを操作したときにオンとオフを切り替えることができます。

変換デザインをトップシャッターに追加するには、トップシャッターテキストモジュールの設定を開き、以下を更新します。