Diviでコンテンツを強調するためにアニメーションのボーダーオーバーラップを作成する方法
公開: 2019-05-05ページの特定の部分にスポットライトを当てる独自の方法をお探しですか？ 読み続けてください！ 今日は、アニメーション化された境界線のオーバーラップを作成して、ページのコンテンツを強調表示する方法を紹介します。 App Developer Layout Packのランディングページに3つの異なるアニメーションの境界線のオーバーラップを作成しますが、この手法は、構築しているあらゆる種類のWebサイトに使用できます。 それは間違いなくあなたがあなたのページに余分な次元を追加するのを助けるでしょう。 このチュートリアルが、独自の代替アニメーションボーダーオーバーラップを作成するきっかけになることを願っています。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、3つの例すべての結果を簡単に見てみましょう。 小さい画面サイズでも同様の結果が期待できます。
例1
例2
例3
私たちのYoutubeチャンネルを購読する
App Developer LayoutPackのランディングページを使用して新しいページを作成する
最初に行う必要があるのは、App Developer LayoutPackのランディングページを使用して新しいページを作成することです。
クローンヒーローセクション
最初の2つの例は、ヒーローセクションで作成されています。 両方の例を再作成する場合は、ヒーローセクションのクローンを作成して、複製に移動して2番目の例を再作成できるようにすることをお勧めします。
例1を再作成する
ヒーローセクションに新しい行を追加
カラム構造
最初の例の再現を始めましょう！ 次の列構造を使用して、特殊セクションに新しい行を追加します。
テキストモジュールを追加
コンテンツボックスを空のままにします
新しいテキストモジュールを行に追加し、コンテンツボックスを空のままにしてください。 書かれたコンテンツを表示するのではなく、組み込みのデザインオプションにモジュールを使用しています。
間隔
テキストモジュールの間隔設定に移動し、カスタムの上部と下部のパディングを追加してモジュールに形状を付けます。 負の上部マージンも追加して、このモジュールと前のモジュールの間にオーバーラップを作成します。
- 上マージン：-480px
- トップパディング：223px
- ボトムパディング：223px
国境
次に、モジュールの境界線設定に移動し、選択した境界線を追加します。
- ボーダー幅：9px
- ボーダーカラー：＃0ae2ff
- ボーダースタイル：最初
ボックスシャドウ
ボックスシャドウも追加します。
- ボックスシャドウブラー強度：1px
- ボックスシャドウスプレッド強度：15px
- 影の色：rgba（10,226,255,0.59）
アニメーション
そして、アニメーション設定をいじって、コンテンツをポップにします。
- アニメーションスタイル：フリップ
- アニメーションの繰り返し：1回
- アニメーションの方向性：右
- アニメーション時間：1500ms
- アニメーションの遅延：1500ms
- アニメーション強度：500％
例2を再作成する
重複するヒーローセクションに新しい行を追加する
2番目の例に移ります！ 次の列構造を使用して、重複するヒーローセクションに新しい行を追加します。
テキストモジュール＃1を追加
コンテンツボックスを空のままにします
ここでも、空のテキストモジュールを使用しています。
間隔
間隔の設定に移動し、カスタムの上部と下部のパディングを使用してモジュールに形状を与えます。 負の上部マージンも追加して、前のモジュールとオーバーラップさせます。
- 上マージン：-480px
- トップパディング：223px
- ボトムパディング：223px
国境
テキストモジュールに境界線を追加して続行します。
- ボーダー幅：9px
- ボーダーカラー：＃0ae2ff
- ボーダースタイル：ダブル
アニメーション
そして、アニメーション設定をいじって、ローリング効果を作成します。
- アニメーションスタイル：ロール
- アニメーションの繰り返し：1回
- アニメーションの方向性：中央
- アニメーション時間：4500ms
- アニメーションの遅延：1500ms
- アニメーション強度：100％
- アニメーションの開始不透明度：100％
クローンテキストモジュール
最初のテキストモジュールの変更が完了したら、先に進んでクローンを作成します。
間隔を変更する
複製の設定を開き、間隔設定の上部マージン値を変更します。
- 上マージン：-495px
境界線を変更する
境界線の色も変更します。
- ボーダーカラー：#ededed
アニメーションの変更
そして、この投稿のプレビューで見た結果を達成するためにアニメーション設定を変更します。
- アニメーションの繰り返し：ループ
- アニメーション時間：5000ms
- アニメーションの遅延：2000ms
例3を再作成する
列2の画像モジュールの間隔を変更します
次の最後の例に移りましょう！ ページのプロセスセクションに移動し、中央に大きなイラストが含まれている画像モジュールに上部のパディングを追加します。
- 上マージン：70px（デスクトップ）、0px（タブレットと電話）
既存のテキストモジュールに背景色を追加する
続けて、1列目と3列目の各テキストモジュールに白い背景色を追加します。
- 背景色：#ffffff
列1にテキストモジュールを追加
コンテンツボックスを空のままにします
これで、最初のアニメーション化された境界線のオーバーラップの追加を開始できます。 新しいテキストモジュールを最初の列に追加し（印刷画面を参照）、コンテンツボックスを空のままにしてください。
間隔
次にテキストモジュールの間隔設定に移動し、カスタムマージンとパディング値を使用して形状とオーバーラップを作成します。
- 上マージン：-230px
- 左マージン：80px
- 右マージン：100px
- トップパディング：120px
- ボトムパディング：120px
国境
次に境界線を追加します。
- ボーダー幅：13px
- 境界線の色：＃bcf5f3
- ボーダースタイル：ダブル
アニメーション
共有しているコンテンツを強調するのに役立つ、選択したアニメーションを追加して続行します。
- アニメーションスタイル：折り
- アニメーションの繰り返し：1回
- アニメーションの方向性：右
- アニメーション強度：100％
Zインデックス
境界線がコンテンツの下に表示されるようにするために、境界線設定を含むテキストモジュールのZインデックスに負の値を使用します。
- Zインデックス：-1
テキストモジュールのクローンを作成し、列1の最後に配置します
テキストモジュールの作成と変更が完了したら、先に進んでクローンを作成します。 最初の列の最後に複製を配置します。
境界線を変更する
境界線の色を変更します。
- ボーダーカラー：＃ffc0ec
アニメーションの変更
また、アニメーションの遅延も追加します。
- アニメーションの遅延：1000ms
列3にテキストモジュールを追加
コンテンツボックスを空のままにします
3番目の列にテキストモジュールを追加して続行し（印刷画面を参照）、コンテンツボックスを空のままにしてください。
間隔
間隔の設定に移動し、カスタムのマージン値とパディング値を使用して形状とオーバーラップを作成します。
- 上マージン：-230px
- 左マージン：100px
- 右マージン：-80px
- トップパディング：120px
- ボトムパディング：120px
国境
次に、選択した境界線を追加します。
- ボーダー幅：13px
- ボーダーカラー：＃7479ff
- ボーダースタイル：ダブル
アニメーション
前の2つのテキストモジュールに与えられたものよりも高いアニメーション遅延を含むアニメーションとともに。
- アニメーションスタイル：折り
- アニメーションの繰り返し：1回
- アニメーションの方向：左
- アニメーションの遅延：2000ms
- アニメーション強度：100％
Zインデックス
負のZインデックスを使用して、モジュールがコンテンツの下に表示されることを確認します。
- Zインデックス：-1
テキストモジュールのクローンを作成し、列3の最後に配置します
テキストモジュールの追加と変更が完了したら、それを複製し、3行目の最後に複製を配置します。
境界線を変更する
複製の境界線の色を変更します。
- 境界線の色：＃b3d1ff
アニメーションの変更
アニメーションの遅延を追加すれば完了です。
- アニメーションの遅延：3000ms
プレビュー
すべての手順を完了したので、このチュートリアル全体で再作成した3つの例すべての結果を最後に見てみましょう。
例1
例2
例3
最終的な考え
この投稿では、アニメーションの境界線のオーバーラップを使用してコンテンツにスポットライトを当てる方法を紹介しました。 これは、ページの特定の部分に注意を引き、エレガントな方法でそれを行うための優れたテクニックです。 この手法は、構築しているあらゆる種類のWebサイトに使用できます。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！