[CSSチュートリアル】CSSでマウスの位置をマッピングし、マウスの動きでページ要素を制御する効果を実現する（コード例）

我们还在内容中添加了两个自定义属性。 我们将使用鼠标位置来设置这些属性的值，然后使用它们来的设置。 .square 元素的宽高。

一旦我们为标位置绘制了自定义性，我们几乎可以使用它们来做我们想要的何任事情。 例，我们可以使用它们来设置一个绝定对元素的。 top 、控制 transform 属性を設定します。 background-position を調整します。 color というように、擬似要素の内容まで設定することができます。記事の最後に、これらのデモ効果の一部と、それに対応する Codepen プロジェクトのリンクです。

グリッド

目標は、画面上に目に見えないグリッドを作成し :hover 擬似クラスを使用して、各セルにカスタム プロパティの値群をマッピングします。このとき、マウスカーソルを画面の右側に移動させると --positionX の値は高くなり、マウスを左に動かすと低くなる。例えば --positionY も同様で、カーソルが上に移動すると値が小さくなり、下に移動すると値が大きくなります。

グリッドサイズとグリッドチャンキングについて注意すべき点は、実は到達可能な限りのグリッドサイズを作ることができることです。グリッドサイズとグリッドチャンクについて、注意すべき点があります。しかし、これはグリッドチャンキングの間隔が増えることを意味し、グリッドチャンキングが多すぎるとパフォーマンスの問題が発生する可能性があります。実際のプロジェクトに応じて、グリッドサイズのバランスを適切に保つことが非常に重要です。

さて、10×10のグリッドが必要なので、コンテナ内に合計100個のグリッドチャンクが必要だとします。(実際の開発では、pugのような構文を使って素早くテーブルを作成することができ、この例では100個のスペースはすべて div )

<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<! -- 97 more cells -->
<div class="content">
  <div class="square"></div>
</div>

カスケード接続の関係で .cell 要素で .content 要素の前にある

を使いたいのです。 .cell クラスで .square CSSのカスケード関係により、ある要素はその子（または子の子）およびその後ろに位置する兄弟（または兄弟の子）しか制御することができません。

これは2つのことを意味します。

• それぞれの .cell は、制御される要素の前になければなりません（この場合 .square ).
• これらを置くことはできません。 .cell を1つのコンテナで行う場合、次のようになります。 .content は、もはや兄弟要素ではなくなります。

セルを配置する

を配置する方法はたくさんあります。 .cels . 例えば position: absolute を設定し、それらの top と left 属性に渡すこともできます。 transform を使用して位置を変換することができます。 display: grid .

body {
  background-color: #000;
  height: 100vh;
  display: grid;
  grid-template: repeat(10, 1fr) / repeat(10, 1fr);
}
.cell {
  width: 100%;
  height: 100%;
  border: 1px solid gray;
  z-index: 2;
}

border グリッドを画面上で確認できるようにするための一時的なもので、後で削除します。
z-index 非常に重要なことですが、セルをコンテンツの一番上に表示させたいからです。

ここまでで完成したものは以下の通りです。

<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<! -- 97 more cells -->
<div class="content">
  <div class="square"></div>
</div>

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}
body {
  background-color: black;
  height: 100vh; 
  display: grid;
  grid-template: repeat(10, 1fr) / repeat(10, 1fr);
}
.cell {
  width: 100%;
  height: 100%;
  border: 1px solid gray;
  z-index: 2;
 }
.content {
  --positionX: 0;
  --positionY: 0;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.square {
  width: 100px;
  height: 100px;
  background: white;
}

値を追加する

の値を追加したいと思います。 .cell を設定します。 --positionX と --positionY の値は

私たちが hover にカーソルを合わせると、最初の（左の）列の .cell にカーソルを合わせると --positionX の値が必要です。 0 . の2列目にカーソルを合わせると、その列が表示されます。 .cell を2列目に表示すると、値が 1 . 第三 2 など。

y-axis も同じです。1行目（上）にカーソルを合わせると .cell の上に --positionY であるべきです。 0 で、2行目のセルにカーソルを合わせると、その値が 1 など。

黒い10×10の正方形に白い縁取り、左から右へ順番に数字を並べたもの。

画像内の数字は、グリッドの各セルの番号を示しています。を1個から始めると .cell たとえば、セル番号42の場合、次のようになります。 :nth-child() で選択します。

.cell:nth-child(42) { }

しかし、いくつか覚えておかなければならないことがあります。

• このセレクタが機能するのは hover セルにカーソルを合わせるので :hover .
• を選択したいと思います。 .content 要素を使用するので、一般的な兄弟セレクタを使用する必要があります。 ~ を実行します。

で、今度は42番目のセルが hover の状態では --positionX が設定されます。 1 と --positionY に設定します。 3 というのが必要です。

.cell:nth-child(42):hover ~ .content {
  --positionX: 1;
  --positionY: 3;
}

しかし、100個のセルで、これを100回やりたいと思う人がいるでしょうか！？上記の操作を簡単にする方法はいくつかあります。

1. 使用方法 Sass の中に @for ループを使用して、100 個のセルを繰り返し処理し、計算を行います。 --positionX と --positionY の値を指定します。
2. x軸とy軸を区切る値として :nth-child 関数記号は{{code :nth-child}}で表現します。
3. この2つの方法を組み合わせて、両方を使って

   Sass
   @for
   

   ループと :nth-child 関数シンボル。

どの方法にもメリットとデメリットがありますが、何が一番シンプルでベストな方法なのか、いろいろと考えました。書くべきコードの量、コンパイルされたコードの品質、数学的な複雑さなどを考慮し、結局3番目の方法を選びました。もし、もっと良い方法があれば、コメントで教えてください。

使用方法 @for の値を設定するためのループです。

@for $i from 0 to 10 {
 .cell:nth-child(????) :hover ~ .content {
    --positionX: #{$i};
  }
  .cell:nth-child(????) :hover ~ .content {
    --positionY: #{$i};
  }
}

これは基本的なループフレームワークで、上で構築したグリッドは10行10列なので、10回ループさせる必要があります。グリッドを x-axis と y-axis を各カラムに設定し --positionX を設定し、各行に対して --positionY . あとは，この ???? を選択し、各行と各列を選択する。

では、まず x-axis スタート

上の数字を使ったグリッド画像に戻ると、次のようになります。 column 2 は、すべてのセルで multiples of 10 plus 2 . Column 2 セルは Multiples of 10 plus 3 ...

では、これを次のように変換してみましょう。 :nth-child を関数式に変換します。ここでは、列2を次のように表現することができます。

:nth-child(10n + 2)

• 10nは10の倍数ごとに選択することを意味します。
• 2 は列番号で、ループの中で #{$i + 1] 列番号を入れ替えて順番に繰り返します。

.cell:nth-child(10n + #{$i + 1}):hover ~ .content {
  --positionX: #{$i};
}

次に、Y軸を処理します。

もう一度グリッド画像を見て、その中の row 4 の間にグリッド番号がある場合、そのグリッド番号は 41 and 50 の間 Line 5 の間に番号が振られています。 51 and 60 といった具合です。各行を選択するためには、その範囲を定義する必要があります。例えば、4行目の範囲は

.cell:nth-child(n + 41):nth-child(-n + 50)

(n + 41) は範囲の開始点です。
(-n + 50) は範囲の終わりです。
ここで $i value で数式を置き換えます。範囲の先頭は、次のようになります。 (n + #{10 * $i + 1}) そして、範囲の終わりは (-n + #{10 * ($i + 1)}) .

したがって、最後の @for のループは

@for $i from 0 to 10 {
  .cell:nth-child(10n + #{$i + 1}):hover ~ .content {
    --positionX: #{$i};
  }
  .cell:nth-child(n + #{10 * $i + 1}):nth-child(-n + #{10 * ($i + 1)}):hover ~ .content {
    --positionY: #{$i};
  }
}

マッピングが完了しました 要素にカーソルを合わせると --positionX と --positionY の値は、マウスの位置によって変化します。つまり、それらを使ってコンテンツ内の要素を制御することができるのです。

カスタム属性の取り扱い

さて、マウスの位置を 2 つのカスタムプロパティにマッピングしたので、次に行うことは、それらを使って .square 要素の幅と高さの値です。

まず、幅から説明しましょう。 .square 要素の最小幅は 100px (すなわち、マウスカーソルが画面の左側にあるとき)、マウスカーソルが右側に一歩進むごとに大きくなるようにすることもできます 20px .

使用方法 calc() は、実装することが可能です。

.square {
  width: calc(100px + var(--positionX) * 20px);
}

高さについては、同じことをしますが、その前に --positionY の代わりに

.square {
  width: calc(100px + var(--positionX) * 20px);
  height: calc(100px + var(--positionY) * 20px);
}

以上です。これで、シンプルな .square 要素で、幅と高さはマウスの位置で制御されます。マウスカーソルを動かして、正方形の幅と高さがそれに応じてどのように変化するかを見てみましょう。以下は、この例全体のコードです。

<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<! -- 97 more cells -->
<div class="content">
  <div class="square"></div>
</div>

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}
body {
  background-color: black;
  height: 100vh; 
  display: grid;
  grid-template: repeat(10, 1fr) / repeat(10, 1fr);
}
.cell {
  width: 100%;
  height: 100%;
  // border: 1px solid gray;
  z-index: 2;
}
@for $i from 0 to 10 {
 .cell:nth-child(10n + #{$i + 1}):hover ~ .content {
    --positionX: #{$i};
  }
  .cell:nth-child(n + #{10 * $i + 1}):nth-child(-n + #{10 * ($i + 1)}):hover ~ .content {
    --positionY: #{$i};
  }
}
.content {
  --positionX: 0;
  --positionY: 0;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.square {
  width: calc(100px + var(--positionX) * 20px);
  height: calc(100px + var(--positionY) * 20px);
  background: white;
  transition: all 0.3s;
}

小さなトランジション効果を加えて、より滑らかに見えるようにしました。もちろん、これは必要ありません。また .cell 要素の border .

別の方法を試してみよう

をバイパスしたい場合があります。 --positionX と --positionY を作成し、最終的な値を直接 @for loop をループ内で使用します。この例では、次のように実装することができます。

@for $i from 0 to 10 {
 .cell:nth-child(10n + #{$i + 1}):hover ~ .content {
    --squareWidth: #{100 + $i * 20}px;
  }
  .cell:nth-child(n + #{10 * $i + 1}):nth-child(-n + #{10 * ($i + 1)}):hover ~ .content {
    --squareHeight: #{100 + $i * 20}px;: #{$i};
  }
}

.square 要素は、以下の属性でカスタマイズすることができます。

.square {
  width: var(--squareWidth);
  height: var(--squareHeight);
}

この方法は、比較すると、もう少し柔軟性があり、より高度な Sass 数学的（および文字列）関数ですが、主な原理はこの例とまったく同じです。

次は？

さて、あとはどう使うかですが、その可能性は無限大です。で何ができるかというと CSS マッピングマウスポジションテクニックをさらに一歩進めることはできないでしょうか？ここでは、マウス操作によって変化するページグラフィックの例をいくつか紹介します。

ジャンピングパーティクル

3Dテキスト

のようなパースペクティブビュー

タイプライター効果

記事のアドレス https://www.cnblogs.com/dragonir/p/14557203.html 著者：ドラゴニア

CSSでマウスの位置をマッピングし、マウスの動きでページ要素を制御する効果を得ることについて、この記事を紹介し、より関連するCSSマッピングマウス位置の内容は、スクリプトの家の過去の記事を検索するか、次の関連記事を閲覧を続けてください、私はあなたが将来よりスクリプトの家をサポートすることを願っています！。