DiviでCSSシェイプを作成およびアニメーション化する方法を探る

WebデザインでCSSを使用して形状を作成することは、決して新しい概念ではありません。 実際、CSSシェイプを作成する従来の方法は、CanvasやSVGなどの他のHTMLグラフィックソリューションによって大きく影が薄くなっています。 ただし、CSSシェイプ（少なくとも基本的なシェイプ）は作成がはるかに簡単であり、Webデザインで重要な役割を果たすことができます。 さらに、これらの形状にスクロールアニメーションを追加すると、まったく新しいデザイン要素が出現する可能性があります。

このチュートリアルでは、DiviでCSSシェイプを作成およびアニメーション化する方法について説明します。 Diviの組み込みオプションを使用していくつかの形状を作成する方法の基本概念を理解したら、これらの形状をアニメーション化して、Webサイトに固有のスクロールアニメーションデザインを作成できます。 あなたはあなたがどれだけできるかに驚くでしょう！

始めましょう。

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

Diviでアニメーションを使用してCSSシェイプを作成する方法を探る

行と列の構造

まず、セクションに3分の1、3分の2の列行を追加します。

他の作業を行う前に、行の設定を開き、以下を更新します。

• 側溝幅：1
• 列の高さを等しくする：はい
• 幅：95％
• 最大幅：900px

注：これらの設定は、デザインのセットアップに不可欠です。 たとえば、3分の1の2/3の列構造と、マージンのない最大幅900pxの行（ガター幅1）を組み合わせると、左側の列の幅が正確に300pxになることがわかります。 さらに、この300px幅の列にデザインを含めておけば、タブレットやモバイルデバイスでも見栄えがすることを確信できます。

Divider ModuleSpacerの追加

次に、仕切りを追加して、CSS形状を含む列に必要な間隔を作成します。

この時点で、レイヤービューモーダルを開いて、DiviBuilderの設定メニューにあるレイヤー/モジュールを管理する必要があります。

仕切りの設定を開き、次のように仕切りの高さを更新します。

• 仕切りを表示：いいえ
• 高さ：150px

CSSシェイプは絶対的に配置されるため、仕切りの高さを調整することで、列領域の実際の間隔を簡単に調整できます。 個人的には、これは列の高さや間隔を操作するよりも簡単だと思いました。 さらに、追加のデザイン要素（または形状）として仕切りをスタイリングするという追加のボーナスが得られます。 今のところ、これは将来のCSSシェイプデザインのキャンバスと考えることができます。

ボーダーオプションを使用して最初のCSSシェイプを作成する

CSSシェイプを作成するには、仕切りモジュールを使用します。 技術的には、モジュール領域ではなく、モジュールを囲む境界線のみを使用しています。 （したがって、テキストモジュールやコードモジュールなどの他のモジュールを使用することもできます）。

CSSシェイプを作成するには、以前に作成した仕切りモジュールを複製します。

次に、次のようにそれぞれを0pxに設定して、仕切りモジュールの高さと幅を取り出します。

• 幅：0px
• 高さ：0px

最初の形状では、右上を指す直角三角形を作成します。 これを行うには、次のように仕切りの境界線のスタイルを更新します。

• ボーダーカラー：rgba（245,44,143,0.5）
• 上枠幅：150px
• 左ボーダー幅：150px
• 左ボーダーカラー：透明

注：境界線の色を半透明にすると、追加のデザイン要素の重なり合う形状を明らかにするのに役立ちます。

後で簡単に識別できるように、この新しい仕切りに「形状1」のラベルを付けることもお勧めします。

作成する追加のシェイプにスクロールアニメーションを追加するので、このシェイプ（およびこの列の追加のシェイプ）に絶対位置を指定して、それらが互いに重なり合うようにすることが重要です。アニメーションの同じ開始点。

[詳細設定]タブで、位置を絶対位置に変更し、デフォルトの位置位置を右上に設定したままにします。

• 位置：絶対
• 位置位置：右上（デフォルト）

注：中央揃えを追加する他の場所（上部中央、中央など）は、後でCSSシェイプに追加する変換オプションと競合するため、位置の場所を右上に保つことが重要です。

CSSトライアングルの作成おめでとうございます！ これ自体はそれほど印象的ではありませんが、良くなります。 この三角形を複製して、アニメーションで移動すると、あらゆる種類の新しいデザインを作成できます。

スクロールアニメーションでシェイプ2を作成する

次の形状（この場合は三角形）を作成するには、前の仕切りモジュール（形状1）を複製して、前の三角形の形状の真上にある同一の右上の三角形を追加します。

次に、「形状2」というラベルを付けます。

「シェイプ2」ディバイダーの設定を開き、次の回転変換効果を追加します。

• スクロール変換効果：回転
• 回転を有効にする：はい
• 先発投手：0°（30％）
• 中回転：45°（45％）
• 終了回転：90°（60％）

スクロールアニメーションでシェイプ3を作成する

「シェイプ2」ディバイダーモジュールを複製し、複製した「シェイプ3」にラベルを付けます。

次に、変換回転設定を次のように更新します。

• 中回転：90°
• 終了回転：180°

最終（4番目）の形状を作成するには、形状3の仕切りモジュールを複製し、「形状4」というラベルを付けます。

次に、変換回転設定を次のように更新します。

• 中回転：180°
• 終了回転：270°

この時点で、重なり合って回転した三角形によって作成された正方形が表示されます。

スクロールアニメーションのテスト

これらの形状のスクロールアニメーションをテストするために、セクションの上部と下部に一時的なマージンを追加しましょう。 セクション設定を開き、以下を更新します。

• マージン：上80vh、下80vh

ページを上下にスクロールすると、次のようになります。

これらの形状アニメーションをカスタマイズする新しい方法を検討する前に、右の列にモックタイトルを付けてデザインを補足します。 形状の設計を続行する場合は、この手順をスキップしてください。

右側の列にモックタイトルを追加する（オプション）

これらのアニメーション化された形状デザインをページでどのように使用できるかを理解するために、右側の列にモックタイトルを追加することをお勧めします。 これは、CSSシェイプを使用して、ページセクションのタイトルを魅力的なデザインアニメーションで補完する方法の優れた例です。

列カスタムCSS

タイトルを追加する前に、display flexプロパティを使用して、テキストが列内で垂直方向の中央に配置されていることを確認できます。 列2の設定を開き、次のカスタムCSSをメイン要素に追加します。

display:flex;
flex-direction:column;
align-items:center;

列CSSを配置したら、新しいテキストモジュールを列2に追加します。

次に、テキスト設定を開き、次のようにh2見出しで本文のコンテンツを更新します。

<h2>elegant design</h2>

[デザイン]タブで、以下を更新します。

• 見出し2フォント：ポピンズ
• 見出し2テキストの配置：デフォルト（デスクトップ）、中央（タブレットと電話）
• 見出し2テキストサイズ：55px（デスクトップ）、45px（タブレット）、35px（電話）
• 幅：100％

その間に、次のスクロール変換「水平モーション」効果をテキストに追加します。

• スクロール変換効果：水平方向の動き
• 水平モーションを有効にする：はい
• 開始オフセット：2（20％）
• ミッドオフセット：1（35％）
• 終了オフセット：-0.6

次に、レスポンシブタブを開き、次のように終了オフセットを更新します。

• 終了オフセット（タブレットと電話）：0

右上の三角形のアニメーションを探索する

タイトルテキストを追加する前に中断したところから続けて、現在の右上三角形のデザイン/アニメーションの可能性を探ることができます。

これを行う簡単な方法の1つは、multiselectを使用して4つのCSSシェイプ（仕切りモジュールで構築）をすべて選択することです。

次に、形状の1つの設定を開いて、4つのモジュールすべての設計を一度に更新する要素設定モーダルを表示し、結果を視覚的に確認できるようにします。

次に、[デザイン]タブを選択し、[変換原点]タブを開きます。 レイヤービューモーダルと要素設定モーダルを左側に配置して、DiviBuilderで変更を視覚的に確認できるようにします。

上向き三角形のCSS形状デザインアニメーションの探索

セットアップが完了したので、新しいシェイプの作成を検討し、現在のスクロールアニメーションが配置された状態でそれらがどのように見えるかを確認できます。

この次の例では、上向きの三角形（技術的には二等辺三角形）のCSS形状を作成します。

これを行うには、必ずすべての形状を複数選択し、次のようにそれぞれの境界線スタイルを更新してください。

• 右ボーダー幅：100px
• 右ボーダーカラー：透明
• 下の境界線の幅：100px
• 下の境界線の色：rgba（245,44,143,0.5）
• 左ボーダー幅：100px
• 左ボーダーカラー：透明

Transform Originを更新して、新しいスクロールアニメーションデザインを探索する

少し新しい形状/三角形が配置されたので、結果の回転アニメーションも異なります。 さまざまなスクロールアニメーションデザインの可能性を探るには、複数選択を使用して4つの形状すべてを選択したままにし、変換の原点を調整して結果を表示します。

ティアドロップCSSシェイプデザインアニメーションの探索

これで、このプロセスがどのように機能するかを理解できるはずです。 この次のデザインでは、境界線の半径を持つ右下の三角形を作成することで実行できるティアドロップ形状を作成します。

これを行うには、必ずすべての形状を複数選択し、次のようにそれぞれの境界線スタイルを更新してください。

• 丸みを帯びた角：0px右上、50％右上、50％右下、50％左下
• 下の境界線の幅：150px
• 下の境界線の色：rgba（245,44,143,0.5）
• 左ボーダー幅：150px
• 左ボーダーカラー：透明

次に、変換原点の値を調整して、ティアドロップのスクロールアニメーションデザインを調べます。

セクター（またはピザスライス）のCSS形状デザインアニメーションの探索

これで、このプロセスがどのように機能するかを理解できるはずです。 この次のデザインでは、境界半径を持つ右下の三角形を作成することで実行できるセクター形状を作成します。

これを行うには、必ずすべての形状を複数選択し、次のようにそれぞれの境界線スタイルを更新してください。

• 丸みを帯びた角：右上0px、右上0px、右下50％、左下50％
• 右ボーダー幅：75px
• 右ボーダーカラー：透明
• 下の境界線の幅：75px
• 下の境界線の色：rgba（245,44,143,0.5）
• 左ボーダー幅：75px
• 左ボーダーカラー：透明

次に、変換の原点を調整して、さまざまなスクロールアニメーションのデザインを調べます。

台形CSS形状デザインアニメーションの探索

最終的なCSS形状の設計では、上向き（または二等辺三角形）の三角形に幅を追加できる台形のCSS形状を作成します。

これを行うには、必ずすべての形状を複数選択し、次のようにそれぞれの境界線スタイルを更新してください。

• 丸みを帯びた角：0px
• 右ボーダー幅：100px
• 右ボーダーカラー：透明
• 下の境界線の幅：100px
• 下の境界線の色：rgba（245,44,143,0.5）
• 左ボーダー幅：100px
• 左ボーダーカラー：透明

次に、シェイプ/モジュールの幅を次のように更新します。

• 幅：100px

台形の形状が整ったら、もう一度、それぞれの変換原点の更新を使用して、新しいスクロールアニメーションデザインを探索できます。

最終結果

このチュートリアルを使用して可能な私のお気に入りのデザインのいくつかを最後に見てみましょう。

最終的な考え

DiviでCSSシェイプを作成およびアニメーション化する方法を探求することは、Diviの組み込みの設計機能の力の視野を広げるときに、これらの創造的なジュースを流すための優れた方法です。 秘訣は、境界線を使用してさまざまな形状を作成する方法を理解することです。 次に、それらの図形にスクロールアニメーションを追加できます。 ただし、これらのアニメーションが各シェイプを配置する方法を変更する変換原点の力を忘れないでください。 もちろん、これは、ウェブサイトの無限のクリエイティブなデザインを作成するために組み合わせることができるすべてのさまざまな形やアニメーションを考えるときの氷山の一角です。

うまくいけば、これはあなた自身のサイトに完璧なCSSシェイプアニメーションを追加する方法に関するいくつかのアイデアをあなたに与えるでしょう。

コメントでお返事をお待ちしております。

乾杯！