تأثير المرور بالماوس: درس تطبيقي.

لإعادة إنشاء تأثير المرور بالماوس الذي يظهر في موقع Blue Origin، يمكنك استخدام HTML و CSS مع بعض البرمجة النصية البسيطة. هذا التأثير يعتمد على تغيير خصائص CSS عندما يتم تحريك المؤشر فوق العنصر.

الخطوات التالية توضح كيفية تحقيق هذا التأثير:

1. HTML: قم بإنشاء العناصر التي تريد تطبيق التأثير عليها. على سبيل المثال:

htmlCopy code
<div class="box" id="box1">Astronaut Experiencediv>
<div class="box" id="box2">Tech...div>

2. CSS: قم بتحديد تصميم الصناديق وتحديد الخصائص التي ستتغير عند تحريك المؤشر فوقها. على سبيل المثال:

cssCopy code
.box {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  margin: 10px;
  float: left;
  transition: background-color 0.5s;
}

.box:hover {
  background-color: #ccc;
}

3. JavaScript (Optional): يمكنك استخدام JavaScript للقيام بإجراءات إضافية عند تحريك المؤشر، مثل تغيير نص الصندوق أو إظهار معلومات إضافية. على سبيل المثال:

javascriptCopy code
document.getElementById("box1").addEventListener("mouseover", function() {
  this.innerHTML = "New Text";
});

هذا مثال بسيط لكيفية إعادة إنشاء التأثير. يمكنك تخصيص التصميم والتفاعل بحسب احتياجات مشروعك.

لتحقيق تأثير المرور بالماوس الذي يظهر على موقع Blue Origin، يمكنك الاعتماد على تقنية CSS لتحقيق التحولات الانتقالية (Transitions) وتقنية CSS Grid لترتيب الصناديق بشكل جانبي. إليك طريقة تحقيق هذا التأثير:

1. HTML: قم بإنشاء الهيكل الأساسي للصفحة بحيث تحتوي على صناديق “Astronaut Experience” و “Tech…” وعنصر div يحتوي على هذين الصندوقين:

htmlCopy code
<div class="container">
  <div class="box" id="box1">Astronaut Experiencediv>
  <div class="box" id="box2">Tech...div>
div>

2. CSS: استخدم CSS لتنسيق الصناديق وتحقيق التأثير عند مرور المؤشر عليها:

cssCopy code
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.box {
  width: 100%;
  height: 100px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.5s;
}

.box:hover {
  background-color: #ccc;
}

3. JavaScript (Optional): يمكنك استخدام JavaScript لتغيير النص أو تطبيق أي تأثير إضافي عند مرور المؤشر على الصناديق. على سبيل المثال:

javascriptCopy code
document.getElementById("box1").addEventListener("mouseover", function() {
  this.innerHTML = "New Text";
});

باستخدام هذه الطريقة، يمكنك إعادة إنشاء تأثير المرور بالماوس الذي يظهر على موقع Blue Origin. تأكد من تخصيص التصميم وفقًا لاحتياجات مشروعك واستخدم التقنيات التي تتقنها بشكل جيد.