シングルエレメントローダー：3D化！

私たちのこのXNUMX番目で最後の記事のために 単一要素ローダーの小さなシリーズ、3Dパターンを調べます。 3D要素を作成する場合、立方体のXNUMXつの面すべてのようなものをシミュレートするには、XNUMXつのHTML要素だけで十分であるとは想像しがたいです。 しかし、多分私たちはもっとキューブで逃げることができます-ような 代わりに、形状の前面のXNUMXつの側面のみを表示します。これは完全に可能であり、それが私たちが一緒に行うことです。

スプリットキューブローダー

これは、立方体が3つの部分に分割されているが、単一の要素のみで作成されているXNUMXDローダーです。

立方体の各半分は、疑似要素を使用して作成されます。

かっこいいですよね？ CSSで円錐曲線を使用できます clip-path 要素の ::before & ::after 3D立方体のXNUMXつの可視面をシミュレートするための疑似。 負のマージンは、XNUMXつの疑似をまとめてオーバーラップさせ、完全な立方体をシミュレートするものです。 残りの作業は、ほとんどの場合、これらXNUMXつの半分をアニメーション化して、見栄えの良いローダーを取得することです。

この立方体のような要素を作成するために使用されるクリップパスポイントの背後にある数学を説明するビジュアルをチェックしてみましょう。

変数と方程式があるので、それらを機能させましょう。 まず、変数を設定し、メインのサイズを設定します .loader 素子：

.loader { --s: 150px; /* control the size */ --_d: calc(0.353 * var(--s)); /* 0.353 = sin(45deg)/2 */ width: calc(var(--s) + var(--_d)); aspect-ratio: 1; display: flex;
}

これまでのところ、あまりにもクレイジーなことはありません。 私たちは 150px 柔軟なコンテナとして設定された正方形。 ここで、疑似を確立します。

.loader::before,
.loader::after { content: ""; flex: 1;
}

それらはXNUMXつの半分です .loader 容器。 それらをペイントする必要があるので、それが私たちの場所です 円錐勾配 キックイン：

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}

グラデーションはありますが 変に見えます。 必要がある 要素にクリップします:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0); clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}

XNUMXつの半分が 負のマージン:

.loader::before { margin-right: calc(var(--_d) / -2);
} .loader::after { margin-left: calc(var(--_d) / -2);
}

それでは、それらを動かしてみましょう！

.loader::before,
.loader::after { /* same as before */ animation: load 1.5s infinite cubic-bezier(0, .5, .5, 1.8) alternate;
} .loader::after { /* same as before */ animation-delay: -.75s
} @keyframes load{ 0%, 40% { transform: translateY(calc(var(--s) / -4)) } 60%, 100% { transform: translateY(calc(var(--s) / 4)) }
}

これが最後のデモです。

プログレスキューブローダー

同じ手法を使用して、3Dプログレスローダーを作成しましょう。 はい、まだXNUMXつの要素だけです！

ローダーの高さとアスペクト比を変更する以外は、以前と同じように立方体をシミュレートする限り、変更はありません。 私たちが作成しているアニメーションは、左側の幅を更新し、右側が残りのスペースを埋めるという驚くほど簡単な手法に依存しています。 flex-grow: 1.

最初のステップは、を使用して右側に透明度を追加することです opacity:

これは、立方体の一方の側が塗りつぶされ、もう一方の側が空であるという効果をシミュレートします。 次に、左側の色を更新します。 これを行うには、円錐曲線内のXNUMXつの色を更新するか、背景色を追加して更新します。 background-blend-mode:

.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply;
}

このトリックでは、色をXNUMX回だけ更新できます。 ローダーの右側は、円錐曲線のXNUMXつの白の色合いに溶け込み、XNUMXつの色の値しか使用していなくても、XNUMXつの新しい色合いの色を作成します。 色のトリック！

ローダーの左側の幅をアニメートしましょう。

おっと、アニメーションは最初は少し奇妙です！ キューブの外でどのように開始するかに注意してください。 これは、アニメーションを開始しているためです。 0% 幅。 しかし、 clip-path 私たちが使用している負のマージン、代わりに私たちがする必要があるのは私たちの --_d 変数を定義するために使用しました clip-path ポイントと負のマージン：

@keyframes load { 0%, 5% {width: var(--_d); } 95%, 100% {width: 100%; }
}

それは少し良いです：

ただし、このアニメーションをさらにスムーズにすることができます。 少し足りないことに気づきましたか？ 最終的なデモが最後のデモとどのように見えるかを比較するためのスクリーンショットを示します。

立方体の底面です！ XNUMX番目の要素は透明なので、左の例に示すように、その長方形の底面を確認する必要があります。 微妙ですが、そこにあるはずです！

メイン要素にグラデーションを追加して、疑似で行ったようにクリップすることができます。

background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat;

すべてがまとめられた後の完全なコードは次のとおりです。

.loader { --s: 100px; /* control the size */ --_d: calc(0.353*var(--s)); /* 0.353 = sin(45deg) / 2 */ height: var(--s); aspect-ratio: 3; display: flex; background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat; clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}
.loader::before,
.loader::after { content: ""; clip-path: inherit; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}
.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply; margin-right: calc(var(--_d) / -2); animation: load 2.5s infinite linear;
}
.loader:after { flex: 1; margin-left: calc(var(--_d) / -2); opacity: 0.4;
} @keyframes load { 0%, 5% { width: var(--_d); } 95%, 100% { width: 100%; }
}

それでおしまい！ 疑似要素、円錐曲線、クリッピング、背景ブレンディング、および負のマージンを使用する巧妙な手法を使用して、XNUMXつではなく、 2 マークアップに要素が3つしかない見栄えの良いXNUMXDローダー。

もっと3D

さらに進んで、3つの要素を使用して無限の数のXNUMXDキューブをシミュレートすることができます—はい、それは可能です！ 立方体のグリッドは次のとおりです。

このデモと次のデモは、執筆時点ではSafariではサポートされていません。

クレイジーだよね？ 今、私たちは単一の要素を使用して作られた立方体の繰り返しパターンを作成しています…そして疑似もありません！ 私たちが使用している数学については詳しく説明しませんが（そこには非常に具体的な数値があります）、ここでどのようにしてここに到達したかを視覚化するための図を示します。

最初に使用します conic-gradient 繰り返しキューブパターンを作成します。 パターンの繰り返しは、次のXNUMXつの変数によって制御されます。

• --size：その名の通り、これは各キューブのサイズを制御します。
• --m：これは列の数を表します。
• --n：これは行数です。
• --gap：これは立方体間のギャップまたは距離です

.cube { --size: 40px; --m: 4; --n: 5; --gap :10px; aspect-ratio: var(--m) / var(--n); width: calc(var(--m) * (1.353 * var(--size) + var(--gap))); background: conic-gradient(from -90deg at var(--size) calc(0.353 * var(--size)), #249FAB 135deg, #81C5A3 0 270deg, #26609D 0) /* update the colors here */ 0 0 / calc(100% / var(--m)) calc(100% / var(--n));
}

次に、同じサイズの別のパターンを使用してマスクレイヤーを適用します。 これは、このアイデアの最も難しい部分です。 の組み合わせを使用して linear-gradient フォルダーとその下に conic-gradient 要素のいくつかの部分を切り取って、立方体の形状だけが見えるようにします。

.cube { /* etc. */ mask: linear-gradient(to bottom right, #0000 calc(0.25 * var(--size)), #000 0 calc(100% - calc(0.25 * var(--size)) - 1.414 * var(--gap)), #0000 0), conic-gradient(from -90deg at right var(--gap) bottom var(--gap), #000 90deg, #0000 0); mask-size: calc(100% / var(--m)) calc(100% / var(--n)); mask-composite: intersect;
}

コードは少し複雑に見えるかもしれませんが、CSS変数のおかげで、キューブのマトリックスを制御するためにいくつかの値を更新するだけです。 10⨉10グリッドが必要ですか？ を更新します --m & --n 変数 10。 キューブ間にもっと広いギャップが必要ですか？ を更新します --gap 価値。 色の値はXNUMX回だけ使用されるため、新しいカラーパレットに更新してください。

別の3Dテクニックができたので、それを使用して、さまざまなアニメーションで遊んでローダーのバリエーションを作成しましょう。 たとえば、左から右に無限にスライドする立方体の繰り返しパターンはどうですか？

このローダーは、XNUMX行にXNUMXつのキューブを定義します。 それは私たちの --n 値は 4 & --m 等しい 1 。 言い換えれば、私たちはもはやこれらを必要としません！

代わりに、 --size & --gap グリッドコンテナ内の変数：

.loader { --size: 70px; --gap: 15px; width: calc(3 * (1.353 * var(--size) + var(--gap))); display: grid; aspect-ratio: 3;
}

これが私たちのコンテナです。 立方体はXNUMXつありますが、一度にXNUMXつだけコンテナに表示したいので、XNUMXつはスライドアウトするので、常にXNUMXつはスライドインします。 そのため、幅を次のように因数分解しています。 3 アスペクト比をに設定します 3 同様に。

立方体のパターンがXNUMXつの立方体の幅に設定されていることを確認しましょう。 コンテナでこれを行います ::before 疑似要素:

.loader::before { content: ""; width: calc(4 * 100% / 3); /* Code to create four cubes */
}

XNUMXつの立方体のコンテナにXNUMXつの立方体ができたので、グリッドコンテナの最後に立方体のパターンを揃えてオーバーフローさせ、最後のXNUMXつの立方体を表示できます。

.loader { /* same as before */ justify-content: end;
}

これまでのところ、グリッドコンテナの境界を示す赤いアウトラインがあります。

これで、アニメーションを追加して、疑似要素を右に移動するだけです。

@keyframes load { to { transform: translate(calc(100% / 4)); }
}

アニメーションのコツはわかりましたか？ 溢れ出る立方体のパターンを非表示にし、マスキングのタッチを追加して、開始と終了のフェージング効果を作成することで、これを終了しましょう。

.loader { --size: 70px; --gap: 15px; width: calc(3*(1.353*var(--s) + var(--g))); display: grid; justify-items: end; aspect-ratio: 3; overflow: hidden; mask: linear-gradient(90deg, #0000, #000 30px calc(100% - 30px), #0000);
}

変数を導入することで、これをより柔軟にすることができます。 --n、コンテナに一度に表示されるキューブの数を設定します。 また、パターン内のキューブの総数はXNUMXつ多いはずです。 --n、それを次のように表現できます calc(var(--n) + 1).

これが完全なことです：

OK、もう3つのXNUMXDローダーは似ていますが、スライドする代わりに立方体の色が連続して変化します。

アニメーションの背景に依存します background-blend-mode これについて：

.loader { /* ... */ background: linear-gradient(#ff1818 0 0) 0% / calc(100% / 3) 100% no-repeat, /* ... */; background-blend-mode: multiply; /* ... */ animation: load steps(3) 1.5s infinite;
}
@keyframes load { to { background-position: 150%; }
}

前の例と同じレイアウトを作成するために使用された余分なコードを削除しましたが、3つではなくXNUMXつのキューブを使用しています。 ここで追加しているのは、プログレスバーのXNUMXDローダーで以前に行ったように、円錐曲線とブレンドする特定の色で定義されたグラデーションです。

そこから、背景のグラデーションをアニメーション化します background-position 立方体を一度にXNUMX色ずつ点滅させるXNUMXステップのアニメーションとして。

私が使用している値に精通していない場合 background-position と背景の構文、私は強くお勧めします 私の以前の記事のXNUMXつ のと1 私のスタックオーバーフローの答え。 そこには非常に詳細な説明があります。

キューブの数を更新して変数にすることはできますか？

はい、あります そのための解決策、でもここに埋め込むのではなく、ひびを入れてほしい。 前の例から学んだことを取り入れて、これでも同じことを試みてください。それから、コメントであなたの仕事を共有してください！

バリエーション豊富！

このシリーズの他の3つの記事と同様に、独自のローダーを作成するためのインスピレーションをいくつか残したいと思います。 これは、私たちが一緒に作成したXNUMXDローダーと、想像力をかき立てるための他のいくつかのローダーを含むコレクションです。

おしまいです

ここ数週間、私と一緒に単一要素ローダーの作成に時間を費やして楽しんでいただけたと思います。 一見シンプルなスピナーから始めて、徐々に新しいピースを追加して、マークアップで3つの要素しか使用しないXNUMXDテクニックに至るまで作業を進めていったのはクレイジーです。 これは、CSSの能力を活用したときのCSSの外観とまったく同じです。つまり、スケーラブルで、柔軟性があり、再利用可能です。

この小さなシリーズを読んでくれてありがとう！ 私が持っていることをあなたに思い出させることによってサインオフします 500以上のローダーのコレクション より多くのアイデアやインスピレーションを探しているなら。

---

シングルエレメントローダー：3D化！ 最初に公開された CSSトリック。 あなたがすべき ニュースレターを入手する.

• コインスマート。 ヨーロッパで最高のビットコインと暗号通貨取引所。
• Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 出入り自由。
• CryptoHawk。 アルトコインレーダー。 無料トライアル。
• ソース：https：//css-tricks.com/single-element-loaders-going-3d/