コードウェット

Diviのフリッピングアニメーションで魅力的な名刺をデザインする方法

Rifat Divi Tutorials Oct 20, 2021

名刺は、企業の個人を個人に紹介するための一般的な方法です。 それはその個人についてのすべての必要な情報を運び、彼の有用な連絡先情報を提供します。 反転して同じ仕事をするウェブサイト上の仮想名刺はどうですか？」それは間違いなくよりダイナミックになり、ソーシャルリンクが添付されるので、誰でも簡単に個人に連絡できます。これは本当に興味深いですね。今日、 Diviでこのデザインについて学びましょう！それでは始めましょう。

Diviのフリッピングアニメーションで魅力的な名刺をデザインする方法

デザインプレビュー

今日はこのデザインを作成します。 面白そうですね

パート1：クリックすると反転する名刺のデザイン

追加：行1

通常のセクションに1列の行を追加することから始めます。

以下の設定を更新してください。

素晴らしいウェブサイトを作成します

最高の無料ページビルダーElementor を使用

今すぐ始める
  • 列の高さを等しくする：はい
  • 幅：90％
  • 最大幅：1200px

列の設定を開き、それにパディングを追加します。

パディング

  • デスクトップ-上下に30ピクセル、左右に50ピクセル。
  • タブレット-上下に30ピクセル、左右に50ピクセル。
  • 電話-上下に15ピクセル、左右に15ピクセル

[詳細設定]タブから次のCSSクラスを追加します。 このコードは、フリップアニメーションをクリックするためのトリガーとして機能します。

  • CSSクラス：card-column

カラムクローニング

前の列を複製しました。 これで、列へのレイアウトができ、それぞれに同じパディングとCSSクラスがあります。

バックカードの作成

まず、通常は背面にあり、クリックすると前面に表示される名刺を作成します。 ここでは、個人に関するすべての情報を入力します。 バックカードと呼びます。 これを作成するために、我々は唯一のカードに画像を添付する分圧器を使用しますので、その後、我々は、分周器の設定からディバイダの可視性をオフにし、カラム1の分周器を取り付けます。

背景色

  • 背景色：＃322b3f

背景グラデーション

  • 背景グラデーション左色：rgba（50,43,63,0.72）
  • 背景のグラデーションの正しい色：＃322b3f
  • グラデーションタイプ：ラジアル
  • 終了位置：34％
  • 背景画像の上にグラデーションを配置：はい

背景画像

  • 背景画像：[チームメンバーの画像またはポートレートをアップロード]
  • 背景画像サイズ：フィット
  • 背景画像の位置：中央

サイジング

  • 幅：100％
  • 最小高さ：300px
  • 高さ：100％

ボックスシャドウ

  • ボックスシャドウ：スクリーンショットを参照
  • ボックスシャドウの垂直位置：0px
  • ボックスシャドウブラー強度：50px

CSSのクラスと位置

次に、CSSクラスを仕切りに追加し、位置を更新します。

  • CSSクラス：バックカード
  • 位置：絶対

追加：バックカードのロゴ

バックカードを配置しました。ロゴを追加します。

次に、ロゴをアップロードします。 サイズは約60px * 60pxである必要があります。

CSSクラス

  • CSSクラス：カードコンテンツ

ポジション

  • 位置：絶対
  • 垂直オフセット：30px（デスクトップとタブレット）、15px（電話）
  • 水平オフセット：50px（デスクトップとタブレット）、10px（電話）

追加：カード所有者名

次に、ロゴモジュールの下のテキストモジュールを名前のカードに追加します。 そして、あなたが紹介したい人の名前を更新します。

デザインタブでこれを変更します。

  • テキストフォント：ポピンズ
  • テキストテキストの色：#ffffff
  • テキストテキストサイズ：28px（デスクトップとタブレット）、22px（電話）
  • 文字間隔：1px
  • テキストの配置：右

追加：職位

前のテキストモジュールを複製して、ジョブの位置を追加します。 ボディコンテンツを編集し、デザインタブで調整します。

  • テキストフォントスタイル：TT
  • テキストテキストサイズ：16px（デスクトップとタブレット）、14px（電話）
  • マージン：15px下

追加：会社名

会社名を追加するには、前のテキストモジュールを複製し、本文の内容を変更します。

  • テキストフォントの太さ：軽い
  • テキストフォントスタイル：デフォルト
  • テキストテキストサイズ：22px（デスクトップとタブレット）、18px（電話）
  • テキストの配置：左

追加：連絡先番号

個人の連絡先番号を追加します。 会社のテキストモジュールの下に宣伝文モジュールを追加します。 電話番号で本文の内容を更新し、アイコンを追加します。

設計設定から、以下を更新します。

  • アイコンの色：＃20BFAC
  • 画像/アイコンの配置：左
  • アイコンを使用フォントサイズ：はい
  • アイコンフォントサイズ：20px
  • ボディフォント：ポピンズ
  • 本文の色：#ffffff
  • 本文サイズ：16px
  • マージン：10px下

追加：メールアドレス

前の宣伝文モジュールを複製し、本文の内容を電子メールアドレスとして更新します。 次に、アイコンを封筒として更新します。

追加：ウェブサイト

メールセクションの場合と同じようにします。 前の宣伝文モジュールをコピーして、内容を変更します。

追加：ソーシャルメディアアイコン

バックカードに追加する最後のモジュールは、ソーシャルメディアフォローモジュールです。 このモジュールを最後の宣伝文モジュールの下に追加します。

設定から、すべてのソーシャルアイコンを透明にし、必要に応じてURLを追加します。 すべてのアイコンを透明にするには、各ソーシャルメディアモジュールを開き、白いマークの付いたバーを下にドラッグします。 それは仕事を変えるでしょう。

また、[デザイン]タブで、ソーシャルメディアのフォローアイコンを右側に配置します。

追加：すべてのモジュールに同じクラス

すべてのモジュールの配置とカスタマイズが完了したので、 Diviの複数選択機能を使用してモジュールを選択し、共通のCSSクラスを追加します。 このCSSクラスに合わせて、フリップアニメーションでカードのコンテンツの前に表示するCSSコードを追加します。

  • CSSクラス：カードコンテンツ

「Cmd」または「Ctrl」を押しながら要素をクリックして選択します。 次に、任意のモジュールの設定をクリックして調整します。

フロントカードの作成

バックカードが完成しました。次に、バックカードの代わりに配置され、その内容を背面に非表示にするフロントカードで作業します。 列1のカードを置き換える列2の画像モジュールを使用してフロントカードをデザインします。最初に、列2に画像モジュールを追加し、モジュールにロゴ（60px * 60px）を追加します。

次に、バックカードからディバイダーモジュールの設定を開き、背景をコピーします。

フロントカードの画像設定を開いて貼り付けます。

デザインセクションから、画像の間隔を次のように更新します。

  • パディング（デスクトップとタブレット）：上30px、左50px
  • パディング（電話）：上15px、左10px

高度な設定

[詳細設定]タブから、この画像にCSSクラスを指定します。

  • CSSクラス：フロントカード

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

height: 100%;
width: 100%;

また、位置設定を更新します。

  • 絶対位置
  • Zインデックス：13

これで、フロントカードの操作が完了したら、列1のバックカードモジュールにドラッグします。

パート2：カスタムコードの追加

最後に、カスタマイズされたCSSおよびJQueryコードをいくつか追加して、名刺デザインにフリップアニメーションを追加します。 このために、列1の下にコードモジュールを追加します。

追加：CSSコード

次に、コードモジュール内に以下のコードを追加します。 その場合は、必ずスタイルタグ内に保持してください。 

.card-column {
  perspective: 1400px;
}
.front-card:hover {
  cursor: pointer;
}
 
.front-card,
.back-card {
  transition: all 500ms ease-in-out;
  transform-style: preserve-3d;
}
 
.back-card {
  transform: rotateX(-180deg) rotateY(0deg) rotateZ(0deg) !important;
}
 
.divi-transform-active .back-card {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}
 
.divi-transform-active .front-card {
  transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);
  transform-origin: 50% 50%;
}
 
.card-content {
  transition: all 300ms ease-out 0ms;
}
 
.divi-transform-active .card-content {
  transition: all 300ms ease-out 500ms;
  opacity: 1 !important;
}
 
.divi-transform-active .front-card {
  opacity: 0;
  visibility: hidden;
}

追加：JQueryコード

CSSコードの下に次のJQueryコードを追加します。 それらをScriptタグ内に保持することを忘れないでください。 

(function ($) {
  $(document).ready(function () {
    $cardColumn = $(".card-column");
    $cardContent = $(".card-content");
 
    $cardContent.css("opacity", "0");
 
    $cardColumn.on("click", function (e) {
      $(this).addClass("divi-transform-active");
      e.stopPropagation();
    });
    $(document).on("click", function (e) {
      if ($(e.target).is($cardColumn) === false) {
        $cardColumn.removeClass("divi-transform-active");
      }
    });
  });
})(jQuery);

より多くの名刺を作成する

チームメイトの名刺をさらに追加するには、必要な回数だけ列のクローンを作成する必要があります。 ただし、コードモジュールが2つあると設計が破損するため、クローンカードからコードモジュールを削除したことを確認してください。

ここで紹介したいすべての人に応じて、すべてのカードを変更します。

最終ビュー

私たちが行ったすべての作業の後、私たちのデザインは次のようになります。 各カードをクリックすると、カードがめくられ、個人に関する情報が表示されます。 次に、外側をクリックすると、前の位置に戻ります。

結論

インタラクティブな名刺は、ウェブサイトにチームメイトを表示するのに最適な方法です。 これを使用して、プロジェクトに関する情報を表示したり、アイデアを共有したりできます。 このチュートリアルが役立つと思われる場合は共有を押してください。質問や質問がある場合は、以下にコメントしてください。

Divi WordPress Theme