تقاطع Observer API

  • 2021-02-29

تقاطع Observer API راهی را برای مشاهده ناهمزمان تغییرات در تقاطع یک عنصر هدف با یک عنصر اجداد یا با نمای یک سند سطح بالا فراهم می کند.

از نظر تاریخی ، تشخیص دید یک عنصر یا دید نسبی دو عنصر در رابطه با یکدیگر ، کار دشواری بوده است که راه حل ها غیرقابل اعتماد بوده و مستعد ایجاد مرورگر و سایت هایی است که کاربر در حال دسترسی به لاغر شدن است. با بلوغ وب ، نیاز به این نوع اطلاعات افزایش یافته است. اطلاعات تقاطع به دلایل زیادی مورد نیاز است ، مانند:

  • بارگذاری تنبل تصاویر یا محتوای دیگر به عنوان صفحه پیمایش می شود.
  • اجرای وب سایت های "پیمایش نامحدود" ، که در آن هنگام پیمایش ، محتوای بیشتر و بیشتر بارگیری می شود ، به طوری که کاربر مجبور نیست از طریق صفحات بپردازد.
  • گزارش دیدگاه تبلیغات به منظور محاسبه درآمدهای تبلیغاتی.
  • تصمیم گیری در مورد انجام وظایف یا فرآیندهای انیمیشن بر اساس اینکه کاربر نتیجه را ببیند یا خیر.

اجرای تشخیص تقاطع در گذشته شامل دستگیرندگان رویداد و حلقه ها روش هایی مانند Element. GetBoundingClientRect () برای ایجاد اطلاعات مورد نیاز برای هر عنصر تحت تأثیر. از آنجا که تمام این کد روی موضوع اصلی اجرا می شود ، حتی یکی از این موارد می تواند باعث ایجاد مشکلات عملکرد شود. هنگامی که یک سایت با این تست ها بارگیری می شود ، همه چیز می تواند کاملاً زشت باشد.

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

تقاطع Observer API به کد اجازه می دهد تا هر زمان که عنصری که مایل به نظارت بر ورود باشد یا از عنصر دیگری (یا نمای نمایش) خارج شود ، یک عملکرد پاسخ به تماس را ثبت کند. به این ترتیب ، سایت ها دیگر نیازی به انجام کاری در موضوع اصلی برای تماشای این نوع تقاطع عنصر ندارند و مرورگر برای بهینه سازی مدیریت تقاطع ها به عنوان مناسب است.

یک چیز که API Observer Compiresection نمی تواند به شما بگوید: تعداد دقیق پیکسل هایی که با هم همپوشانی دارند یا به طور خاص کدام یک هستند. با این حال ، این مورد بسیار رایج تر استفاده از "اگر آنها در جایی در حدود n ٪ قرار بگیرند ، باید کاری انجام دهم."

تقاطع مفصل و مفاهیم و استفاده

API Observer Comportection به شما امکان می دهد پاسخ به تماس را تنظیم کنید که هنگام وقوع هر یک از این شرایط فراخوانی می شود:

  • یک عنصر هدف از نمای دستگاه یا یک عنصر مشخص استفاده می کند. این عنصر مشخص شده عنصر ریشه یا ریشه برای اهداف API Observer Compiresection نامیده می شود.
  • اولین باری که در ابتدا از Observer خواسته می شود یک عنصر هدف را تماشا کند.

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

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

درجه تقاطع بین عنصر هدف و ریشه آن نسبت تقاطع است. این نمایشی از درصد عنصر هدف است که به عنوان یک مقدار بین 0. 0 تا 1. 0 قابل مشاهده است.

ایجاد یک ناظر تقاطع

با فراخوانی سازنده خود و عبور از آن ، یک عملکرد پاسخ به تماس را ایجاد کنید تا هر زمان که آستانه در یک جهت یا دیگری عبور کند ، اجرا شود:

آستانه 1. 0 به این معنی است که وقتی 100 ٪ از هدف در عنصر مشخص شده توسط گزینه root قابل مشاهده است ، پاسخ به تماس است.

گزینه های ناظر تقاطع

شی گزینه ارسال شده به سازنده IntersectionObserver() به شما امکان می دهد شرایطی را که تحت آن فراخوانی مجدد ناظر فراخوانی می شود، کنترل کنید. دارای فیلدهای زیر است:

عنصری که به عنوان درگاه دید برای بررسی دید هدف استفاده می شود. باید جد هدف باشد. اگر مشخص نشده باشد یا اگر null باشد، به طور پیش‌فرض به درگاه نمای مرورگر تبدیل می‌شود.

حاشیه اطراف ریشه. می تواند مقادیری مشابه ویژگی حاشیه CSS داشته باشد، به عنوان مثال."10px 20px 30px 40px" (بالا، راست، پایین، چپ). مقادیر می توانند درصد باشند. این مجموعه مقادیر برای رشد یا کوچک شدن هر طرف از جعبه مرزی عنصر ریشه قبل از محاسبه تقاطع ها استفاده می کند. پیش‌فرض تمام صفرها.

یک عدد یا آرایه‌ای از اعداد که نشان می‌دهند در چه درصدی از دید هدف، تماس برگشتی ناظر باید اجرا شود. اگر فقط می خواهید تشخیص دهید که چه زمانی دید از علامت 50٪ عبور می کند، می توانید از مقدار 0. 5 استفاده کنید. اگر می‌خواهید هر بار که دید از 25% دیگر گذشت، تماس برگشتی اجرا شود، باید آرایه [0، 0. 25، 0. 5، 0. 75، 1] را مشخص کنید. پیش فرض 0 است (به این معنی که به محض اینکه حتی یک پیکسل قابل مشاهده باشد، تماس مجدد اجرا می شود). مقدار 1. 0 به این معنی است که تا زمانی که هر پیکسل قابل مشاهده نباشد، آستانه عبور شده در نظر گرفته نمی شود.

هدف قرار دادن عنصری که باید مشاهده شود

هنگامی که مشاهده گر را ایجاد کردید، باید یک عنصر هدف برای تماشا به آن بدهید:

هر زمان که هدف به آستانه تعیین شده برای IntersectionObserver برسد، تماس برگشتی فراخوانی می شود. تماس برگشتی لیستی از اشیاء IntersectionObserverEntry و مشاهدهگر را دریافت می کند:

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

توجه داشته باشید که callback شما در موضوع اصلی اجرا می شود. باید در سریع ترین زمان ممکن عمل کند. اگر کاری زمان‌بر نیاز است، از Window. requestIdleCallback() استفاده کنید.

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

تقاطع چگونه محاسبه می شود

تمام مناطق در نظر گرفته شده توسط Intersection Observer API مستطیل هستند. عناصری که شکل نامنظم دارند، کوچکترین مستطیل را اشغال می کنند که تمام اجزای عنصر را در بر می گیرد. به همین ترتیب، اگر قسمت قابل مشاهده یک عنصر مستطیل شکل نباشد، مستطیل تقاطع عنصر به عنوان کوچکترین مستطیلی در نظر گرفته می شود که شامل تمام بخش های قابل مشاهده عنصر است.

این مفید است که کمی در مورد چگونگی توصیف ویژگی های مختلف ارائه شده توسط IntersectionObserverEntry یک تقاطع را درک کنید.

ریشه تقاطع و حاشیه ریشه

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

مستطیل تقاطع ریشه مستطیلی است که برای بررسی هدف یا اهداف استفاده می شود. این مستطیل به صورت زیر تعیین می شود:

  • اگر ریشه تقاطع ریشه ضمنی باشد (یعنی سند سطح بالا)، مستطیل تقاطع ریشه، مستطیل دید درگاه است.
  • اگر ریشه تقاطع دارای گیره سرریز باشد، مستطیل تقاطع ریشه منطقه محتوای عنصر ریشه است.
  • در غیر این صورت، مستطیل تقاطع ریشه، مستطیل کلاینت محدود کننده ریشه تقاطع است (همانطور که با فراخوانی getBoundingClientRect() بر روی آن برگردانده می شود.

مستطیل تقاطع ریشه را می توان با تنظیم حاشیه ریشه، rootMargin، هنگام ایجاد IntersectionObserver بیشتر تنظیم کرد. مقادیر موجود در rootMargin، افست‌هایی را تعریف می‌کنند که به هر طرف از جعبه مرزی ریشه تقاطع اضافه می‌شوند تا مرزهای ریشه تقاطع نهایی را ایجاد کنند (که در IntersectionObserverEntry. rootBounds هنگام اجرای فراخوان آشکار می‌شوند).

آستانه ها

Intersection Observer API به جای گزارش هر تغییر بی نهایت کوچک در میزان قابل مشاهده بودن یک عنصر هدف، از آستانه ها استفاده می کند. هنگامی که یک ناظر ایجاد می کنید، می توانید یک یا چند مقدار عددی را ارائه دهید که نشان دهنده درصدهایی از عنصر هدف است که قابل مشاهده است. سپس، API فقط تغییرات قابل مشاهده را گزارش می کند که از این آستانه ها عبور می کند.

به عنوان مثال، اگر می خواهید هر بار که دید هدف از هر علامت 25 درصد به عقب یا جلو می گذرد مطلع شوید، هنگام ایجاد ناظر، آرایه [0، 0. 25، 0. 5، 0. 75، 1] را به عنوان لیست آستانه ها مشخص می کنید.

هنگامی که فراخوانی فراخوانی می‌شود، فهرستی از اشیاء IntersectionObserverEntry را دریافت می‌کند، یکی برای هر هدف مشاهده‌شده که درجه‌ای را دارد که تغییر ریشه را قطع می‌کند، به طوری که مقدار در معرض از یکی از آستانه‌ها در هر جهت عبور می‌کند.

با نگاه کردن به ویژگی isIntersecting ورودی، می توانید ببینید که آیا هدف در حال حاضر ریشه را قطع می کند یا خیر. اگر مقدار آن درست باشد، هدف حداقل تا حدی عنصر ریشه یا سند را قطع می کند. این به شما امکان می دهد تعیین کنید که آیا ورودی نشان دهنده انتقال از عناصر متقاطع به دیگر متقاطع نیست یا انتقال از عدم تقاطع به متقاطع است.

توجه داشته باشید که ممکن است یک مستطیل تقاطع غیر صفر داشته باشیم، که اگر تقاطع دقیقاً در امتداد مرز بین این دو باشد یا مساحت boundingClientRect صفر باشد، ممکن است اتفاق بیفتد. این حالت هدف و ریشه که یک خط مرزی مشترک دارند به اندازه کافی در نظر گرفته نمی شود که در حال انتقال به یک حالت متقاطع در نظر گرفته شود.

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

  • کادر اول یک آستانه برای هر نقطه درصد دید دارد. یعنی آرایه IntersectionObserver. thresholds [0. 00، 0. 01، 0. 02، /*…،*/ 0. 99، 1. 00] است.
  • جعبه دوم دارای یک آستانه واحد است، در علامت 50٪.
  • جعبه سوم دارای آستانه هایی در هر 10٪ دید (0٪، 10٪، 20٪ و غیره) است.
  • آخرین جعبه دارای آستانه هر یک 25٪ است.

برش و مستطیل تقاطع

مرورگر مستطیل تقاطع نهایی را به صورت زیر محاسبه می کند. همه این کارها برای شما انجام می شود، اما درک این مراحل برای درک بهتر زمان وقوع تقاطع ها می تواند مفید باشد.

  1. مستطیل مرزی عنصر هدف (یعنی کوچکترین مستطیلی که به طور کامل جعبه های مرزی هر جزء تشکیل دهنده عنصر را در بر می گیرد) با فراخوانی getBoundingClientRect() روی هدف به دست می آید. این بزرگترین مستطیل تقاطع است. مراحل باقیمانده هر قسمتی را که همدیگر را قطع نمی کنند حذف می کند.
  2. از بلوک اصلی هدف شروع می‌شود و به سمت بیرون حرکت می‌کند، هر کدام شامل برش بلوک (در صورت وجود) به مستطیل تقاطع اعمال می‌شود. برش یک بلوک بر اساس تقاطع دو بلوک و حالت برش (در صورت وجود) مشخص شده توسط ویژگی سرریز تعیین می شود. تنظیم سرریز روی هر چیزی به جز قابل مشاهده باعث ایجاد برش می شود.
  3. اگر یکی از عناصر حاوی ریشه یک زمینه مرور تو در تو باشد (مانند سند موجود در یک)، مستطیل تقاطع به نمای متن حاوی بریده می شود و بازگشت به سمت بالا از طریق کانتینرها با بلوک حاوی ظرف ادامه می یابد. بنابراین اگر به سطح بالای an رسید، مستطیل تقاطع به نمای قاب بریده می‌شود، سپس عنصر والد فریم بلوک بعدی است که به سمت ریشه تقاطع برگشته است.
  4. هنگامی که بازگشت به سمت بالا به ریشه تقاطع می رسد، مستطیل حاصل به فضای مختصات ریشه تقاطع نگاشت می شود.
  5. سپس مستطیل حاصل با تقاطع آن با مستطیل تقاطع ریشه به روز می شود.
  6. این مستطیل در نهایت به فضای مختصات سند هدف نگاشت می شود.

تماس های تغییر تقاطع

هنگامی که مقدار عنصر هدف که در عنصر ریشه قابل مشاهده است از یکی از آستانه های دید عبور کند، پاسخ تماس شی IntersectionObserver اجرا می شود. تماس برگشتی آرایه ای از تمام اشیاء IntersectionObserverEntry را به عنوان ورودی دریافت می کند، یکی برای هر آستانه ای که عبور کرده است، و یک مرجع به خود شی IntersectionObserver.

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

قطعه کد زیر یک callback را نشان می‌دهد که شمارشگر چند بار انتقال عناصر از عدم تلاقی ریشه به تقاطع حداقل 75% را نگه می‌دارد. برای مقدار آستانه 0. 0 (پیش‌فرض)، پس از انتقال مقدار بولی isIntersecting، تماس برگشتی فراخوانی می‌شود. بنابراین قطعه ابتدا بررسی می کند که انتقال مثبت است یا خیر، سپس تعیین می کند که آیا IntersectionRatio بالای 75٪ است یا خیر. در این صورت شمارنده را افزایش می دهد.

رابط ها

رابط اصلی برای API Observer Compiresection. روش هایی را برای ایجاد و مدیریت یک ناظر فراهم می کند که می تواند هر تعداد از عناصر هدف را برای همان پیکربندی تقاطع تماشا کند. هر ناظر می تواند به طور همزمان تغییرات در تقاطع بین یک یا چند عنصر هدف و یک عنصر اجداد مشترک یا با نمای سند سطح بالا را مشاهده کند. اجداد یا منظره به عنوان ریشه گفته می شود.

تقاطع بین عنصر هدف و ظرف ریشه آن را در یک لحظه خاص از انتقال توصیف می کند. اشیاء از این نوع فقط به دو روش قابل دستیابی هستند: به عنوان ورودی به تماس با تقاطع خود OBServer ، یا با فراخوانی CompatectionObserver. TakerEcords ().

یک مثال ساده

این مثال ساده باعث می شود که یک عنصر هدف رنگ و شفافیت خود را تغییر دهد زیرا کم و بیش قابل مشاهده می شود. در مشاهده عنصر زمان بندی با API Intersection Observer ، می توانید نمونه ای گسترده تر پیدا کنید که نشان می دهد چگونه زمان مجموعه ای از عناصر (مانند تبلیغات) برای کاربر قابل مشاهده است و با ضبط آمار یا به روزرسانی عناصر به آن اطلاعات واکنش نشان می دهدواد

HTML برای این مثال بسیار کوتاه است ، با یک عنصر اصلی که جعبه ای است که ما هدف قرار خواهیم داد (با جعبه شناسه خلاق ") و برخی از مطالب موجود در جعبه.

CSS برای اهداف این مثال بسیار مهم نیست. این عنصر را بیان می کند و مشخص می کند که ویژگی های رنگ پس زمینه و مرزی می توانند در انتقال CSS شرکت کنند ، که ما از آن استفاده خواهیم کرد تا با کم و بیش مبهم بر تغییرات در این عنصر تأثیر بگذارد.

جاذب

سرانجام ، بیایید نگاهی به کد JavaScript که از API Intersection Observer API استفاده می کند ، نگاهی بیندازیم.

راه اندازی

ابتدا باید برخی از متغیرها را تهیه کنیم و Observer را نصب کنیم.

ثابت ها و متغیرهایی که در اینجا تنظیم می کنیم عبارتند از:

ثابت که نشان می دهد چند آستانه می خواهیم بین نسبت دید 0. 0 و 1. 0 داشته باشیم.

این متغیر برای ثبت آخرین بار که آخرین باری است که یک آستانه عبور می کند ، استفاده می شود. این به ما این امکان را می دهد تا بفهمیم که آیا عنصر هدف کم و بیش قابل مشاهده است یا خیر.

رشته ای که رنگی را تعیین می کند ، ما در صورت افزایش نسبت دید ، روی عنصر هدف اعمال خواهیم کرد. کلمه "نسبت" در این رشته با نسبت دید فعلی هدف جایگزین می شود ، به طوری که این عنصر نه تنها رنگ را تغییر می دهد بلکه به طور فزاینده ای مات می شود زیرا کمتر مبهم می شود.

به همین ترتیب ، این رشته ای است که با کاهش نسبت دید ، رنگ را تعیین می کند.

ما با Window. AddeventListener () تماس می گیریم تا گوش دادن به رویداد بار را شروع کنیم. پس از اتمام بارگذاری صفحه ، با استفاده از querySelector () با شناسه "جعبه" به عنصر مراجعه می کنیم ، سپس با روش CreateObserver () تماس می گیریم تا در یک لحظه برای اداره و نصب و نصب Intersection Observer ایجاد کنیم.

ایجاد ناظر تقاطع

روش CreateObserver () پس از اتمام بار صفحه برای رسیدگی به واقعاً ایجاد تقاطع جدید و شروع روند مشاهده عنصر هدف ، نامیده می شود.

این کار با تنظیم یک شیء گزینه هایی که حاوی تنظیمات برای ناظر است ، آغاز می شود. ما می خواهیم مراقب تغییر در دید عنصر هدف نسبت به نمای سند باشیم ، بنابراین ریشه تهی است. ما نیازی به حاشیه نداریم ، بنابراین جبران حاشیه ، rootmargin ، به عنوان "0px" مشخص می شود. این امر باعث می شود که ناظر به دنبال تغییر در تقاطع بین مرزهای عنصر هدف و نمای نمای ، بدون هیچ گونه فضای اضافه شده (یا کمرنگ) باشد.

لیست آستانه های نسبت دید ، آستانه ، توسط عملکرد Buildresholdlist () ساخته شده است. لیست آستانه در این مثال به صورت برنامه ای ساخته شده است زیرا تعدادی از آنها وجود دارد و تعداد آنها قابل تنظیم است.

پس از آماده شدن گزینه ها ، ما ناظر جدید را ایجاد می کنیم ، با نام سازنده CompiresectionObserver () تماس می گیریم و تابعی را مشخص می کنیم که هنگام عبور از تقاطع از یکی از آستانه های ما ، Handleintersect () و مجموعه گزینه های ما استفاده می شود. سپس ما در مورد ناظر برگشتی () را مشاهده می کنیم و عنصر هدف مورد نظر را وارد آن می کنیم.

اگر می خواستیم این کار را انجام دهیم ، می توانیم با فراخوانی Observer. Observe () برای هر یک از این عناصر ، چندین عناصر را برای تغییرات تقاطع دید با توجه به نمای Viewport انتخاب کنیم.

ساخت آرایه نسبت های آستانه

عملکرد BuildresholdList () ، که لیست آستانه ها را ایجاد می کند ، به نظر می رسد:

این آرایه آستانه ها را ایجاد می کند - هر یک از آنها با فشار دادن مقدار I/numSteps به آرایه آستانه برای هر عدد صحیح I بین 1 و numsteps ، نسبت آن بین 0. 0 تا 1. 0 است. همچنین 0 را تحت فشار قرار می دهد تا این مقدار را شامل شود. نتیجه ، با توجه به مقدار پیش فرض NumSteps (20) ، لیست زیر از آستانه ها است:

# نسبت # نسبت
1 0. 05 11 0. 55
2 0.1 12 0.6
3 0. 15 13 0. 65
4 0.2 14 0.7
5 0. 25 15 0. 75
6 0.3 16 0.8
7 0. 35 17 0. 85
8 0.4 18 0.9
9 0. 45 19 0. 95
10 0.5 20 1.0

البته ما می‌توانیم آرایه آستانه‌ها را در کدمان سخت‌کد کنیم، و اغلب این کاری است که شما در نهایت انجام می‌دهید. اما این مثال فضایی را برای اضافه کردن کنترل‌های پیکربندی برای تنظیم جزئیات، به عنوان مثال، باز می‌کند.

مدیریت تغییرات تقاطع

هنگامی که مرورگر تشخیص داد که عنصر هدف (در مورد ما، عنصر با شناسه "جعبه") آشکار یا مبهم شده است به طوری که نسبت دید آن از یکی از آستانه های لیست ما عبور می کند، تابع کنترل کننده ما، handleIntersect() را فراخوانی می کند.:

برای هر IntersectionObserverEntry در ورودی های لیست، ما به دنبال این هستیم که ببینیم آیا IntersectionRatio ورودی بالا می رود یا خیر. اگر اینطور باشد، رنگ پس‌زمینه هدف را روی رشته در افزایش رنگ قرار می‌دهیم (به یاد داشته باشید، "rgba(40، 40، 190، نسبت)" است)، کلمه "نسبت" را با intersectionRatio ورودی جایگزین می‌کند. نتیجه: نه تنها رنگ تغییر می کند، بلکه شفافیت عنصر هدف نیز تغییر می کند. با کاهش نسبت تقاطع، مقدار آلفای رنگ پس‌زمینه نیز کاهش می‌یابد و در نتیجه عنصری شفاف‌تر می‌شود.

به طور مشابه، اگر IntersectionRatio پایین می‌آید، از رشته decreasingColor استفاده می‌کنیم و قبل از تنظیم رنگ پس‌زمینه عنصر هدف، کلمه "ratio" را با intersectionRatio جایگزین می‌کنیم.

در نهایت، برای ردیابی اینکه آیا نسبت تقاطع بالا می رود یا پایین، نسبت فعلی را در متغیر prevRatio به خاطر می آوریم.

نتیجه

در زیر محتوای حاصل آمده است. این صفحه را به بالا و پایین حرکت دهید و متوجه شوید که ظاهر کادر با انجام این کار چگونه تغییر می کند.

ثبت دیدگاه

مجموع دیدگاهها : 0در انتظار بررسی : 0انتشار یافته : ۰
قوانین ارسال دیدگاه
  • دیدگاه های ارسال شده توسط شما، پس از تایید توسط تیم مدیریت در وب منتشر خواهد شد.
  • پیام هایی که حاوی تهمت یا افترا باشد منتشر نخواهد شد.
  • پیام هایی که به غیر از زبان فارسی یا غیر مرتبط باشد منتشر نخواهد شد.