Diviの3D空間で衝突するフローティングモジュールを作成する方法
公開: 2019-05-15Diviを使用して可能な新しいデザインを探索することは常に楽しいです。 そして今日は、Diviを使用して3D空間を探索します！ 技術的には、3D空間で衝突しているように見えるフローティングモジュールを設計する方法を検討します。 このデザインは、Webサイトにサービス、製品、またはリソースの「広がり」があることを示すことで、訪問者を驚かせる創造的な方法としてうまく機能します。
明らかに、このチュートリアルは、実際の宇宙探査がどのようなものであるかを私が想像するものとは比較されません。 しかし、うまくいけば、そこにいるDiviエクスプローラーは、途中でいくつかのことを学ぶかもしれません。
スニークピーク
これが私たちが一緒に構築するデザインのスニークピークです。
3D空間レイアウトで衝突するフローティングモジュールを無料でダウンロード
このチュートリアルで作成されたデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。
チュートリアルに行きましょう。
私たちのYoutubeチャンネルを購読する
既成のレイアウト入門
開始するには、Diviテーマがインストールされてアクティブになっていることを確認してください。 次に、新しいページを作成し、ページにタイトルを付けて、Divi Builderを（フロントエンドに）デプロイします。 「既成のレイアウトを選択する」オプションを選択します。 次に、ビデオゲームのランディングページのレイアウトを選択して、新しいページにインポートします。
デザインを先取りするために、デザインに使用する宣伝文を含む「ゲーム機能」というタイトルのセクションを使用します。 これが本当に必要な唯一のセクションなので、先に進んで、2行の宣伝文を除くすべてのセクションと行を削除します。
Diviの3D空間設計でのフローティング宣伝文の実装
宣伝文の最初の行を作成する
2行の宣伝文を含む既成のレイアウトのセクション内で、新しい1列の行を作成し、セクションの上部にドラッグします。
次に、Diviの複数選択機能（ctrl / cmdを押しながら各宣伝文を選択）を使用して、下の2列で5つの宣伝文を選択し、セクションの上部にある新しい1列の行にドラッグします。
これで、以下の既成のレイアウトに付属していた2つの行を削除できます。 その後、5つの宣伝文を含む1列の行が1つだけになるはずです。
セクションにパースペクティブを追加する
このデザインで探している3D効果を得るには、パースペクティブcssプロパティをセクションに追加する必要があります。 これにより、変換オプションを使用して行を回転するたびに、3Dパースペクティブが行に追加されます。
セクション設定を開き、次のカスタムCSSをメイン要素に追加します。
perspective: 1000px;
後で、パースペクティブ値を増減して、画面を見ているときに3D要素（この場合は行）をユーザーのパースペクティブに近づけたり遠ざけたりすることができます。
詳細については、Diviの変換オプションでパースペクティブがどのように機能するかを確認してください。
行のカスタマイズ
宣伝文のスタイリングを開始する前に、まず行の設定を構成しましょう。 この設計では、行レベルで変更する必要がある主なものが3つあります。
- 「display：flex」を使用して宣伝文を水平に揃える必要があります。 これにより、すべてのデバイスでデザインの一貫性と応答性が維持されます（タブレットや電話で機能しない5列のレイアウトを使用するのとは対照的です）。
- ガター幅を1に設定して、デフォルトの列マージンを削除する必要があります。
- X軸を中心に行を45度回転するには、transformrotateを使用する必要があります。 親（セクション）にperspectiveプロパティを追加すると、行とそのすべての要素に、探している3D効果があります。
行設定を開き、以下を更新します。
側溝幅：1
幅：80％（デスクトップ）、100％（タブレット）、100％（電話）
変換回転X軸：45度
列のメイン要素CSS：
display: flex; justify-content: center;
宣伝文のスタイルと間隔の調整
次に、宣伝文の内容とスタイルを少し調整します。
すべての宣伝文に同じカスタマイズを適用したいので、もう一度複数選択を使用してすべての宣伝文を選択し、要素設定モーダルを展開します。
まず、本文の内容を削除します。
次に、背景色を追加します。
背景色：rgba（20,241,217,0.16）
次に、次の間隔を更新します。
カスタムマージン（デスクトップ）：2vw右
カスタムマージン（タブレットと電話）：0vw右
カスタムパディング：上2％、下2％、左3％、右3％
次に、次のように境界線を追加します。
ボーダー幅：2px
ボーダーカラー：rgba（20,241,217,0.66）
この時点で、すべての宣伝文句にスタイリングが設定されています。 変換オプションを使用して、各宣伝文のスケールと位置を個別に変更する必要があります。これにより、宣伝文の3Dフローティング効果が追加されます。 ただし、その前に、行を複製して2番目の宣伝文の行を作成しましょう。
宣伝文の2行目を作成する
宣伝文の2番目の行を作成するには、カスタマイズした5つの宣伝文の行を複製するだけです。
衝突効果を作成するために、複製された行を反対方向（-45度）に回転させることができます。
複製された行を開き、以下を更新します。
変換回転X軸：-45度
上部と下部のセクションのパディングを増やす
この時点で、前面の宣伝文句がセクションの外側に広がっている可能性があります。 これを修正するには、セクションに次のパディングを追加します。
カスタムパディング：上15％、下15％
変換オプションを使用して、各宣伝文を個別にサイズ設定および配置します
この時点で、宣伝文句のそれぞれを3D空間で「浮かせる」方法を工夫する準備が整いました。 これを行うには、変換オプションを使用して、各ブラーを必要な場所に1つずつ正確にサイズ設定および配置します。 これを行うことにより、宣伝文は3D空間で異なる深さを持っているように見えます。
簡単にするために、一番上の行の左端の宣伝文（宣伝文＃1）から始まり、2番目の行の右端の宣伝文（宣伝文＃10）で終わる1から10までの宣伝文に番号を付けます。
ぼかし＃1
一番上の行の最初の宣伝文から始めましょう。 宣伝文の設定を開き、以下を更新します。
変換スケール（x軸とy軸）：90％
宣伝文＃2
宣伝文＃2の設定を開き、以下を更新します。
変換スケール（x軸とy軸）：80％
変換変換X軸：-10％
宣伝文＃3
変換スケール（x軸とy軸）：80％
変換変換X軸：20％
宣伝文＃4
変換スケール（x軸とy軸）：85％
変換変換X軸：-30％
宣伝文＃5
変換スケール（x軸とy軸）：60％
完了すると、最初の行は次のようになります。
2行目の左端にある宣伝文＃6から始めて、宣伝文6〜10の変換オプションのカスタマイズを続けます。
宣伝文＃6
変換スケール（x軸とy軸）：60％
変換変換X軸：-40％
変換変換Y軸：-20％
宣伝文＃7
変換スケール（x軸とy軸）：90％
変換変換X軸：20％
宣伝文＃8
変換スケール（x軸とy軸）：70％
変換変換X軸：-50％
宣伝文＃9
変換スケール（x軸とy軸）：80％
変換変換X軸：-20％
宣伝文＃10
変換スケール（x軸とy軸）：70％
変換変換X軸：-60％
次に、2番目の行が3D空間の最初の行と衝突したときにどのように見えるかを確認しましょう。
デザインを完成させるために、セクションに素敵な3D空間の背景画像を追加できます。 このチュートリアルで使用したビデオゲームのランディングページのレイアウトに付属している上部の背景画像を使用しています。
最終設計
それでは、3Dフローティングモジュールの最終的な設計を確認しましょう。
デスクトップ
タブレット
電話
5つの宣伝文が行全体に広がっているため、ビューポートの外側に伸びることなく5つの宣伝文すべてを合わせるのは少し難しいです。 これを修正するには、電話の各行の宣伝文句を非表示にするだけです。 または、電話で各宣伝文を小さいサイズにすることもできます。
最終的な考え
このチュートリアルが、3D空間で独自のフローティングモジュールを作成する方法についてのインスピレーションを与えてくれることを願っています。 実際に必要なのは、遠近法と変換オプションを使用して、モジュールの行全体を3Dで回転させるためのいくつかの手順です。 その後、各モジュールを配置して、好きな場所に浮かせることができます。
探索を楽しんでください。
コメントでお返事をお待ちしております。
乾杯！