Diviのテーマビルダーを使用してアニメーションページトランジションを作成する方法

通常、訪問者がDivi Webサイトのページ間を移動すると、移行は即座に行われます。 では、これらのページ遷移をアニメーション化する方法があるとしたらどうでしょうか。 Diviのテーマビルダーを使用すると、カスタムコードを必要とせずに確実に使用できます。 訪問者がページを離れて別のページに入るとすぐに、アニメーションを適用させることができます。 今日のチュートリアルでは、これらのアニメーション化されたページ遷移を作成する方法を示します。 さらに、次のプロジェクトにすぐに適用できる3つの異なる例も共有します。 テンプレートのJSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

アニメーションページ遷移＃1

デスクトップ

モバイル

アニメーションページ遷移＃2

デスクトップ

モバイル

アニメーションページ遷移＃3

デスクトップ

モバイル

ページテンプレートを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

1. Diviテーマビルダーに移動し、新しいページテンプレートを追加します

Diviテーマビルダーに移動し、新しいテンプレートを追加します

最初に行う必要があるのは、Diviテーマビルダーに移動し、[新しいテンプレートの追加]をクリックすることです。

すべてのページでテンプレートを使用

すべてのページ（またはトランジションを適用するページ）で新しいテンプレートを使用します。

• 使用場所：すべてのページ

テンプレート本体の作成を開始します

次に、ページテンプレートのカスタム本文の作成を開始します。

2.投稿コンテンツモジュールを使用してページ本文を作成する

セクション設定

間隔

テンプレートエディタに入ると、セクションが表示されます。 そのセクションを開き、デフォルトの上部と下部のパディングをすべて削除します。

• トップパディング：0px
• ボトムパディング：0px

可視性

アニメーションの実行中に水平スクロールバーが表示されないようにするには、セクション設定の[詳細設定]タブで両方のセクションオーバーフローを非表示にする必要があります。

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

新しい行を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行設定を開き、行がセクションコンテナの幅全体を占めるようにします。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：100％
• 最大幅：100％

間隔

また、行のデフォルトの上部と下部のパディングも削除します。 この時点で、セクション、行、および列のコンテナーのサイズはまったく同じです。 コンテナ間に空白はありません。 これは、次のステップで何が行われるかにとって重要です。 動的ページコンテンツを追加します。

• トップパディング：0px
• ボトムパディング：0px

投稿コンテンツモジュールを列に追加

ページコンテンツを動的に表示するために必要な唯一のモジュールは、投稿コンテンツモジュールです。 先に進み、このモジュールを行の列に追加します。 この投稿の前の部分で適用したセクションと行の設定のおかげで、動的ページコンテンツはセクションコンテナの幅と高さ全体を占めます。

3.選択したアニメーションページ遷移を適用します

アニメーションページトランジション＃1を再作成する

セクション設定

背景色

アニメーション化されたページ遷移を適用する時が来ました！ 3つの異なる例を共有していますが、Diviの組み込みオプションを使用すると、アニメーションの可能性は無限に広がります。 最初のアニメーションページ遷移を適用するには、セクションコンテナを開き、背景色を追加します。

• 背景色：＃d8cdbe

アニメーション

また、次のアニメーション設定をセクションに適用しています。

• アニメーションスタイル：スライド
• アニメーションの方向性：右
• アニメーションの開始不透明度：100％
• アニメーション速度曲線：イーズインアウト
• アニメーションの繰り返し：1回

行設定

背景色

次に行設定を開き、次の背景色を追加します。

• 背景色：＃e2e2e2

アニメーション

次のアニメーションを行に適用して続行します。

• アニメーションスタイル：スライド
• アニメーションの方向性：右
• アニメーションの遅延：500ms
• アニメーションの開始不透明度：100％
• アニメーション速度曲線：イーズインアウト
• アニメーションの繰り返し：1回

列の設定

背景色

アニメーション化する次のコンテナである列コンテナに移ります。 列の設定を開き、白い背景色を追加します。

• 背景色：#ffffff

アニメーション

列にカスタムアニメーションも追加します。

• アニメーションスタイル：スライド
• アニメーションの方向：左
• アニメーションの遅延：1200ms
• アニメーション速度曲線：イーズインアウト
• アニメーションの繰り返し：1回

コンテンツモジュールの設定を投稿する

アニメーション

最後になりましたが、投稿コンテンツモジュール（すべての動的ページコンテンツを含む）をアニメーション化します。

• アニメーションスタイル：フェード
• アニメーションの遅延：2500ms
• アニメーション速度曲線：イーズインアウト
• アニメーションの繰り返し：1回

アニメーションページトランジション＃2を再作成する

セクション設定

背景色

代わりに2番目のアニメーションを作成したいですか？ セクション設定を開き、次の背景色を使用します。

• 背景色：＃d8cdbe

アニメーション

次に、カスタムアニメーションをセクションに適用します。

• アニメーションスタイル：スライド
• アニメーションの方向：左
• アニメーションの開始不透明度：100％
• アニメーション速度曲線：イーズインアウト
• アニメーションの繰り返し：1回

行設定

グラデーションの背景

次に行設定を開き、次のグラデーションの背景を使用します。

• 色1：rgba（255,255,255,0）
• 色2：#ffffff
• グラデーションタイプ：線形
• グラデーション方向：90度
• 開始位置：50％
• 終了位置：50％

アニメーション

行にカスタムアニメーションも追加します。

• アニメーションスタイル：スライド
• アニメーションの方向性：上
• アニメーションの遅延：800ms
• アニメーションの開始不透明度：100％
• アニメーション速度曲線：イーズイン
• アニメーションの繰り返し：1回

列の設定

背景色

次に、行の列設定を開き、白い背景色を使用します。

• 背景色：#ffffff

アニメーション

列にアニメーションを追加して続行します。

• アニメーションスタイル：スライド
• アニメーションの方向性：右
• アニメーションの遅延：2000ms
• アニメーションの開始不透明度：100％
• アニメーション速度曲線：イーズインアウト
• アニメーションの繰り返し：1回

コンテンツモジュールの設定を投稿する

アニメーション

最後になりましたが、Post Content Module設定を開き、次のアニメーション設定を使用します。

• アニメーションスタイル：フェード
• アニメーションの遅延：3000ms
• アニメーション速度曲線：イーズインアウト
• アニメーションの繰り返し：1回

アニメーションページトランジション＃3を再作成する

セクション設定

グラデーションの背景

次の最後のアニメーションページへの移行に移りましょう！ セクション設定を開き、次のグラデーションの背景を使用します。

• 色1：＃d8cdbe
• 色2：#ffffff
• グラデーションタイプ：ラジアル
• 半径方向：上
• 開始位置：20％
• 終了位置：20％

アニメーション

セクションの[デザイン]タブに移動し、それに応じてアニメーション設定を変更します。

• アニメーションスタイル：スライド
• アニメーションの方向：下
• アニメーション強度：10％
• アニメーションの開始不透明度：100％
• アニメーション速度曲線：イーズインアウト
• アニメーションの繰り返し：1回

行設定

グラデーションの背景

次に、行の設定を開き、グラデーションの背景を適用します。

• 色1：#ffffff
• 色2：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：中心
• 開始位置：50％
• 終了位置：50％

アニメーション

行のアニメーション設定も変更します。

• アニメーションスタイル：スライド
• アニメーションの方向：下
• アニメーションの遅延：1000ms
• アニメーションの開始不透明度：100％
• アニメーション速度曲線：イーズイン
• アニメーションの繰り返し：1回

列の設定

背景色

列の設定を開いて続行します。 背景色を変更します。

• 背景色：#ffffff

アニメーション

次のアニメーション設定も列に適用します。

• アニメーションスタイル：スライド
• アニメーションの方向：下
• アニメーションの遅延：1500ms
• アニメーション速度曲線：イーズインアウト
• アニメーションの繰り返し：1回

コンテンツモジュールの設定を投稿する

アニメーション

そして、次のアニメーション設定を投稿コンテンツモジュールに適用して、3番目のアニメーションページ遷移を完了します。

• アニメーションスタイル：フェード
• アニメーションの遅延：3000ms
• アニメーション速度曲線：イーズインアウト
• アニメーションの繰り返し：1回

6.すべてのテーマビルダーの変更とプレビュー結果を保存します

ページテンプレートの本文を作成し、選択したアニメーションページ遷移を追加したら、テーマビルダーのすべての変更を保存して、Webサイトで結果を表示できます。

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

アニメーションページ遷移＃1

デスクトップ

モバイル

アニメーションページ遷移＃2

デスクトップ

モバイル

アニメーションページ遷移＃3

デスクトップ

モバイル

最終的な考え

この投稿では、Diviの組み込みオプションとテーマビルダーのみを使用してアニメーション化されたページ遷移を作成する方法を示しました。 これは、追加のコードを必要とせずに、Webサイトに別のレベルのインタラクションを追加するための優れた方法です。 サンプルテンプレートのJSONファイルも無料でダウンロードできました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。