Diviの画像ギャラリーにグリッドスタガリングアニメーションを追加する方法

公開: 2021-06-11

Diviの画像ギャラリーモジュールは、サイトに魅力的な画像ギャラリーを作成するための便利で便利なツールであり続けます。 組み込みのデザイン設定により、すべての必需品などを入手できます。 ただし、このチュートリアルでは、独自の驚異的なアニメーション効果を使用して、画像ギャラリーのデザインを新しいレベルに引き上げます。 Diviの組み込みデザインオプションanime.jsの組み合わせを使用して、この驚異的なアニメーションは、滑らかなデザインアニメーションでギャラリー内の各画像を次々に公開する一種の波及効果に似ています。 これは、訪問者向けのギャラリーのユニークなプレゼンテーションと、ギャラリーの各ページをナビゲートするときの印象的な移行を探している人に最適です。

始めましょう！

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

そして、これが同じ概念を示すcodepenです。

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

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

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

無料でダウンロード

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

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

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

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

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

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

divi通知ボックス

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

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

始めるために必要なもの

コーナータブの拡張

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

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

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

驚異的なアニメーションをDiviイメージギャラリーに追加する方法

パート1：ギャラリーページレイアウトの設計

セクション

まず、既存のセクションの設定を開き、次のように背景のグラデーションを付けます。

  • 背景グラデーションの左の色：＃d915b5
  • 背景のグラデーションの正しい色：＃000000
  • 開始位置：50％
  • 終了位置：25％

ディビ驚異的なアニメーション画像ギャラリー

[デザイン]タブで、パディングを更新します。

  • パディング：上0px、下0px、左0px、右0px

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

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

ディビ驚異的なアニメーション画像ギャラリー

ページタイトルの行

セクション内に、1列の行を追加します。 これにより、ページタイトルが保持されます。

ディビ驚異的なアニメーション画像ギャラリー

行設定を開き、パディングを更新します。

  • パディング：上15px、下15px

ディビ驚異的なアニメーション画像ギャラリー

タイトルテキストモジュール

ページタイトルを作成するには、行/列にテキストモジュールを追加します。

ディビ驚異的なアニメーション画像ギャラリー

次に、次のH1見出しで本文の内容を更新します。 

<h1>Gallery</h1>

ディビ驚異的なアニメーション画像ギャラリー

テキストデザイン設定で、以下を更新します。

  • 見出しフォント：ポピン
  • 見出しテキストの配置：中央
  • 見出しのテキストの色：#ffffff
  • 見出しのテキストサイズ：100px（デスクトップ）、80px（タブレット）、60px（電話）

ディビ驚異的なアニメーション画像ギャラリー

ギャラリーモジュールの行

同じセクションで、ギャラリーモジュールを保持する新しい1列の行を作成します。

ディビ驚異的なアニメーション画像ギャラリー

行設定を開き、背景を黒にします。

  • 背景色：＃000000

ディビ驚異的なアニメーション画像ギャラリー

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

  • カスタムガター幅を使用：はい
  • 側溝幅：1
  • 幅：95％
  • 最小の高さ：80vh
  • パディング：0px上、0px下
  • ボックスシャドウ：スクリーンショットを参照
  • ボックスシャドウの垂直位置：0px
  • ボックスシャドウの水平位置：0px
  • ボックスシャドウスプレッド強度：70px
  • 影の色：＃000000

ディビ驚異的なアニメーション画像ギャラリー

パート2：ギャラリーモジュールの設計

最後に、ギャラリーモジュールを追加して設計する準備が整いました。 ギャラリーを作成するには、新しいギャラリーモジュールを行に追加します。

ディビ驚異的なアニメーション画像ギャラリー

画像

ギャラリー設定の[コンテンツ]タブで、ギャラリーに使用する画像を追加します。 この例では、65枚の画像（または少なくとも25枚以上）を追加します。 これにより、驚異的なアニメーション効果とページ付けを紹介するためのギャラリーアイテムが多数提供されます。

画像がギャラリーにアップロードされたら、以下を更新します。

  • 画像数：25
  • タイトルとキャプションを表示：いいえ
  • ページ付けを表示：はい

ディビ驚異的なアニメーション画像ギャラリー

注：画像数を「25」に設定すると、ページネーションリンクをクリックしたときにページごとに表示される画像の数が定義されます。 カスタムコードで追加する驚異的なグリッドアニメーションは、ページごとに5つの画像（25の画像）が5行ある画像ギャラリーに基づいています。 最良の結果を得るには、少なくとも25枚の画像があり、画像数が25に設定されていることを確認してください。

オーバーレイとページ付けのデザイン

[デザイン]タブで、オーバーレイデザインを更新します。

  • オーバーレイアイコンの色：#ffffff
  • オーバーレイの背景色：rgba（217,21,181,0.55）
  • オーバーレイアイコン：プラスアイコン（スクリーンショットを参照）

ディビ驚異的なアニメーション画像ギャラリー

  • ページ付けテキストの配置：中央
  • ページ付けテキストサイズ：2em
  • ページ付けラインの高さ：2em
  • パディング：上10px、下10px、左5px、右5px

ディビ驚異的なアニメーション画像ギャラリー

高度なスタイリング

次に、ギャラリーモジュールに高度なスタイルを追加します。 これを行う主な理由は、さまざまなデバイスで行ごとに表示される画像の数を制御することです。

まず、次のようにギャラリーアイテムにCSSを追加しましょう。

ギャラリーアイテムCSS（デスクトップ） 

animation: fadeLeft 0s !important;
background: #000000;
padding: 10px;
width: 20% !important;
margin: 0 !important;
clear: none !important;

ギャラリーアイテムCSS（タブレット） 

animation: fadeLeft 0s !important;
background: #000000;
padding: 5px;
width: 25% !important;
margin: 0 !important;
clear: none !important;

ギャラリーアイテムCSS（電話） 

animation: fadeLeft 0s !important;
background: #000000;
padding: 5px;
width: 50% !important;
margin: 0 !important;
clear: none !important

各ギャラリーアイテムの幅がデバイスごとに変わることに注意してください。 デスクトップの幅が20％の場合、行ごとに5つの画像が作成されます。 タブレットの25％の幅では、1行に4つの画像が作成されます。 また、電話の幅が50％の場合、1行に2つの画像が作成されます。

次に、ページネーションの境界線を削除しますが、ギャラリーのページネーションボックスに次のCSSを追加します。 

border-top: 0px !important;
padding-top: 20px;

最後に、アクティブなページネーションリンクにカスタムの色とフォントの太さを追加します。 

color: #d915b5 !important;
font-weight: bold;

ディビ驚異的なアニメーション画像ギャラリー

保存する前に、必ず次のCSSクラスをギャラリーモジュールに追加してください。

  • CSSクラス：et-anime-gallery

ディビ驚異的なアニメーション画像ギャラリー

パート3：JQueryとAnime.jsを使用してギャラリーに驚異的なアニメーション効果を追加する

デザインが完成したので、シンプルでプロフェッショナルな画像ギャラリーのレイアウトができました。 画像ギャラリーの驚異的なアニメーションを作成するために必要なコードを追加するだけです。

これを行うには、ギャラリーモジュールの下にコードモジュールを追加します。

ディビ驚異的なアニメーション画像ギャラリー

CSS

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

/*hide prev and next pagination links*/  
.et-anime-gallery li.prev, .et-anime-gallery li.next {
  display:none !important;
  }

ディビ驚異的なアニメーション画像ギャラリー

Anime.jsライブラリ

終了スタイルタグの下に、次のsrcをscriptタグとともに貼り付けて、anime.jsライブラリを呼び出し、その下のJavaScript / Jqueryで使用できるようにします。 

src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"

スクリプトは次のようになります…

ディビ驚異的なアニメーション画像ギャラリー

ディビ驚異的なアニメーション画像ギャラリー

JQuery

Anime.jsライブラリを呼び出しているスクリプトの下に、次のJQueryを貼り付け、必要なスクリプトタグでラップします。 

jQuery(function ($) {
  $(document).ready(function () {
    
    var fromCenter = "center";
    var animeTargetItem = ".et-anime-gallery .et_pb_gallery_item";
    var animeTargetImage = ".et-anime-gallery .et_pb_gallery_image";
    var $paginationLink = $(".et-anime-gallery .et_pb_gallery_pagination li a");
    
		//animate gallery on page load
    animateGalleryFunction(animeTargetItem, animeTargetImage, fromCenter);

    //animate gallery when clicking pagination number link
    $($paginationLink).click(function (e) {
      var pageNum = $(e.target).attr("data-page");
      var fromNum = pageNum*25-25; //replace 25 with image count for gallery module
      animateGalleryFunction(animeTargetItem, animeTargetImage, fromNum);
    });

    function animateGalleryFunction(targetItem, targetImage, stagFrom) {
      //animate gallery image
      anime({
        targets: targetImage,
        opacity: [0, 1],
        rotateX: [0, 360],
        scale: [0.5, 1],
        direction: "normal",
        easing: "easeInOutSine",
        duration: 600,
        delay: anime.stagger(
          200,
          { grid: [5, 5], from: stagFrom },
          { start: "100" }
        ),
      });
      //animate gallery item background
      anime({
        targets: targetItem,
        background: ["#000", "#d915b5", "#000"],
        direction: "normal",
        easing: "easeInOutSine",
        duration: 600,
        delay: anime.stagger(
          250,
          { grid: [5, 5], from: stagFrom },
          { start: "100" }
        ),
      });
    }
  });
});

ディビ驚異的なアニメーション画像ギャラリー

最終結果

ギャラリーとコードの更新

自分のサイトに合わせてギャラリーやアニメーション効果を変更したい場合は、覚えておくべきヒントがいくつかあります。 まず、ギャラリーの画像数を25以外に変更する場合は、その新しい値を反映するようにコードを更新する必要があります。 たとえば、20に変更する場合は、次の変数の数値も変更する必要があります。 

var fromNum = pageNum*25-25;

これに… 

var fromNum = pageNum*20-20;

両方のアニメーションのdelayプロパティのグリッド値を更新する必要がある場合もあります。 たとえば、デスクトップのページごとに20枚の画像しかない場合、5行は4行しかありません。したがって、次の値を変更する必要があります。 

grid: [5, 5]

これに… 

grid: [4, 5]

また、必要に応じてアニメーションのプロパティ値を変更できます。 たとえば、ギャラリーアイテムの背景アニメーションの色を変更する場合は、以下を更新できます。 

background: ["#000", "#d915b5", "#000"]

これに… 

background: ["#000", "#ffffff", "#000"]

これにより、アニメーション中にピンクの背景色が白に変わります。

最終的な考え

Divi Builderを使用してすべてのデザインが完成したら、画像ギャラリーに驚異的なアニメーションを追加することで、デザインを次のレベルに引き上げることができます。 アニメーションの鍵は、anime.jsライブラリの機能を利用して、画像と背景をターゲットにして複数のアニメーションを実行することです。 彼らのウェブサイトでAnime.jsによるグリッドスタガリングの詳細を自由に学んでください。 コードのプロパティと値を自由に調整して、独自のフレアをデザインに追加してください。

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

乾杯！