Diviを使用して各コンテナの美しいアニメーションアウトラインを作成する方法
公開: 2019-08-22Diviのアニメーションオプションは、カスタムコードを必要とせずに、大量のWebサイトに命を吹き込むのに役立ちました。 内蔵のアニメーション設定は高度に調整可能であり、本当にユニークなデザインを作成することができます。 たとえば、実行できることの1つは、アニメーション化されたコンテナのアウトラインを作成することです。 それがまさにこの投稿でお見せするものです。 各コンテナに境界線を追加し、各要素のフローに一致するアニメーション設定を追加します。 JSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、すべての画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
アニメーションのアウトラインレイアウトを無料でダウンロード
無料のアニメーションアウトラインレイアウトを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
私たちのYoutubeチャンネルを購読する
再作成を始めましょう
新しいセクションを追加
背景色
作業中のページに新しい通常のセクションを追加することから始め、白い背景色を使用します。
- 背景色：#FFFFFF
間隔
[デザイン]タブに移動し、カスタムの余白とパディングの値を追加します。
- トップマージン：3vw
- 下マージン：3vw
- 左マージン：3vw
- 右マージン：3vw
- トップパディング：3vw
- ボトムパディング：3vw
国境
次に境界設定を開き、各コーナーに「2vw」を追加します。 ボーダーも使用してください。
- ボーダー幅：1px
- ボーダーカラー：＃000000
アニメーション
カスタムアニメーションも追加します。
- アニメーションスタイル：スライド
- アニメーションの方向：下
- アニメーションの開始不透明度：100％
可視性
セクションコンテナを超えるものがないことを確認するために、セクションの可視性設定でオーバーフローを非表示にします。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、それに応じてサイズ設定を変更します。
- カスタムガター幅を使用：はい
- 側溝幅：2
- 幅：94％
- 最大幅：100％
間隔
次に、いくつかのカスタムパディング値を追加します。
- トップパディング：3vw
- ボトムパディング：3vw
- 左パディング：3vw
- 右パディング：3vw
国境
境界線の設定に移動し、各コーナーに「2vw」を追加します。 境界線も追加します。
- ボーダー幅：1px
- ボーダーカラー：＃000000
アニメーション
また、行にアニメーションを追加しています。
- アニメーションスタイル：スライド
- アニメーションの方向性：上
- アニメーションの遅延：500ms
- アニメーションの開始不透明度：100％
可視性
また、列のアニメーション（後で追加します）が機能することを確認するために、行のオーバーフローを表示します。
- 水平方向のオーバーフロー：目に見える
- 垂直オーバーフロー：目に見える
列1の設定
最初の列の設定を開いて続行します。
国境
[デザイン]タブに移動し、各コーナーに「2vw」を追加して、境界線を使用します。
- ボーダー幅：1px
- ボーダーカラー：＃000000
アニメーション
カスタムアニメーションを追加して、列の設定を完了します。
- アニメーションスタイル：スライド
- アニメーションの方向：下
- アニメーションの遅延：1000ms
- アニメーションの開始不透明度：100％
列1に宣伝文モジュールを追加する
コンテンツを追加する
モジュールの追加を開始する時が来ました！ 最初に必要なのは宣伝文句です。 お好みのコンテンツを入力してください。
アイコンを選択
次にアイコンを選択します。
アイコン設定
[デザイン]タブに移動し、それに応じてアイコン設定を変更します。
- アイコンの色：＃000000
- アイコンの配置：上
- アイコンのフォントサイズを使用：はい
- アイコンのフォントサイズ：6vw（デスクトップ）、8vw（タブレット）、10vw（電話）
タイトルテキスト設定
タイトルテキストの設定も変更します。
- タイトルフォント：ポピンズ
- タイトルフォントの太さ：超太字
- タイトルテキストの配置：中央
- タイトルテキストサイズ：1.2vw（デスクトップ）、2.5vw（タブレット）、3vw（電話）
本文の設定
本文の設定とともに。
- ボディフォント：Open Sans
- 本文の配置：中央
- 本文のサイズ：0.8vw（デスクトップ）、1.7vw（タブレット）、2.3vw（電話）
間隔
さまざまな画面サイズにカスタム間隔値を追加して、宣伝文モジュールの周囲にスペースを作成します。
- トップマージン：3vw
- 下マージン：3vw
- 左マージン：3vw
- 右マージン：3vw
- トップパディング：10vw（デスクトップ）、18vw（タブレットと電話）
- 下部のパディング：10vw（デスクトップ）、18vw（タブレットと電話）
- 左パディング：2vw（デスクトップ）、8vw（タブレットと電話）
- 右パディング：2vw（デスクトップ）、8vw（タブレットと電話）
国境
境界線の設定に移動し、各コーナーに「2vw」を追加して境界線を使用します。
- ボーダー幅：1px
- ボーダーカラー：＃000000
アニメーション
カスタムアニメーションを追加して、宣伝文モジュールのデザインを完成させます。
- アニメーションスタイル：スライド
- アニメーションの方向：下
- アニメーション時間：1300ms
- アニメーションの遅延：1200ms
- アニメーション強度：60％
- アニメーションの開始不透明度：100％
- アイコンアニメーション：アニメーションなし
ボタンモジュールを列1に追加
コピーを追加
次の最後のモジュールであるボタンモジュールに進みます。 お好みのコピーを入力してください。
配置
[デザイン]タブに移動して、配置を変更します。
- ボタンの配置：中央
ボタンの設定
次にボタンの設定を変更します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：0.8vw（デスクトップ）、1.5vw（タブレット）、2.2vw（電話）
- ボタンのテキストの色：＃000000
- ボタンの背景色：#FFFFFF
- ボタンの境界線の幅：1px
- ボタンの境界線の色：＃000000
- ボタンの境界半径：50vw
- ボタンフォント：Sansを開く
- ボタンのフォントの太さ：超太字
- ボタンのフォントスタイル：大文字
間隔
また、さまざまな画面サイズのカスタム間隔値を使用してボタンモジュールを形成します。
- トップマージン：-5vw（デスクトップ）、-6.5vw（タブレット）、-7vw（電話）
- 下マージン：2vw（デスクトップ）、3vw（タブレットと電話）
- トップパディング：1vw（デスクトップ）、2vw（タブレットと電話）
- 下部のパディング：1vw（デスクトップ）、2vw（タブレットと電話）
- 左パディング：5vw（デスクトップ）、8vw（タブレットと電話）
- 右パディング：5vw（デスクトップ）、8vw（タブレットと電話）
アニメーション
カスタムアニメーションを追加して、ボタンモジュールのデザインを完成させます。
- アニメーションスタイル：スライド
- アニメーションの方向性：上
- アニメーションの遅延：1400ms
- アニメーション強度：200％
- アニメーションの開始不透明度：100％
列2を削除し、列1をクローンします
列1とその中のモジュールを完了したら、2番目の（空の）列を削除して、最初の列のクローンを作成できます。 すべての宣伝文モジュールのコンテンツをWebサイトに一致するように変更すれば、完了です。
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviのアニメーション設定を、Diviが提供するさまざまなコンテナとその境界設定と組み合わせて使用する方法を示しました。 このチュートリアルが、このテクニックの独自のバリエーションを作成するきっかけになることを願っています。 ご不明な点がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。