Diviの新しいアニメーション効果の使用方法

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

アニメーションはページに命を吹き込むことができます。 効果的に行われた場合、ユーザーはエンゲージメントを高め、ページのコンテンツを探索する傾向が強くなります。 うまく行かないと、アニメーションはユーザーの気を完全にそらし、失望の状態でユーザーを追い払う可能性があります。 アニメーションの速度、タイミング、および強度はすべて、ユーザーがページを下にスクロールするときのこの動きのシンフォニーで重要な役割を果たします。

Diviの高度なアニメーション機能を使用すると、Webサイトの任意の要素にアニメーションを追加できます。 また、これらのアニメーション要素を組み合わせて、セクションを生き生きとさせる無数の動きの組み合わせを作成できます。

このシリーズのパート1では、ビジュアルビルダーを使用して、Diviのアニメーション機能の力を紹介するライブデモページの最初の2つのセクションを構築およびアニメーション化する方法を紹介します。

始めましょう。

これが、このシリーズで構築するものの概要です。

シリーズのパート1

セクション1

第2節

シリーズのパート2

セクション3

セクション4

シリーズのパート3

セクション5

シリーズのパート4

セクション6

シリーズのパート5

セクション7

シリーズのパート6

セクション8

セクション9

デザイン要素の準備

最初のセクションでは、2つの画像が必要になります。 1つ目は、約1280×800のサイズのフルスクリーン背景画像です。 これが私が使っているものです：

2番目の画像は、同じ画像を編集したもので、垂直方向に反転し、下に向かってフェードアウトしています。 この2番目の画像は、メインの見出しの背景として機能し、約800×400になるはずです。

逆さまの画像を作成するには、プレビューで画像を開いて[ツール]> [垂直方向に反転]を選択するか、Photoshopで画像を開き、[画像]> [画像の回転]> [キャンバスを垂直方向に反転]を選択します。 画像の下部にフェードアウト効果を追加するために、サイズが800px、硬度が0％のブラシモードで消しゴムツールを使用しました。 次に、Shiftキーを押しながら、ブラシを下端に沿ってドラッグしました。

必ずpngファイルとしてエクスポートしてください。

Photoshopをお持ちでない場合は、gimpshopなどの無料の写真編集ソリューションを試して、同じデザイン編集の多くを実行できます。 写真編集ソフトウェアの使用方法がわからない場合（そしてこの時点で学習する必要がない場合）は、今のところ2番目の画像を省略しておくか、下の画像を使用してください（クリックしてドラッグしてください）。デスクトップ）。

2番目のセクションでは、2つの画像が必要になります。 最初はこのように730×490くらいになるはずです。

そして、2番目は以下のように約525×660になるはずです。

アニメーション用語を理解する

まだ読んでいない場合は、先に進んで、高度なアニメーションを紹介する機能更新の投稿を読んでください。 投稿の最後に、ニックはビルダー全体にある各アニメーション機能の有用な定義/説明を提供します。 これらのアニメーション機能が実際に何をするかを理解することは、作成プロセスにとって重要です。

これらのアニメーション機能が何であるかを理解したら、詳しく見ていきましょう。

Diviの新しいアニメーション効果の使用方法

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

新しいページ設定を追加する

WordPressダッシュボードから、[ページ]> [新規追加]に移動します。 次に、ページにタイトルを追加します。 次に、ページの右上にあるボックスでDiviページ設定を見つけ、ドットナビゲーションを「オン」に選択します。 [ページ属性]ボックスで、ページテンプレートとして[空白ページ]を選択します。 最後に、[Divi Builderを使用]ボタンをクリックし、VisualBuilderを展開してレイアウトの作成を開始します。

構築セクション1：フルスクリーンヘッダーのデザインとアニメーション

このヘッダーセクションは、全画面に設定された全幅ヘッダーモジュールのように動作します。 つまり、サイトが読み込まれると、ウィンドウのサイズに関係なく、セクションはブラウザウィンドウの幅と高さ全体に表示されます。 ただし、全幅ヘッダーモジュールを使用する代わりに、標準セクションを使用して高さを100vhに設定します。 そうすれば、その中にテキストモジュールを追加できます。

Visual Builderを使用して、ビルダーの起動時にデフォルトですでに表示されている標準セクションのセクション設定をクリックして編集します。 以下を更新します。

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

背景画像：[1280×800の背景画像を入力してください]
視差効果を使用する：はい
視差法：真の視差

[デザイン]タブの下…

カスタムパディング：上5％、右0px、下5％、左0px

[詳細設定]タブの下…

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

min-height: 100vh

この1行のcssは、ビューポートの高さの100％を表示するようにセクションに指示します。

設定を保存する

次に、1列の構造を行に挿入し、テキストモジュールを列に追加します。 テキストモジュールの設定を次のように更新します。

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

コンテンツボックス内に「Divi」という単語を追加するだけです。

[デザイン]タブの下…

テキストフォント：Oswald、大文字（TT）
テキストフォントサイズ：14px
テキストテキストの色：＃08408e
テキスト文字の間隔：1.5em（これを入力する必要があります）
テキストの向き：中央
カスタムマージン：2％
アニメーションスタイル：フリップ
アニメーションの繰り返し：1回
アニメーションの方向性：右
アニメーション時間：2000ms
アニメーションの遅延：1100ms
アニメーション強度：100％
アニメーションの開始不透明度：0％
アニメーション速度曲線：イーズインアウト

タイムアウト…この類似のアニメーションを手動で追加するのに必要なものを示すために、少し一時停止しましょう。

アニメーションに必要なインラインスタイルのHTMLは次のとおりです。

<div class="et_animated flipLeft" style="position: absolute; animation-duration: 2000ms; animation-delay: 1100ms; opacity: 0; animation-timing-function: ease-in-out; transform: perspective(2000px) rotateY(-90deg);">
<div style="position:relative;">Divi</div>
</div>

そして、アニメーションに必要なCSSは次のとおりです。

@keyframes et_pb_flipLeft {
    from {
        transform-origin: center
    }

    to {
        opacity: 1;
        transform: rotateY(0)
    }
}

.et_animated.flipLeft {
    animation-name: et_pb_flipLeft
}

.et_animated {
    animation-fill-mode: both!important;
}

また、これには、ブラウザウィンドウに表示されたときにアニメーションをアクティブ化するために必要なコードは含まれていません。 とにかく、これらの組み込みのアニメーション機能があると言うことはすべて、大幅な時間の節約になります。 また、アニメーションオプションを編集しながらアニメーションをライブで見ることができるのは、かなりのボーナスです。

それでは、テキストモジュール設定の更新を続けましょう。

[詳細設定]タブの下…

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

text-indent: 1.5em

設定を保存する

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

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

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

<p><span>Believing</span><br />is  Seeing</p>

[デザイン]タブの下…

テキストの色：明るい
テキストフォント：Oswald、大文字（TT）
テキストフォントサイズ：8vw（これを入力する必要があります。これにより、フォントサイズはビューポート幅の8％になります）
テキストテキストの色：rgba（255,255,255,0.79）
テキスト行の高さ：1.4em
テキストの向き：中央
アニメーションスタイル：折り
アニメーションの方向性：上
アニメーション時間：1800ms
アニメーションの遅延：0ms
アニメーション強度：60％

設定を保存する

このアニメーション効果は、一見平らな位置から折りたたむ（または立てる）ことで、メインの見出しを明らかにします。 メインの見出しテキストが完成したので、逆さまの背景画像を行に追加しましょう。

次に、作成した2つのテキストモジュールを含む行の行設定に移動し、次のように設定を更新します。

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

背景画像：[800×440の画像を挿入]
背景画像サイズ：フィット
背景画像の位置：上部中央
背景画像の繰り返し：繰り返しなし

[デザイン]タブの下…

カスタム幅を使用：はい
単位： ％
カスタム幅：50％
カスタムパディング：上12％、右0％、下5％、左0％
アニメーションスタイル：スライド
アニメーションの方向性：上
アニメーションの遅延：300ms
アニメーション強度：20％

このアニメーション効果は、まるで山の後ろから立ち上がっているかのように、画像を上にスライドさせます。

最初のセクションは以上です。 最終的なデザインとアニメーションをチェックしてみましょう。

ここでの3つのアニメーション要素には、行（上にスライド）、「Believeing is Seeing」（中央から折りたたまれている）というテキストのテキストモジュール、「Divi」（遅延）というテキストのテキストモジュールが含まれます。他の要素が停止した後、右に開いて開きます）。 この組み合わせは、目的を持ってタイムリーにさまざまなコンテンツを公開することで、訪問者を本当に引き付けます。

建物セクション2

アニメーションデモページのこの2番目のセクションでは、ページのコンテンツを表示するための微妙でありながら非常にクールな方法を紹介します。 実際、一目ですべての動きを認識することはほとんど不可能です。

2番目のセクションを作成するには、前のセクションの下に通常のセクションを追加します。 このセクションで、2列（1/2）の行を追加します。

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

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

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

<h1>Time is money</h1>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit pretium felis, sit amet sollicitudin eros dignissim at. Cras molestie nisl enim.</span></p>

[デザイン]タブの下…

テキストの色：明るい
テキストフォント：Montserrat
テキストフォントサイズ：18px
テキスト行の高さ：1.8em
ヘッダーフォント：Montserrat、太字（B）、大文字（TT）
ヘッダーフォントサイズ：39px（デスクトップ）
ヘッダー行の高さ：2.2em
マージンボトム：50px
アニメーションスタイル：スライド
アニメーションの方向性：上
アニメーション強度：10％

このアニメーション効果は、テキストのブロックを上にスライドさせて表示します。

設定を保存する

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

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

ボタンテキスト：詳細
ボタンのURL：＃（またはあなたが望むものなら何でも）

[デザイン]タブの下…

ボタンの配置：左
テキストの色：明るい
ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：15px
ボタンの境界半径：0
ボタンの文字間隔：3px
ボタンフォント：Montserrat、太字（B）、大文字（TT）
ボタンアイコンを表示：はい
カスタムパディング：上10px、右30px、下10px、左30px
アニメーションスタイル：スライド
アニメーションの方向：下
アニメーションの遅延：100ms
アニメーション強度：10％

上記の前のテキストの効果を相殺するために、このアニメーション効果では、ボタンを少し遅らせてスライドさせて表示します。

現在、白い背景に白いテキストであるため、テキストとボタンはまだ表示されていません。 大丈夫。 間もなく背景を追加します。

次に、右側の列にディバイダーモジュールを追加します。

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

[デザイン]タブの下…

高さ：260px

[詳細設定]タブの下…

デスクトップでの可視性を無効にする

ここに仕切りを追加すると、モバイルデバイスで背景画像が表示されたままになります。

設定を保存する

次に、各列に背景を追加しましょう。 行設定に移動し、以下を更新します。

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

列1の背景グラデーションの色：＃fe8840、rgba（238,78,78,0.9）
列1の勾配方向：135度
列2の背景画像：[730×490の画像を入力してください]
列2の背景画像の位置：左上
列2背景画像の繰り返し：繰り返しなし

[デザイン]タブの下…

カスタム幅を使用：はい
カスタム幅：1366px
カスタムガター幅を使用：はい
側溝幅：1
列の高さを等しくする：はい
カスタムパディング：0px上、0px右、0px下、0px左
列1のカスタムパディング：上5％、右7％、下5％、左7％
アニメーションスタイル：折り
アニメーションの方向性：上
アニメーション時間：800ms

このアニメーション効果は、列を折りたたむ（または立てる）ことで列全体を表示します。

[詳細設定]タブの下…

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

box-shadow: -20px 0px 60px -20px rgba(255, 130, 65, 0.88);

設定を保存する

次に、作成を終えた行の下に2列（1 / 3、2 / 3）の行を追加します。

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

[デザイン]タブの下…

高さ：400px

[詳細設定]タブの下…

デスクトップでの可視性を無効にする

ここに仕切りを追加すると、モバイルデバイスで背景画像が表示されたままになります。

設定を保存する

時間を節約するには、先に進んで右クリックし、「TimeisMoney」というテキストを含む上の行の左側の列にあるテキストモジュールをコピーします。 次に、それを下の行の右側（3分の2）の列に貼り付けます。

新しいテキストモジュール設定を次のように更新します。

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

コンテンツボックスでh1ヘッダーテキストを「プロのように通勤」に変更します。

[デザイン]タブの下…

テキストテキストの色：＃a8a8a8
ヘッダーテキストの色：＃414159
アニメーションスタイル：スライド
アニメーションの方向：下
アニメーション強度：10％

このアニメーション効果は、テキストを下にスライドさせて表示することにより、テキストのブロックを明らかにします。

次に、上の行の左側の列にあるボタンモジュールを右クリックしてコピーし、編集が終了したテキストモジュールの下に貼り付けます。

ボタンモジュールの設定を次のように更新します。

ボタンのテキストの色：＃ff4823
ボタンの境界線の色：＃ff4823
ボタンホバーテキストの色：＃ff2323

設定を保存する

最後のステップとして、以下を更新して行設定を編集します。

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

背景色：#ffffff
列1の背景画像：[525×660の画像を挿入]
列1の背景画像の位置：左上
列1の背景画像の繰り返し：繰り返しなし
列2の背景グラデーションの色：rgba（255,255,255,0.91）、＃ffffff
列2の勾配方向：135度

[デザイン]タブの下…

カスタム幅を使用：はい
カスタム幅：1040px
カスタムガター幅を使用：はい
側溝幅：1
列の高さを等しくする：はい
カスタムパディング：0px上、0px右、0px下、0px左
列2のカスタムパディング：上5％、右7％、下5％、左7％
アニメーションスタイル：折り
アニメーションの方向：下
アニメーション時間：800ms

このアニメーション効果は、行を折りたたんで表示することにより、行全体を表示します。

[詳細設定]タブの下…

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

box-shadow: 0 40px 90px -35px rgba(0,0,0,.3);

このセクションは以上です。 結果を確認してください。

このセクションのアニメーションとデザイン要素は微妙なので、ほとんどのページで使用できる種類のデザインとアニメーションの良い例だと思います。 後ろから本が開いているのを見るように、上段と下段が開きます。 テキストとボタンは、上の行で少し上に移動し、下の行で下に移動します。 素晴らしい組み合わせ。

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

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

楽しみ！

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

無料でダウンロード

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

ダウンロード

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

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

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

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

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

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

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

まとめ

これらの2つのセクションが、Diviのアニメーション機能を使用した将来のビルドのインスピレーションとして役立つことを願っています。 デザインコンセプトだけでも素晴らしく、レイアウトはわずかな調整を加えるだけでどのWebサイトにも簡単に適合させることができます。 このシリーズではさらに多くのことを取り上げますので、ご期待ください。

来る

このシリーズの次のパートでは、アニメーションデモページのセクション3と4を作成して、Diviの高度なアニメーション機能の調査を続けます。

これがあなたが構築することを期待できるものです。

セクション3：

セクション4：

以下にコメントを残してください。

乾杯！