استفاده از IntersectionObserver در صفحات وب

با خبر شدن از حرکت کاربر در Viewport و هنگامی که برخی عناصر خاص در دید کاربر قرار می‌گیرند از جمله نیازهایی است که طراحی سایت‌های مدرن به آن نیازمند است. به صورت سنتی، اطلاع از این رویداد کاری پرهزینه و باعث پردازش چشمگیر روی مرورگر است و باعث افزایش مصرف انرژی قابل توجهی می‌شود.

ویژگی جدیدی در مرورگرهای مدرن اضافه شده است که انجام این کار را برای ما آسان می‌کند. کلاس IntersectionObserver وظیفه دارد تغییرات در ورود و خروج عناصر از Viewport را به اطلاع ما برساند. این کار با توجه به اینکه در سطح مرورگر انجام می‌شود بسیار کارآمد و کم هزینه است و استفاده از روش‌های قدیمی مگر در حالتی که مرورگر از این ویژگی پشتیبانی نکند، منسوخ می‌شود.

IntersectionObserver چه طور کار می‌کند ؟

به ازای هر عنصری که بخواهیم از ورود و خروج آن به Viewport آگاه شویم، لازم است تا عنصر دلخواه را به IntersectionObserver معرفی کنیم. برای نظارت روی چندین عنصر ساخت یک نمونه از IntersectionObserver کافی است ولی عنصرهای دلخواه را تک به تک باید به این کلاس معرفی کنیم.

کاربرد IntersectionObserver

متداول‌ترین کاربرد IntersectionObserver زمانی است که می‌خواهیم به محض ورود یک عنصر به Viewport برای آن یک افکت یا انیمیشن مشخص کنیم یا زمانی است که ویدئوها از دید کاربر خارج می‌شوند و ممکن است بخواهیم آن را متوقف کنیم یا بخواهیم ویدئو را به صورت شناور در بیاوریم. کاربردهای متعددی برای IntersectionObserver وجود دارد که بسته به نیاز و خلاقیت طراح سایت قابل استفاده هستند.

چه طور IntersectionObserver را فعال کنیم ؟

نمونه کد زیر، تمام تصاویر دلخواه را انتخاب می‌کند و زمانی که هر تصویر به Viewport برسد، کلاس animate را به آن‌ها اضافه می‌کند. با کمک CSS می‌توانیم عناصر دارای این کلاس را با افکت‌های دلخواه به حرکت در بیاوریم تا زمان حرکت کاربر، سایت شکل زیبایی پیدا کند.

مستندات Intersection Observer API در MDN

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

مشاوره رایگان تلفنی
۶۵ ۸۹ ۹۶ ۸۸ - ۰۲۱
۹۱ ۸۴ ۹۶ ۸۸ - ۰۲۱