Diviのアニメーションを使用してコンテンツを表示する

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

前回の投稿では、アニメーションデモページのセクション6を作成しました。 製品のダウンロードを明るい色、輝く影、正確なアニメーションで表示するためのレイアウトを設計する方法を紹介しました。

今日は、アニメーションデモページのセクション7を作成します。これは、ロールアニメーション効果を使用してコンテンツにリアルな動きを追加する方法の完璧な例です。 最終製品は、ページを下にスクロールすると、テキストや携帯電話がさまざまな角度からスライドして回転しているような印象を与えます。

これは私のお気に入りのアニメーションの1つです。 始めましょう。

これが、今日の投稿で構築するデザインとアニメーションの概要です。

デザイン要素の準備

このチュートリアルには3つの画像が必要です。 最初の2つの画像の垂直方向の画像は、反時計回りに10％の角度で約580×950回転する必要があります。 水平方向の画像は1250×608（反時計回りに10％回転）で、画像の右側に約300pxの余分な透明な背景スペースがあり、提供された列にうまく収まるようにする必要があります。 電話の画像が背景が透明なpng形式であることを確認してください。 これが今日の投稿に使用した画像です。

縦型電話画像＃1

縦型電話画像＃2

縦型電話画像＃3

Diviのアニメーションを使用してコンテンツを表示する

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

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

構築プロセスを開始する前に、ビジュアルビルダーを使用して作成する断面レイアウトのワイヤーフレームビューを垣間見ることができます。

Visual Builderを使用して、レイアウトに別の通常のセクションを追加することから始めましょう。 次に、3列（1 / 4、1 / 4、1 / 2）の行をセクションに追加します。

行設定を更新する

最初のモジュールを追加する前に、行の設定に移動して、以下を更新します。

[デザイン]タブの下…

カスタム幅を使用：はい
カスタム幅：91％
カスタムガター幅を使用：はい
側溝幅：1

列2カスタムパディング：5％上位
列3カスタムパディング：24％上位

画像＃1の追加

レイアウトの最初（左端）の列に、画像モジュールを追加し、次のように画像設定を更新します。

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

画像のURL：[画像＃1をアップロード]

[デザイン]タブの下…

全幅を強制：はい

アニメーションスタイル：ロール
アニメーションの方向性：右
アニメーション強度：16％
アニメーションの開始不透明度：100％

設定を保存する

DividerおよびCalltoActionモジュールを使用したアニメーションテキストの追加

次に、中央（4分の1）の列に移動します。ここで、仕切りモジュールを使用して、テキストの上に短い仕切り線を追加します。

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

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

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

仕切りを表示：はい

[デザイン]タブの下…

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

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

設定を保存する

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

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

タイトル：「1000ワード」
ボタンテキスト：「詳細」
内容：「Loremipsum dolor sit amet、consectetur adipiscingelit。 Phasellus bibendum est vitae felis rhoncusgravida。 Sed nec purus tempus、sagittismiid。」
リンク： ＃
背景色を使用：いいえ

[デザイン]タブの下…

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

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

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

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

設定を保存する

画像＃2の追加

次に、作成したCall toActionモジュールの下にImageモジュールを追加します。 次のように画像設定を更新します。

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

画像のURL：[画像＃2をアップロード]

[デザイン]タブの下…

全幅を強制：はい

アニメーションスタイル：ロール
アニメーションの方向：左
アニメーション強度：13％
アニメーションの開始不透明度：100％

画像＃3を追加

2番目（中央）の列は以上です。 次に、3番目（右端）の列に画像＃3を追加しましょう。 これを行うには、2番目の列の下部に追加した画像モジュールを複製/コピーして、3番目の列に貼り付けます。 アニメーションのスタイルは同じであるため、新しい画像モジュール用に更新する必要があるのは、実際の画像のURLだけです。

仕切りと召喚状モジュールを複製してカスタマイズする

3列目の複製画像に新しい画像URLを追加したら、2列目の上部に作成したDividerモジュールとCall to Actionモジュールの両方を複製/コピーし、画像の下に2つのモジュールをドラッグアンドペーストします。 3列目の＃3。

Divider Moduleの場合、[デザイン]タブの[アニメーションの方向]設定を[左]に変更します。

新しいCallto Actionモジュールについては、先に進んで次の設定を更新してください。

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

タイトル：新しい構築方法

[デザイン]タブの下…

カスタムパディング：右80px、下80px、左80px

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

それでは、最終結果を確認しましょう…

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

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

楽しみ！

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

無料でダウンロード

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

ダウンロード

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

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

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

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

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

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

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

まとめ

このレイアウトは、実行するのが少し難しいです。 ただし、適切な画像と適切な間隔を取得すると、アニメーションによってレイアウト全体がうまくまとめられます。 電話の画像のリアルなローリングは、ページを下にスクロールすると、誰かが白いテーブル上で画像をスライドさせてビューに表示しているように見えます。 このロールアニメーションの例は間違いなく際立っています。

来る

次の投稿では、パート6でシリーズを締めくくります。スライドアニメーションをいくつかのカスタム画像とcssで使用して、料理レシピを紹介するための見事なレイアウトを作成する方法を紹介します。 ただし、同じレイアウトを調整して、さまざまな注目アイテムに使用することができます。

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