変換されたモーションシェイプをDiviで背景として使用する方法
公開: 2020-05-07Diviの新しいスクロール効果は、Webデザイン体験を次のレベルに簡単に引き上げるために作られています。 もちろん、セクション内の要素に直接適用することもできますが、基になる要素にモーションを追加することもできます。 基礎となるアプローチを採用することで、背景の動きを続けながらコンテンツを静的に保つことができます。 このチュートリアルでは、変換されたモーションシェイプを基になる要素として使用して、アニメーションセクションを作成します。 2つの異なる例を扱いますが、可能性は本当に無限大です。 JSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
例1
デスクトップ
モバイル
例2
デスクトップ
モバイル
変換されたモーションシェイプレイアウトを無料でダウンロード
自由に変形されたモーションシェイプのレイアウトに手を置くには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
一般的な手順
新しいセクションを追加
グラデーションの背景
作業中のページに新しいセクションを追加することから始めます。 セクション設定を開き、グラデーションの背景を適用します。
- 色1：#ffffff
- 色2：＃97c6fc
- グラデーションタイプ：線形
- 勾配方向：306度
- 開始位置：50％
- 終了位置：50％
間隔
セクションの[デザイン]タブに移動し、いくつかのカスタムマージンとパディング値を使用します。
- 左マージン：4％
- 右マージン：4％
- トップパディング：11％
- ボトムパディング：11％
ボックスシャドウ
微妙なボックスシャドウも使用しています。
- ボックスシャドウブラー強度：80px
- 影の色：rgba（0,0,0,0.1）
- ボックスシャドウの位置：外側のシャドウ
可視性
そして、オーバーフローを非表示に設定して、セクションの設定を完了します。 これにより、変換されたモーションシェイプを追加するときに、セクションコンテナを超えないようになります。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、サイズ設定で最大幅を変更します。
- 最大幅：1580px
列1の間隔
最初の列の間隔設定にもいくつかの上部パディングを追加しています。
- トップパディング：9％
テキストモジュール＃1を列1に追加します
H2コンテンツを追加する
行の設定が完了したら、列1のテキストモジュールから始めて、モジュールを追加します。選択したH2コンテンツをいくつか追加します。
H2テキスト設定
モジュールの[デザイン]タブに移動し、それに応じてH2テキスト設定を変更します。
- 見出し2フォント：Abril Fatface
- 見出し2のテキストの色：＃7206a0
- 見出し2テキストサイズ：80px（デスクトップ）、65px（タブレット）、50px（電話）
テキストモジュール＃2を列1に追加します
テキスト設定
前のテキストモジュールのすぐ下に、選択した説明コンテンツを含む別のテキストモジュールを追加します。
テキスト設定
モジュールのテキスト設定を次のように変更します。
- テキストフォント：Open Sans
- テキストの色：＃7206a0
- テキスト行の高さ：2em
ボタンモジュールを列1に追加
コピーを追加
列1に必要な最後のモジュールは、ボタンモジュールです。 お好みのコピーを入力してください。
ボタンの設定
次に、[デザイン]タブに移動し、それに応じてボタンのスタイルを設定します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：20px
- ボタンのテキストの色：#ffffff
- ボタンの背景色：＃077bff
- ボタンの境界線の幅：0px
- ボタンフォント：Abril Fatface
間隔
いくつかのカスタムパディング値も追加しています。
- トップパディング：20px
- ボトムパディング：20px
- 左パディング：50px
- 右パディング：50px
列2に画像モジュールを追加します
画像をアップロード
行の2番目の列で、必要なモジュールは画像モジュールのみです。 お好みのイラストをアップロードしてください。 このチュートリアルで使用したものとまったく同じものを使用する場合は、この投稿の冒頭でダウンロードできたダウンロードフォルダーにあります。
配置
次にモジュールのデザインタブに移動し、画像の配置を変更します。
- 画像の配置：右
サイジング
さまざまな画面サイズで幅を変更して、モジュール設定を完了します。
- 幅：100％（デスクトップ）、50％（タブレットと電話）
例1を再作成する
列1の先頭にテキストモジュールを追加
すべての通常のモジュールが配置されたら、変換されたモーションシェイプを追加します。 最初の列の上部に新しいテキストモジュールを追加して、最初の例を再作成します。 コンテンツボックスは空のままにします。
グラデーションの背景
次に、グラデーションの背景をモジュールに追加します。
- 色1：rgba（255,255,255,0）
- 色2：＃00fff6
- グラデーションタイプ：線形
- 勾配方向：306度
- 開始位置：54％
- 終了位置：54％
サイジング
サイズ設定も変更します。
- 幅：165％
- 高さ：270％
間隔
次に、間隔設定に移動し、いくつかのカスタム間隔値を使用します。
- 下マージン：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- トップパディング：29％
- ボトムパディング：29％
変換回転
次にモジュールを回転させます。
- 左：270度
トランスフォームスキュー
変換スキュー値も適用します。
- 下：16度
- 右：16度
ポジション
次に、[詳細設定]タブに移動し、次のように位置設定を変更します。
- 位置：絶対
- 場所：左上
- 垂直オフセット：-50％
- 水平オフセット：-50％
垂直モーションスクロール効果
次に、垂直方向の動きから始めて、スクロール効果を追加します。
- 垂直モーションを有効にする：はい
- 開始オフセット：4
- ミッドオフセット：0（50％）
- 終了オフセット：-4
水平モーションスクロール効果
また、水平方向のモーションも追加して、モジュールの設定を完了します。
- 水平方向の動きを有効にする：はい
- 開始オフセット：4
- ミッドオフセット：0（50％）
- 終了オフセット：-4％
例2を再作成する
列1の先頭にテキストモジュールを追加
代わりに2番目の例を再作成しますか？ 最初の列の上部にテキストモジュールを追加します。
背景色
モジュール設定を開き、背景色を適用します。
- 背景色：＃00fff6
サイジング
モジュールの[デザイン]タブに移動し、サイズ設定を変更します。
- 幅：165％
- 高さ：270％
間隔
いくつかのカスタム間隔値も追加しています。
- 下マージン：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- トップパディング：29％
- ボトムパディング：29％
スキューを回転させる
そして、変換設定で変換スキュー効果を適用します。
- 右：-54度
ポジション
次に、[詳細設定]タブに移動して、モジュールの位置設定を変更します。
- 位置：絶対
- 場所：左上
- 垂直オフセット：-50％
- 水平オフセット：-50％
垂直モーションスクロール効果
次に、スクロール効果を追加します。 いくつかの垂直方向の動きから始めます。
- 垂直モーションを有効にする：はい
- 開始オフセット：4
- ミッドオフセット：0（50％）
- 終了オフセット：-4
水平モーションスクロール効果
また、水平方向のモーションも追加して、モジュールの設定を完了します。
- 水平方向の動きを有効にする：はい
- 開始オフセット：4
- ミッドオフセット：0（50％）
- 終了オフセット：-4
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
例1
デスクトップ
モバイル
例2
デスクトップ
モバイル
最終的な考え
この投稿では、変形したモーションシェイプをセクションデザインにクリエイティブに追加する方法を紹介しました。 基になる変換されたモーションシェイプは、セクションデザインに微妙なアニメーションを追加するのに役立ちます。 JSONファイルも無料でダウンロードできました！ ご不明な点がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。