TANを使用したCSSのタイプキャストとビューポートの遷移（atan2（））

CSSはビューポートの長さを取得することができ、時間をたどることができます...（ノートを表示）... 2013！驚くべきことに、それは10年以上前でした。最近では、ViewPortの幅を取得することは100vwを書くのと同じくらい簡単ですが、これはピクセルで何を意味しますか？パーセンテージ、角度、または整数をとるものなど、他のプロパティはどうですか？

画面サイズに基づいて要素の不透明度を変更したり、回転させたり、アニメーションの進行状況を設定したりすることを検討してください。まず、ビューポートが整数として必要です - これは現在CSSでは不可能ですよね？

次に話したいのは、ジェーン・オリインが2023年に驚くほど説明した画期的な発見ではありません。要するに、tan()およびatan2()三角関数を含む奇妙なトリック（または属性）を使用して、長さ（ビューポートなど）タイプを整数に変換することができます。これにより、の多くの新しいレイアウトの可能性が開かれますが、私の最初の経験は、年鑑のエントリを書くときであり、画像の不透明度を応答したかっただけです。

CODEPENのサイズを変更します。画面サイズが小さくなると、画像がより透明になり、もちろんいくつかの境界があります。

これは私たちができる最も簡単な方法ですが、それ以上あります。たとえば、このデモンストレーションを行うために、多くのビューポート関連の効果を組み合わせようとしました。デモのサイズを変更すると、ページは活力に満ちています。オブジェクトの動き、背景の変更、テキストラップがスムーズにラップされます。

私はそれが本当にクールだと思いますが、私はデザイナーではないので、それは私の脳が考えることができる最善の方法です。ただし、これはこのタイプの変換技術を導入するには少し多すぎるかもしれませんので、中間地面として、タイトル変換にのみ焦点を当てて、すべてがどのように機能するかを示します。

設定

その背後にあるアイデアは、

を使用してラジアン（角度を書き込む方法）に

に変換し、

を使用して元の値に戻すことです。利点は、整数として表示されることです。次のように実装する必要があります：

atan2() 100vwしかし！ブラウザはこのアプローチをあまりサポートしていないため、すべてのブラウザで機能させるには、より多くのラッピングが必要です。以下は魔法（またはナンセンス）のように見えるかもしれないので、ジェーンの記事を読んでそれをよりよく理解することをお勧めしますが、すべてのブラウザで動作するようにします。 tan()

あまり心配しないでください。重要なのは、ビューポートサイズを整数として保存する貴重な

<code>:root {
  --int-width: tan(atan2(100vw, 1px));
}</code>

変数です！

幅：1つの数字がすべて

<code>@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

:root {
  --100vw: 100vw;
  --int-width: calc(10000 * tan(atan2(var(--100vw), 10000px)));
}</length></code>

を支配します

整数としてのビューポートがありますが、これが最初のステップにすぎません。この整数はそれ自体があまり役に立ちません。次のようなものに変換する必要があります。

• 異なる属性には異なるユニットと
があります
• 各属性を開始値から最終値に変更する必要があります。

画像の不透明度が0から1に変化すること、オブジェクトが0DEGから360DEGに回転するか、0％から100％の要素の変更を回転させます。これらの値が大きくなるにつれてこれらの値を補間したいと考えていますが、今では0〜1600の間に変化する整数であり、柔軟性がなく、任意の最終値に簡単に変換できません。 offset-distance --int-width最良の解決策は、

を0から1の数値に変換することです。そのため、画面が大きくなると、目的の終了値を掛けることができます。より良い名前がないため、この値は「0〜1」

と呼びます。 --int-widthがある場合、すべての最終例が可能です：--wideness --wideness したがって、

<code>:root {
  --int-width: tan(atan2(100vw, 1px));
}</code>

は0から1の間の値であり、画面の幅を示します。0とは、画面が狭い場合、画面が広い場合は1つを意味します。しかし、ビューポートにこれらの値の意味を設定する必要があります。たとえば、0を400px、1は1200pxであることを望むかもしれません。これらの値の間でビューポート変換が実行されます。以下の値は、それぞれ0と1にクランプされます。

CSSでは、次のように書くことができます：--wideness

単純な変換に加えて、

変数を使用すると、変換が実行される場合の下限と上限を定義することもできます。さらに良いことに、ユーザーがそれを完全に評価できるように、中央に変換領域を設定できます。それ以外の場合、画面は0pxである必要があります。これにより、

<code>@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

:root {
  --100vw: 100vw;
  --int-width: calc(10000 * tan(atan2(var(--100vw), 10000px)));
}</length></code>

が0に達し、1に達するためにどれだけ幅が必要かを知っています。

--wideness私たちはwidenessを手に入れました。次は何ですか？ --wideness

最初に、タイトルタグはスパンに分割されます。なぜなら、文で特定の単語を選択するCSSメソッドがないため、

私たちは自分自身を包むつもりなので、いくつかのデフォルト値を解決することが非常に重要です：

<code>/* 如果 `--wideness` 为 0.5 */

.element {
  opacity: var(--wideness); /* 为 0.5 */
  translate: rotate(calc(wideness(400px, 1200px) * 360deg)); /* 为 180deg */
  offset-distance: calc(var(--wideness) * 100%); /* 为 50% */
}</code>

変換は基本的なスタイルなしでは機能するはずですが、普通に見えます。スタイルシートにコピーしたい場合は、次のようになります。

最後に、現在のスキルは次のとおりです

<code>:root {
  /* 两个边界都是无单位的 */
  --lower-bound: 400;
  --upper-bound: 1200;

  --wideness: calc(
    (clamp(var(--lower-bound), var(--int-width), var(--upper-bound)) - var(--lower-bound)) / (var(--upper-bound) - var(--lower-bound))
  );
}</code>

わかりました、それはすべての設定です。今度は、新しい値を使用して、ViewPortの変換を実行する時が来ました。まず、タイトルをより小さな画面に適合させるように再配置する方法を決定する必要があります。最初のデモでわかるように、最初の

は上に移動し、2番目の

は反対方向に動きます。したがって、2つの2つの最終位置は次の値に変換されます。

<code><h1>Resize and enjoy!</h1></code>

2つの式は基本的に同じですが、シンボルは継続する前に異なります。新しい変数を導入することで、すぐに書き換えることができます

。 1または-1になり、変換を実行する方向を定義します。

<code>:root {
  --int-width: tan(atan2(100vw, 1px));
}</code>

次のステップは、画面のサイズ変更時に値が変更されるように--widenessを式に導入することです。ただし、すべてを--widenessに掛けることはできません。なぜ？これを行うとどうなるか見てみましょう

あなたが見るように、

<code>@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

:root {
  --100vw: 100vw;
  --int-width: calc(10000 * tan(atan2(var(--100vw), 10000px)));
}</length></code>

すべてが逆になります！画面が幅が広すぎると、単語が線を巻き付け、画面が狭すぎると、単語が線を巻き付けます。

最初の例とは異なり、最初の例では、変換は0から1に増加する

で終了し、

が1から0に減少するにつれて変換を完了する必要があります。つまり、画面が小さくなるにつれて、プロパティは最終価値に達する必要があります。式を減算として書き換えることができるので、それは大したことではありません。 --wideness --wideness今、画面をサイズ変更すると、すべてが正しい方向に移動します！ --wideness

ただし、単語が直線的に動く方法と、サイズ変更時に特定の単語がどのように重複するかに気付くでしょう。特定の画面サイズを持つユーザーが変換のこの時点で立ち往生する可能性があるため、これは許可しません。ビューポートの変換はクールですが、特定の画面サイズの体験を台無しにすることを犠牲にしていません。

<code>/* 如果 `--wideness` 为 0.5 */

.element {
  opacity: var(--wideness); /* 为 0.5 */
  translate: rotate(calc(wideness(400px, 1200px) * 360deg)); /* 为 180deg */
  offset-distance: calc(var(--wideness) * 100%); /* 为 50% */
}</code>

単語は直線ではなく、中央の単語をバイパスするように曲線で移動する必要があります。心配しないでください。ここで曲線を作るのは見た目よりも簡単です。X軸のY軸の2倍の速さをスパンに移動するだけです。これは、最終値を超えないように1に制限する必要がありますが、

を2倍にすることで実行できます。

美しい曲線を見て、中央のテキストを避けただけです。 --widenessこれはほんの始まりに過ぎません！

<code>:root {
  /* 两个边界都是无单位的 */
  --lower-bound: 400;
  --upper-bound: 1200;

  --wideness: calc(
    (clamp(var(--lower-bound), var(--int-width), var(--upper-bound)) - var(--lower-bound)) / (var(--upper-bound) - var(--lower-bound))
  );
}</code>

驚くべきことに、整数としてビューポートを持つことがどれほど強力であり、さらにクレイジーである最後の例は、このタイプの変換トリックでできる最も基本的な変換の1つです。最初のセットアップが終了したら、より多くのコンバージョンが可能になると想像できます。

は、新しいCSS機能と同じように非常に便利です。

将来の「ビューポート変換」についてもっと見ることを望んでいます。なぜなら、彼らはウェブサイトが適応的なウェブサイトよりも「ライブ」を感じさせるからです。

以上がTANを使用したCSSのタイプキャストとビューポートの遷移（atan2（））の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。