Diviのアニメーションを使用してスライド画像でコンテンツを展開する

この5部シリーズのパート2へようこそ。このシリーズでは、Diviの新しいアニメーションオプションを使用してすばらしいページセクションをデザインする方法を説明します。 Webサイトにアニメーションを追加するためのテクニックを示すために、ライブデモページのさまざまなセクションを作成する方法について説明します。 アニメーション機能は本当に楽しくて使いやすいです。 また、ビジュアルビルダーを使用すると、あらゆる段階で自分の作品が生き生きと動くのを見ることができます。 Diviアニメーションの力を探求するときに、ぜひご参加ください。

シリーズのパート1では、アニメーションデモページの最初の2つのセクションを作成しました。 最初のセクションのヘッダーのデザインとアニメーションは、フルスクリーンの標準セクション内のテキストモジュールの要素をアニメーション化する独自の方法を示しました。 2番目のセクションを作成する際に、コンテンツの行に微妙で調和のとれたアニメーションを組み込む方法を発見しました。これは、ランディングページのコンテンツを魅力的な方法で紹介するために簡単に使用できます。

今日、私たちはページをスクロールするときにアニメーションを効果的に（そして創造的に）使用するセクションレイアウトを設計するための旅を続けています。 ライブデモページの3番目と4番目のセクションを作成して、Diviのアニメーション機能の力を紹介します。 これらのセクションは両方とも、製品やサービスを紹介するための独自のプロジェクトに簡単に採用できるレイアウトを備えています。

始めましょう。

これが今日の投稿で構築するもののスニークピークです

セクション3

セクション4

デザイン要素の準備

画像を準備する

3番目のセクションでは、2つの画像が必要になります。 1つ目は約880×600、2つ目は約790×880である必要があります。 これらの画像サイズは正確である必要はありません。 私はあなたにアイデアを与えるためにこれらの次元を含めているだけです。

4番目のセクションを作成するときは、600×400の周りに2つの画像も作成します。

VisualBuilderを使用する

ここでは高度なコードは必要ありません。 このシリーズのパート1で作成したページの次の2つのセクションの設計には、VisualBuilderのみを使用します。 ページはすでに設定されているので、準備は完了です。

Diviのアニメーションを使用してスライド画像でコンテンツを展開する

私たちのYoutubeチャンネルを購読する

デモのセクション3の構築

セクション3は、アクション呼び出しモジュールを設計およびアニメーション化する方法の優れた例です。

に飛び込みましょう。

Visual Builderを使用して、2列の行を持つ通常のセクションを追加します。 左側の列に画像モジュールを追加します。

次のように画像設定を更新します。

[コンテンツ]タブの下…

画像のURL：[880×600の画像を挿入]

[デザイン]タブの下…
全幅を強制：はい
アニメーションスタイル：スライド
アニメーションの方向：左
アニメーション強度：20％
アニメーションの開始不透明度：100％

設定を保存する

仕切りモジュールを追加

右の列では、仕切りモジュールとCall toActionモジュールを使用してコンテンツを紹介します。 仕切りモジュールは、テキストの上に短い仕切り線を追加するために使用されます。

右側の列に仕切りモジュールを追加します。

次に、次のように設定を更新します。

[コンテンツ]タブの下…

仕切りを表示：はい

[デザイン]タブの下…

色：＃e4ca77
仕切りの重量：4px
幅：80px（デフォルトはパーセンテージなので、この値を入力する必要があります）
モジュールの配置：デフォルト（左）
カスタムマージン：上60px、下0px

アニメーションスタイル：折り
アニメーションの方向性：右
アニメーション時間：1200ms
アニメーションの遅延：50ms
アニメーション強度：70％
アニメーションの開始不透明度：0％

設定を保存する

召喚状モジュールを追加する

Divider Moduleの下に、次の設定でCall toActionモジュールを追加します。

[コンテンツ]タブの下…

タイトル：「パーフェクトビュー」
ボタンテキスト：「詳細」
内容：「Loremipsum dolor sit amet、consectetur adipiscingelit。 Phasellus bibendum est vitae felis rhoncusgravida。 Sed nec purus tempus、sagittis mi id、efficiturnisl。 Lorem ipsum dolorは、amet、consectetur adipiscingelitに座っています。 Phasellus bibendum est vitae felis rhoncusgravida。 Sed nec purus tempus、sagittis mi id、efficiturnisi。」
リンク： ＃
背景色を使用：いいえ

[デザイン]タブの下…

テキストの色：暗い
テキストの向き：左
ヘッダーフォント：Lato、大文字（TT）
ヘッダーフォントサイズ：38px
ヘッダーテキストの色：＃0c0c0c
ヘッダー文字の間隔：0.2em
ヘッダー行の高さ：1.4em

ボディフォント：ラト
本文のフォントサイズ：18px
本文の色：＃9e9e9e
ボディラインの高さ：1.8em

ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：15px
ボタンのテキストの色：＃000000
ボタンの背景色：rgba（225,225,225,0）
ボタンの境界線の幅：0px
ボタンの文字間隔：2px
ボタンフォント：ラト、太字（B）、大文字（TT）
ボタンアイコン：右矢印
ボタンのホバー時にアイコンのみを表示：いいえ
ボタンホバーの文字間隔：0px

アニメーションスタイル：折り
アニメーションの方向性：右
アニメーション時間：1200ms
アニメーションの遅延：50ms
アニメーション強度：70％
アニメーションの開始不透明度：0％

設定を保存する

次に、クリックして行設定を編集し、以下を更新します。

[デザイン]タブの下…

カスタム幅を使用：はい
カスタム幅：1366px

[詳細設定]タブの下…

次のカスタムCSSを[列1のメイン要素]ボックスに追加します。

z-index: 999;

設定を保存する

行を複製して更新します

最初の行は以上です。 2番目の行を作成する時間を節約するには、作成した行を複製します。

複製された行設定を次のように編集します。

[詳細設定]タブの下…

列1のメイン要素のカスタムCSSを取り出し、列2のメイン要素ボックスに追加します。

z-index: 999;

画像は右側の列に表示されるため、左側をアニメーション化するテキストの上にその列を配置する必要があります。

設定を保存する

2行目の画像モジュールと召喚状モジュールを更新します

次に、画像モジュールを右の列にドラッグし、仕切りモジュールをドラッグして、アクションモジュールを呼び出して左の列にドラッグします。

このセクションの列構造は少し異なります。 [列構造の行の変更]アイコン（重複行アイコンの横）をクリックして、3分の2、3分の1の列レイアウトを選択します。

ここで行う必要があるのは、行内の各モジュールに再度アクセスして、いくつかの変更を加えることです。

まず、ディバイダーモジュールの設定を次のように更新します。

[デザイン]タブの下…

モジュールの配置：右
アニメーションの方向：左

設定を保存する

次に、召喚モジュールの設定を次のように更新します。

タイトル：「SpeaksForItself」
テキストの向き：右
ヘッダーテキストの配置：右
幅：700px（これを入力してください）
アニメーションの方向：左

設定を保存する

次に、右側の列のイメージモジュールを新しい790×880イメージで更新します。

セクション3は以上です。

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

デモのセクション4の構築

セクション4では、いくつかの高度なCSSトリックを使用して、イメージモジュールの設計を別のレベルに引き上げます。 また、テキストモジュールを積み重ねてヒンジで折りたたむことは、配信とうまく組み合わされます。 に飛び込みましょう。

Visual Builderを使用して、2列（1/2）行の通常のセクションを追加します。 最初のモジュールを追加する前に、セクションに背景色を追加しましょう。 クリックしてセクション設定を編集します。

[コンテンツ]タブで、[背景色]タブを選択し、色＃262938を入力します。

設定を保存する

最初のテキストモジュールを追加する

左側の列にテキストモジュールを追加し、次のようにテキスト設定を更新します。

[コンテンツ]タブの下…

コンテンツボックスのテキストタブに次のhtmlを入力します。

<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>

[デザイン]タブの下…

テキストの色：明るい
ヘッダーフォント：Playfair Display、太字（B）
ヘッダーフォントサイズ：38px
ヘッダー行の高さ：1.3em
カスタムマージン：20px下
アニメーション：折りたたむ
アニメーションの方向性：上

2番目のテキストモジュールを追加します

次に、現在のテキストモジュールのすぐ下に別のテキストモジュールを追加します。 次に、次のように設定を更新します。

[コンテンツ]タブの下…

内容：「Loremipsum dolor sit amet、consectetur adipiscingelit。 Phasellus bibendum est vitae felis rhoncusgravida。 Sed nec purus tempus、sagittis mi id、efficiturnisl。 Sed nec purus tempus、sagittis mi id、efficiturnisl。」

[デザイン]タブの下…

テキストの色：明るい
テキストフォントサイズ：18px
テキストテキストの色：rgba（255,255,255,0.66）
テキスト行の高さ：1.9em
カスタムマージン：40px下
アニメーションスタイル：折り
アニメーションの方向：下
アニメーションの遅延：150ms

設定を保存する

ボタンモジュールを追加する

最後のテキストモジュールの下にボタンモジュールを追加し、次のように設定を更新します。

ボタンテキスト：詳細
ボタンのURL：＃

ボタンにカスタムスタイルを使用する：はい

ボタンのテキストサイズ：15px
ボタンのテキストの色：＃01254c
ボタンの背景色：#ffffff
ボタンの境界線半径：0px
ボタンフォント：太字（B）、大文字（TT）

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

アニメーションスタイル：スライド
アニメーションの方向：下
アニメーション時間：1600ms
アニメーションの遅延：150ms
アニメーション強度：20％

設定を保存する

右の列に画像モジュールを追加

そのコラムは以上です。 次に、右側の列に画像モジュールを追加する必要があります。 次に、次のように設定を更新します。

[コンテンツ]タブの下…

画像のURL：[600×400の画像を挿入]

[デザイン]タブの下…

全幅を強制：はい

アニメーションスタイル：スライド
アニメーションの方向性：右
アニメーションの遅延：800ms
アニメーション強度：20％

設定を保存する

行設定を更新する

次に、クリックして行設定を編集し、以下を更新します。

[デザイン]タブの下…

カスタム幅を使用：はい
カスタム幅：1366px

カスタムパディング：上27px、右0px、下170px、左0px
列1のカスタムパディング：6％上位

[詳細設定]タブの下…

次のカスタムCSSを[列1のメイン要素]ボックスに追加します。

z-index: 999;

このcssの追加により、アニメーション中にテキストが画像の上に表示されたままになります。

次に、次のカスタムCSSを[列2のメイン要素]ボックスに追加します。

transform: scale(1.3);
transform-origin: top right;

このcssは、列2（画像）のすべてのサイズを拡大（拡大）するための巧妙な設計を追加します。 変換原点プロパティは、行の右上からスケーリングするように列に指示します。 これにより、左側のテキストと画像がわずかに重なります。

設定を保存する

行を複製して更新する

セクション3で行ったように、行を複製します。 行を複製した後、2つのテキストモジュールとボタンモジュールを左の列から右の列にドラッグします。 そして、画像モジュールを右の列から左にドラッグします。 今、私たちがする必要があるのは、複製された行とその内容にいくつかのマイナーな更新を加えることです。

まず、次のように行設定を更新しましょう。

[デザイン]タブの下…

カスタムパディング：上40px、右0px、下40px、左0px
列1のカスタムパディング：[デフォルトに戻す; 6％トップを消去]
列2カスタムパディング：6％上位

[詳細設定]タブの下…

列1のメイン要素ボックスと列2のメイン要素ボックスからカスタムCSSを消去します。 これは複製から引き継がれ、もう必要ありません。

イメージモジュールの更新

次に、イメージモジュール（現在は左側の列）を次のように更新します。

[コンテンツ]タブの下…

画像のURL：[新しい600×400の画像を挿入]

[デザイン]タブの下…

アニメーションの方向：左

[詳細設定]タブの下…

この画像がすでにぼやけていると思っていた場合。 もう一度考えてみて！ このぼかし効果を追加するために必要なのは、カスタムCSSの次の行を[メイン要素]ボックスに追加することだけです。

filter: blur(5px) opacity(.6);

ぼかし効果に加えて、このcssは、画像を60％の不透明度で半透明にします。

設定を保存する

右の列のテキストモジュールを更新

右の列に移動して、上部のテキストモジュールのコンテンツを短いh1ヘッダーで更新します。

<h1>Consectetur adipiscing elit</h1>

設定を保存する

そして出来上がり！ セクション4はすべて完了です。最終結果を確認しましょう。

ボーナス：簡単にインポートできるようにこれらのセクションをダウンロードしてください

ボーナス特典として、本日のチュートリアルに組み込まれているセクションを無料でダウンロードできるようにパッケージ化しました。このダウンロードは、以下のメールオプトインフォームを使用して入手できます。 メールアドレスを入力するだけで、ダウンロードボタンが表示されます。 すでにDiviニュースレターに参加している場合は、「再購読」について心配する必要はありません。 メールアドレスを再入力しても、メールアドレスが増えたり重複したりすることはありません。 ダウンロードが表示されるだけです。

楽しみ！

レイアウトパックをダウンロードする

無料でダウンロード

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

ダウンロード

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

これらのダウンロードを使用するには、ダウンロードフォルダーでAnimation_Effects_Part_2.zipというzipファイルを見つけることから始めます。 それを解凍して、次のインポートを表示します。

アニメーション効果パート2（セクション1）.json

アニメーション効果パート2（セクション2）.json

WordPress管理者で[Divi]> [Diviライブラリ]> [インポートとエクスポート]に移動します。 ポータビリティモーダルがポップアップしたら、[インポート]タブをクリックし、[ファイルの選択]というラベルの付いたボタンをクリックします。

好みのjsonファイルを選択し、「DiviBuilderレイアウトのインポート」をクリックします。 インポートが完了したら、上記のセクションのいずれかを追加する投稿またはページに移動します。

ビジュアルビルダーをアクティブにします。 上記のセクションのいずれかを追加するページの部分に移動します。 [新しいセクションを追加]アイコンをクリックすると、[ライブラリから追加]オプションが表示されます。 このオプションを選択し、必要なレイアウトを選択します。

まとめ

このセクションでは、炭水化物に少し腹を立てるだけでなく、画像を表示およびアニメーション化するための創造的な方法を紹介します。 また、遅延ボタンスライドでヒンジ上に折りたたまれたテキストモジュールは、ユーザーにCTAをクリックするようにさらに促します。

来る

このシリーズのパート3では、宣伝文句モジュールを設計およびアニメーション化するための美しい方法を紹介します。 このセクションレイアウトは、さまざまな目的に使用できます。 これは、あなたのサービスのプロセス、またはあなたのサービスや製品のリストを紹介する方法であることがわかります。

楽しみにしています。

以下のコメントで連絡することを忘れないでください！