純粋な CSS を使用してマウス追従効果を実装するにはどうすればよいですか? (詳しいコード説明)

マウスフォローとは、その名前が示すように、要素がマウスの動きに従い、対応する動きをすることを意味します。一般に、CSS はプレゼンテーションを担当し、JavaScript は動作を担当します。マウスのフォローの効果は動作であり、通常、それを実現するには JS の助けが必要です。

もちろん、この記事の焦点は、CSS を使用して、JS に頼らずにマウス追従動作アニメーション効果をシミュレートする方法を紹介することです。

まず、マウスフォロー効果がどのようなものかを見てみましょう:

原理

上記のデモを例に挙げると、CSS を使用してマウス追従を実装する場合、最も重要な点は次のとおりです。

現在のマウスの位置をリアルタイムで監視する方法。

OK、実際、多くの CSS 効果は「目障り」という言葉から切り離せません。現在のマウスがどこにあるかを監視するには、要素でページをカバーするだけです:

ページ全体をカバーするのに 100 個の要素を使用します。ホバーリングすると、色が表示されます。コア SCSS コードは次のとおりです。

<div class="g-container">
  <div class="position"></div>
  <div class="position"></div>
  <div class="position"></div>
  <div class="position"></div>
  ... // 100个
</div>

.g-container {
    position: relative;
    width: 100vw;
    height: 100vh;
}
 
.position {
    position: absolute;
    width: 10vw;
    height: 10vh;
}
 
@for $i from 0 through 100 {
     
    $x: $i % 10;
    $y: ($i - $x) / 10;
     
    .position:nth-child(#{$i + 1}) {
        top: #{$y * 10}vh;
        left: #{$x * 10}vw;
    }
 
    .position:nth-child(#{$i + 1}):hover {
        background: rgba(255, 155, 10, .5)
    }
}

この効果を得ることができます:

さて、各要素のホバー効果を削除すると、この時点の操作ページは実際には次のようになります。効果はありません。しかし同時に、:hover 疑似クラスを通じて、現在のマウスがページ上のどの範囲にあるかを大まかに知ることができます。

わかりました、続けましょう。別の要素 (丸いボール) をページに追加して、ページの中央に絶対配置しましょう:

<div class="g-ball"></div>

.ball {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10vmax;
    height: 10vmax;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

最後に、~# を使用します。 ## Brothers 要素セレクターは、hover ページ (実際には 100 個の非表示 div をホバーしている) 上で、現在ホバーされている div を通じてボール要素の位置を制御します。

@for $i from 0 through 100{
     
    $x: $i % 10;
    $y: ($i - $x) / 10;
     
    .position:nth-child(#{$i + 1}):hover ~ .ball {
        top: #{$y * 10}vh;
        left: #{$x * 10}vw;
    }
}

この時点で、マウスをフォローする単純な純粋な CSS 効果が実現されました。これは誰にとっても理解しやすいものです。理解するには、下の図を見てください:

完全なデモについては、ここをクリックしてご覧ください:

CodePen デモ -- マウスフォローを実装するための CSS

既存の問題

上記のデモから判断すると、

精度が低すぎるなど、まだ多くの欠陥があります。

div が配置されている空間への要素の移動を制御しますが、マウスの正確な位置ではないため、非表示の div の数を増やすことで最適化できます。たとえば、100 タイル化 div から 1000 タイル化 div に増加します。

動きが十分に滑らかではありません

効果が十分に滑らかに見えません。これは、適切なイージング関数と適切なアニメーション遅延を通じて最適化する必要がある場合があります。

乾いてください

そう。原理をマスターしたので、このテクニックを使用して他にどのような興味深い効果を作成できるかを見てみましょう。

CSS マウスフォローボタン効果

最初に、SVG CSS JS を使用して実装された CodePen で次の効果​​を見ました。 CSS のみを使用して、それをコピーできます:

CodePen デモ -- ねばねばマウス フォロー

わかりました、理想はいっぱいです。現実はとても痩せています。 CSS を使用するだけでは、まだ多くの制限があります。

• ただし、上で紹介した方法を使用してマウスのフォローを実装することもできます。

• CSS フィルター filter: Blur()contrast() を使用してシミュレートします。 elements Fusion について詳しくは、この記事をご覧ください:

  CSS フィルターのスキルとあなたが知らない詳細

それでは、破産バージョンのシミュレーションを見てみましょう。 CSSのみの効果:

ちょっと奇抜すぎますが、色やフィルターの強さを調整することで、少し引き締めることができます(色々試してみてください...) YiDiudiu と同様の効果:

Demo poke me、CodePen Demo -- CSS マウスフォローボタン効果

アニメーションに続く全画面マウス

OK、続けて、もっと魅力的なことをしてみましょう。まあ、それは派手な種類です。汗_笑顔

複数の要素を制御する場合。複数の要素間のアニメーション効果には、シーケンスの動きを遅らせるために、異なる遷移遅延が設定されます。うわー、考えただけでもワクワクしますね。例:

CodePen デモ -- マウス フォロー アニメーション PURE CSS MAGIC MIX

もっと想像力を働かせることができれば、あなたはより多くの火花と衝突する可能性があります:

このエフェクトは、私がとても気に入っている日本の CodePen 作者である中谷祐介氏の作品です。ソース コード: Demo - - Only CSS: 水面

マウスの指示に従ってください

もちろん、要素の移動を示す必要はありません。 div を使用してページをカバーし、要素の現在位置をキャプチャする手法は、マウスの移動軌跡を示すなど、他の効果にも使用できます:

1。デフォルトの完全な背景 div の transition-duration: 0.5s

2. 要素の背景 div にホバーするとき、現在ホバーしている div の transition-duration を変更します。は: 0s で、ホバリング時に背景色を指定して、現在ホバリングされている div がすぐに表示されるようにします (

3)。マウスが div から離れると、transition-duration ##transition-duration: 0.5s であるデフォルトの状態に div が戻り、同時に背景色が消え、左側の div の背景色がゆっくりと透明に移行します。 、ゴースト効果を引き起こす

CodePen デモ -- トランジションをキャンセル

##最後に

#実際には、興味深い使い方がたくさんあります。興味のある学生は自分でやってみて、さらに試してみたり、組み合わせたりすることができます。

人々からよく質問されますが、これらの奇妙な用法は実際のビジネスで使用できますか?役に立つかどうか？そうですね、私の意見としては、おそらく実際にはビジネスで使用されていないか、応用シナリオが非常に限られているのかもしれませんが、それについて詳しく知ることで、問題に遭遇したときにより多くの選択肢が得られ、より多くの思考の余地が得られ、少なくともより良い発散的思考が可能になるのではないかと考えています。無害です。

あなたが思いつきもしなかったもっと興味深い CSS をここに来て見てみることができます:

CSS インスピレーション -- CSS インスピレーション

わかりました、この記事はここで終わります。お役に立てば幸いです:)

この記事は https://www.cnblogs.com/coco1s/p/10481872 から転載しました。 html

さらにクールな CSS3、html5、JavaScript、jQuery 特殊効果コードがすべて含まれています:

js 特殊効果コレクション

以上が純粋な CSS を使用してマウス追従効果を実装するにはどうすればよいですか? (詳しいコード説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。