احتاج مساعده

شرح الشيفرة خطوة بخطوة:

العنصر div يحتوي على صورة:

<div class="img parallaxed">
    <img src="https://alyomhost.com/wp-content/themes/alyom_2023/assets/pages/homepage/hero-w602-h547.svg" alt="">
</div>

تلاحظ أن العنصر div يحتوي على الكلاس "img parallaxed"، وهذا الكلاس سيتم استخدامه في  الشيفرة  js.

يتم تحديد الحدث الذي يتم الاستماع إليه على الجسم (body) وهو حدث حركة الماوس:

var b = document.getElementsByTagName("BODY")[0];
b.addEventListener("mousemove", function(event) {
    parallaxed(event);
});

عندما يتم حدوث حركة الماوس، سيتم استدعاء الدالة parallaxed وتمريرها بيانات الحدث (event)يمكنك القراءة أكثر عن ال event .

في الدالة parallaxed، يتم حساب كمية التحرك الأفقي والعمودي من خلال ( e.clientX و e.clientY) بناءً على إحداثيات الماوس وتطبيق التحول على العناصر التي لها الكلاس "parallaxed":

function parallaxed(e) {
    var amountMovedX = (e.clientX * 0.3 / 8);
    var amountMovedY = (e.clientY * 0.3 / 8);
    var x = document.getElementsByClassName("parallaxed");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].style.transform='translate(' + amountMovedX + 'px,' + amountMovedY + 'px)'
    }
}

يتم حساب كمية التحرك بناءً على إحداثيات الماوس باستخدام قيمة ثابتة وتقسم على 8. هذا يعني أن الصورة ستتحرك بنسبة 0.3 من إحداثيات الماوس بالنسبة للعرض والارتفاع.

ثم يتم الحصول على جميع العناصر التي لها الكلاس "parallaxed" باستخدام

`document.getElementsByClassName("parallaxed")`

وتحديث خاصية التحويل (transform) لتنفيذ التحرك.

أخيراً، يتم إضافة ال transition للعنصر الذي له الكلاس "parallaxed" في CSS لإضافة نعومة في التحرك:

.parallaxed {
    -webkit-transition: all 0.1s linear;
    transition: all 0.1s linear;
}

الفكرة هي التلاعب بالعنصر من خلال جافاسكريبت بناءًا على الحدث الخاص بتحريك مؤشر الفأرة mousemove وتستطيع إيجاد الأحداث الأخرى من هنا:

• https://developer.mozilla.org/en-US/docs/Web/API/Element#events

وعند تحريك المؤشر، تستطيع قراءة موضعه من خلال الأحداث التالية: screenX وscreenY و clientX و clientY وهي خصائص تستخدم للإشارة إلى موقع المؤشر (الفأرة) على الشاشة في حدث mousemove، ولكن هي تمثل مفاهيم مختلفة:

screenX و screenY:

• screenX: هي المسافة الأفقية (X) بالبكسل من جانب اليسار لأعلى يمين شاشة العرض.
• screenY:  المسافة الرأسية (Y) بالبكسل من أعلى الشاشة إلى أسفلها.

clientX و clientY:

• clientX: هي المسافة الأفقية (X) بالبكسل من جانب اليسار لنقطة داخل المنطقة العرضية القابلة للعرض (Viewport)، والتي تتغير مع التمرير (التمرير الأفقي) أو تغيير حجم نافذة المتصفح.
• clientY: المسافة الرأسية (Y) بالبكسل من أعلى المنطقة العرضية القابلة للعرض إلى أسفلها.

وتستطيع تفقد الشرح هنا ومثال للتجربة:

• https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX

الأحداث مثل mousemove و click و mousedown والأخرى تتيح لك التفاعل مع تغيرات موقع مؤشر الفأرة على الصفحة أو تفاعلات المستخدم مع العناصر المختلفة، بينما تستخدم الخصائص screenX و screenY و clientX و clientY للحصول على قيم تُمكّنك من معرفة موقع المؤشر على الشاشة وداخل المنطقة القابلة للعرض.

وتستطيع استخدام مكتبة مثل GSAP أو لها اسم آخر باسم Green Sock Animation لتحريك العناصر بشكل أسهل.

لقد فهمت
لكن اريد فهم addEventListener وامثله أخرى 
وأيضا لماذا استخدم مكتبه jQuery لماذا الأكواب لم تكون بjs

بتاريخ 12 ساعة قال Mustafa Suleiman:

الفكرة هي التلاعب بالعنصر من خلال جافاسكريبت بناءًا على الحدث الخاص بتحريك مؤشر الفأرة mousemove وتستطيع إيجاد الأحداث الأخرى من هنا:

• https://developer.mozilla.org/en-US/docs/Web/API/Element#events

وعند تحريك المؤشر، تستطيع قراءة موضعه من خلال الأحداث التالية: screenX وscreenY و clientX و clientY وهي خصائص تستخدم للإشارة إلى موقع المؤشر (الفأرة) على الشاشة في حدث mousemove، ولكن هي تمثل مفاهيم مختلفة:

screenX و screenY:

• screenX: هي المسافة الأفقية (X) بالبكسل من جانب اليسار لأعلى يمين شاشة العرض.
• screenY:  المسافة الرأسية (Y) بالبكسل من أعلى الشاشة إلى أسفلها.

clientX و clientY:

• clientX: هي المسافة الأفقية (X) بالبكسل من جانب اليسار لنقطة داخل المنطقة العرضية القابلة للعرض (Viewport)، والتي تتغير مع التمرير (التمرير الأفقي) أو تغيير حجم نافذة المتصفح.
• clientY: المسافة الرأسية (Y) بالبكسل من أعلى المنطقة العرضية القابلة للعرض إلى أسفلها.

وتستطيع تفقد الشرح هنا ومثال للتجربة:

• https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX

الأحداث مثل mousemove و click و mousedown والأخرى تتيح لك التفاعل مع تغيرات موقع مؤشر الفأرة على الصفحة أو تفاعلات المستخدم مع العناصر المختلفة، بينما تستخدم الخصائص screenX و screenY و clientX و clientY للحصول على قيم تُمكّنك من معرفة موقع المؤشر على الشاشة وداخل المنطقة القابلة للعرض.

وتستطيع استخدام مكتبة مثل GSAP أو لها اسم آخر باسم Green Sock Animation لتحريك العناصر بشكل أسهل.

ما عرفت كيف استفيد من مكتبهGSAP  او كيف التعامل معاها ممكن تشرح لي

بتاريخ 7 ساعة قال Zyad Alhrbi:

لقد فهمت
لكن اريد فهم addEventListener وامثله أخرى 
وأيضا لماذا استخدم مكتبه jQuery لماذا الأكواب لم تكون بjs

ما عرفت كيف استفيد من مكتبهGSAP  او كيف التعامل معاها ممكن تشرح لي

لأنه من الأسهل التلاعب باستخدام jQuery لكن ذلك كان في الماضي، حاليًا أًصبحت أغلب الخواص التي كانت في jQuery موجودة في جافاسكريبت النقية ولا حاجة إلى استخدام جيكوري بعد الآن.

بالنسبة لـ GSAP   ستجد المستند الرسمي هنا:

https://greensock.com/docs/

وابحث على اليوتيوب  how to use gsap.