عكس لون النص عند التمرير بالماوس باستخدام CSS وجافا سكريبت

لتحقيق تأثير التمرير المطلوب، حيث ينعكس النص الأسود إلى اللون الأبيض مع الحفاظ على مع ظهور المؤشر الأسود، يمكننا الجمع بين إمكانيات مسارات مقطع CSS ومعالجة أحداث JavaScript.

يتكون النهج من إنشاء طبقتين من النص: طبقة النص الأساسية وطبقة النص المقلوبة. يتم وضع طبقة النص المقلوبة خلف طبقة النص الأساسية ويتم ضبط لون النص الخاص بها على اللون الأبيض.

باستخدام JavaScript، نقوم بالتقاط حركة الماوس وضبط مسار المقطع لطبقة النص المقلوبة ديناميكيًا. عندما يتحرك الماوس، يتم ضبط مسار المقطع ليكشف المزيد من النص المقلوب، مما يخلق وهمًا للنص الأساسي الذي يعكس لونه.

إليك تفاصيل مكونات الكود الرئيسية:

/* Primary Text Layer */
h1 {
  color: #000;
  position: relative;
}

/* Inverted Text Layer */
h1:before {
  position: absolute;
  content: attr(data-text); /* Same text as primary layer */
  color: #fff;
  background: #000;
  clip-path: circle(0 at var(--x, -100%) var(--y, -100%)); /* Dynamic Clip-path */
}

/* Cursor */
.cursor {
  position: fixed;
  width: 40px;
  height: 40px;
  background: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -2;
}

// Event Listener for Mouse Movement
document.body.onmousemove = function(e) {
  // Update cursor position
  cursor.style.left = e.clientX   'px';
  cursor.style.top = e.clientY   'px';

  // Update clip-path of inverted layer based on mouse position
  h1.style.setProperty('--x', (e.clientX - p.top)   'px');
  h1.style.setProperty('--y', (e.clientY - p.left)   'px');
};

مثال للكود:

WORK

النتيجة: