Diviでアニメーションの背景色を作成する方法
公開: 2019-06-01Diviのアニメーションオプションは、すでに美しいページを魅力的なページにすばやく変えることができます。 これまでに、Diviが提供するさまざまなデザイン要素に組み込まれているさまざまなアニメーションに慣れてきました。 しかし、これらのアニメーションを使用して、1つの特定のデザインオプションを強調することもできることをご存知ですか？
このチュートリアルでは、アニメーションの背景色の作成に焦点を当てます。 目的の結果を達成するために、背景色にディバイダーモジュールを使用し、その上にテキストモジュールを配置します。 このチュートリアルが、今後のWebデザインプロジェクトにアニメーションの背景色を追加するきっかけになることを願っています。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
アニメーションの背景色レイアウトを無料でダウンロード
無料のアニメーション背景色レイアウトに手を置くには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
再作成を始めましょう！
私たちのYoutubeチャンネルを購読する
新しいセクションを追加
間隔
最初に行う必要があるのは、作業中のページに新しいセクションを追加することです。 セクション設定を開き、いくつかのカスタムパディング値を追加します。
- トップパディング：5vw
- ボトムパディング：17vw
新しい行を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行の設定を開き、行が画面の幅全体を占めるようにします。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 幅：100％
- 最大幅：100％
Divider Module＃1を列に追加します
可視性
Divider Moduleから始めて、必要なさまざまなモジュールの追加を開始します。 このディバイダーモジュールは、背景色、サイズ、アニメーションに使用されます。 [仕切りを表示]オプションが無効になっていることを確認してください。
- 仕切りを表示：いいえ
背景色
背景設定に移動し、次の背景色を追加します。
- 背景色：＃212121
間隔
間隔の設定に移動し、ビューポートの高さの単位を使用してモジュールに目的の形状を与えます。
- トップパディング：30vh
- ボトムパディング：30vh
アニメーション
アニメーションの遅延を伴うカスタムアニメーションを追加することで、背景色をアニメーション化できるようにしています。
- アニメーションスタイル：スライド
- アニメーションの繰り返し：1回
- アニメーションの方向性：右
- アニメーションの遅延：1000ms
- アニメーション強度：88％
- アニメーションの開始不透明度：100％
テキストモジュール＃1を列に追加
コンテンツを追加する
次に必要なモジュールはテキストモジュールです。 選択したH2と段落のコンテンツをいくつか追加します。
テキスト設定
次に、テキスト設定に移動し、それに応じて値を変更します。
- テキストフォント：Didact Gothic
- テキストの色：#ffffff
- テキストサイズ：1.1vw（デスクトップ）、1.7vw（タブレット）、2.5vw（電話）
- テキスト行の高さ：2.1em
- テキストの向き：正当化
デフォルトの見出し2のテキスト設定
次に、H2テキスト設定にいくつかの変更を加えます。
- 見出し2フォント：Abril Fatface
- 見出し2のテキストの色：＃1c1c1c
- 見出し2テキストサイズ：3vw（デスクトップ）、5vw（タブレット）、7vw（電話）
- 見出し2行の高さ：1.8em
見出し2のテキスト設定にカーソルを合わせる
ホバー時のテキストの色も変更しています。
- 見出し2のテキストの色：#ffffff
両方のモジュールのクローンを作成する
両方のモジュールの追加とカスタマイズが完了したら、それらのクローンを作成できます。 この投稿の次のステップでは、4つのモジュールすべてを変更して、両側から来る背景色のアニメーションを作成します。 また、テキストモジュールに重なりを追加して、仕切りモジュールとテキストモジュールが同じコンテナ内に作成されているように見せます。
DividerModuleDuplicateを変更する
背景色を変更する
複製したディバイダーモジュールを開き、背景色を変更します。
- 背景色：＃0bbfa1
アニメーションの変更
背景アニメーションを反対側から表示するために、アニメーションの方向を変更しています。 また、目的の結果を達成するために、わずかに高いアニメーション遅延を追加します。
- アニメーションの方向：左
- アニメーションの遅延：1500ms
テキストモジュールの複製を変更する
コンテンツの変更
複製したテキストモジュールを開いて内容を変更して続行します。
見出し2のテキスト設定を変更する
[デザイン]タブに移動し、H2テキスト設定も変更します。
- 見出し2テキストの配置：右
- 見出し2のテキストの色：＃0cc9ad
ディバイダーポジショニング
仕切りモジュール＃1
最初のディバイダーモジュールの右側に空白が表示されるようにするために、ビューポート幅の単位を使用して右マージンを追加します。
- 右マージン：20vw
仕切りモジュール＃2
2番目のDividerModuleも開き、同じスペースを占有できるようにしますが、代わりにページの左側に配置します。
- トップマージン：2vw
- 左マージン：20vw
オーバーラップを追加
テキストモジュール＃1
行内のすべてのモジュールをカスタマイズしたので、最初のテキストモジュールから始めてオーバーラップの作成を開始できます。 次のカスタムマージン値をモジュールの間隔設定に追加します。
- トップマージン：-49vh
- 右マージン：20vw（デスクトップ）、15vw（タブレット）、10vw（電話）
テキストモジュール＃2
複製するテキストモジュールにも、次のカスタムマージン値を使用します。
- トップマージン：-49vh
- 左マージン：20vw（デスクトップ）、15vw（タブレット）、10vw（電話）
VisualBuilderを終了して結果を表示します
オーバーラップを作成したら、結果を表示するためにVisualBuilderを終了する必要があります。
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
私たちは常にあなたがウェブデザインの限界を押し広げ、美しく魅力的なウェブサイトを作成するのを助ける方法を探しています。 この投稿では、さまざまなデザイン要素とオーバーラップをクリエイティブに組み合わせて、アニメーションの背景色を作成しました。 これは、作業中のページに次元を追加し、Webサイトを現在のデザイントレンドに完全に一致させるための優れた方法です。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。