شرح لكيفية استخدام intersection observer

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

سأورد هنا مثالاً عن animation on scroll باستخدام intersection observer.

في البداية ليكن لدينا محتوى ال html التالي: 

<div class="container">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, beatae eius iste minima veritatis tempora
      molestiae harum. Perspiciatis praesentium odit magnam recusandae earum. Similique, magnam ratione. Sint
      distinctio rerum blanditiis.
  	</p>
    <img src="https://ljc-dev.github.io/hosted-assets/thumb-a.png" alt="صورة ما">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, beatae eius iste minima veritatis tempora
      molestiae harum. Perspiciatis praesentium odit magnam recusandae earum. Similique, magnam ratione. Sint
      distinc tiorerum blanditiis.
  	</p>
</div>

عبارة عن قسم فيه نصان وصورة. وأنشأت في ملف ال style التنسيق التالي: 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
}

.container {
  display: flex;
  flex-flow: column;
  align-items: center;
}

img {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(100px);
  transition: transform 1s, opacity 1s;
}

.fadeIn {
  opacity: 1;
  transform: translateY(0px);
}

p {
  font-size: 2rem;
  margin: 2rem 0;
  width: 300px;
}

const img = document.querySelector("img") // جلبنا الصورة

// أنشأنا طريقة لنضعها كمعامل أول للمراقب الخاص بنا
// هي مصفوفة من المدخلات الخاصة بالعنصر entriesحيث أنّ ال 
// أي تم تقاطع العنصر المراقب مع شاشة العرض entry.isIntersecting ثم قمنا بالمرور عليها بحلقة وفحص فيما إذا كانت
// إلى العنصر المطلوب fadeIn في حال تحقق الشرط سنضيف التنسيق 
const callback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("fadeIn")
    }
  })
}
// سندع الخيارات (المعامل الثاني) فارغاً في مثالنا
const options = {}
// وهنا نقوم بإنشاء مراقبنا الخاص
const myObserver = new IntersectionObserver(callback, options)
// img في النهاية نضيف هذا المراقب للعنصر 
myObserver.observe(img)

مراقبات التقاطع او intersection observers هي واجهة برمجية في لغة جافاسكربت تقوم بتوفير امكانية لمراقبة عنصر معين ضمن الصفحة. من مثل: ان كان يظهر في ال Viewport. يمكن استعماله على سبيل المثال مثلما اشرت لاظهار قسم معين عند الانزلاق اليه من قبل المستخدم. يوجد حتى مكتبات من مثل wow.js التي تقوم على هاته الواجهة في الاساس.

يمكنك ايضا بجانب ما اقترحه المدرب معاذ الاستعانة مباشرة بهاته المكتبات في الاستفادة من حركيات متعددة. بحيث يكون المحرك الاول للعملية هو ذات المفهوم.

بتاريخ 9 ساعات قال معاذ قره محمد:

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

سأورد هنا مثالاً عن animation on scroll باستخدام intersection observer.

في البداية ليكن لدينا محتوى ال html التالي: 

<div class="container">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, beatae eius iste minima veritatis tempora
      molestiae harum. Perspiciatis praesentium odit magnam recusandae earum. Similique, magnam ratione. Sint
      distinctio rerum blanditiis.
  	</p>
    <img src="https://ljc-dev.github.io/hosted-assets/thumb-a.png" alt="صورة ما">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, beatae eius iste minima veritatis tempora
      molestiae harum. Perspiciatis praesentium odit magnam recusandae earum. Similique, magnam ratione. Sint
      distinc tiorerum blanditiis.
  	</p>
</div>

عبارة عن قسم فيه نصان وصورة. وأنشأت في ملف ال style التنسيق التالي: 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
}

.container {
  display: flex;
  flex-flow: column;
  align-items: center;
}

img {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(100px);
  transition: transform 1s, opacity 1s;
}

.fadeIn {
  opacity: 1;
  transform: translateY(0px);
}

p {
  font-size: 2rem;
  margin: 2rem 0;
  width: 300px;
}

أريدك أن تلاحظ أن الصف fadeIn لم يتم استخدامه إلى الآن على أيّة عنصر، وهو الصف الذي سنستخدمه ليقوم ب animation معين عند النزول بشاشة العرض إلى مكان العنصر.

الآن نأتي لنشرح كيف سنستخدم intersection observer على مثالنا السابق: 

أول ما يجب فعله هو أن نقوم بجلب العناصر من ملف الhtml التي نريدها أن تخضع لل animation

ثم سنقوم بإنشاء غرض من الصنف IntersectionObserver والذي يأخذ كمعامل أول له وظيفة callback، وهذه الوظيفة تأخذ كمعامل أول لها مصفوفة من المدخلات entries والتي سنستخدمها لنقوم بإنشاء الanimation الخاص بنا. وبالعودة إلى IntersectionObserver فإنه يأخذ كمعامل ثان له خيارات أخرى يمكنك الاطلاع عليها ببحث بسيط على الانترنت.

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

const img = document.querySelector("img") // جلبنا الصورة

// أنشأنا طريقة لنضعها كمعامل أول للمراقب الخاص بنا
// هي مصفوفة من المدخلات الخاصة بالعنصر entriesحيث أنّ ال 
// أي تم تقاطع العنصر المراقب مع شاشة العرض entry.isIntersecting ثم قمنا بالمرور عليها بحلقة وفحص فيما إذا كانت
// إلى العنصر المطلوب fadeIn في حال تحقق الشرط سنضيف التنسيق 
const callback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("fadeIn")
    }
  })
}
// سندع الخيارات (المعامل الثاني) فارغاً في مثالنا
const options = {}
// وهنا نقوم بإنشاء مراقبنا الخاص
const myObserver = new IntersectionObserver(callback, options)
// img في النهاية نضيف هذا المراقب للعنصر 
myObserver.observe(img)

أتمنى أن تكون قد فهمت كيف يمكننا استخدام intersection observer في مشاريعك القادمة. يمكنك الضغط هنا إذا أردت الحصول على المزيد من المعلومات حول هذا الموضوع.

اذا استاذي يمكنني ان اضع صنف لكل section واستعمالها لجميعهم