تعدادی سوال جاوااسکریپتی
سلام. وقتتون بخیر. چندتا سوال راجع به کد زیر دارم. ممنون میشم اگه جواب بدید!
سوال هارو به صورت کامنت توی کدها نوشتم.
const images = document.querySelector(".anim");
observer = new IntersectionObserver((entries) => { // manzoore in khat chi hast?
if (entries[0].intersectionRatio > 0) { // intersectionRatio chi hast?
entries[0].target.style.animation = `anim1 2s forwards ease-out`;
} else {
entries[0].target.style.animation = `none`;
}
})
observer.observe(images); // observe chi hast?گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
@amirs3276har سلام.
کلا توی جاوا اسکریپت observer های مختلفی هست . IntersectionObserver یکی از اونهاست .
به ترتیب کامنت ها :
1- از کلاس IntersectionObserver یک شی میسازید با دستور new و داخل observer ذخیرش میکنید. حالا این کلاس IntersectionObserver توی construct خودش دوتا ورودی میتونه دریافت بکنه . اولی یک callback هست و دومی option ها ( با توجه به مستنداتش) که اینجا شما با فرمت es6 یک تابع رو دارید به عنوان پارامتر اول یا همون callback بهش پاس میدین . که خوب اون تابعتون ورودی خودشو میتونه داشته باشه که اینجا entries هست.
2- intersectionRatio یکی از متد های IntersectionObserver هست که اگر عامیانه بخوام بگم مشخص میکنه چقدر از المنت مورد نظر شما داخل المنت پدر مشخص هست . در واقع این متد مقادیری بین 0.0 تا 1.0 برمیگردونه که مثلا زمانی که یک عکس شما intersectionRatio = 1 داشته باشه یعنی کامل توی صفحه ظاهر شده و اینطور نیست که صفحه اسکرول خورده باشه و قسمتی از عکستون مشخص نباشه.
3- باز observe هم یک متد هست که شروع به مشاهده کردن میکنه .ساده بخوام بگم اینه که شما بهش میگید لطفا عکس های من رو یا همون images رو بر اساس مقادیر و منطقی که توی observer ذخیرشون کردم واسه ی من observe کن . در واقع با فراخوانی متد observe کار تحت نظر داشتن المنت هاتون توسط این کلاس IntersectionObserver شروع میشه ! (در نظر داشته باشید که متدی از خود کلاس والد هست و روی آبجکت اون والد باید صدا زده باشه . که با new کردن شما یک آبجکت رو ایجاد کردید و داخل متغیر observer قرارش دادید.)
شاید کمی گنگ باشه ولی قطعا با مثلا متوجه میشید . اگر گنگ بود لینک زیر خیلی مثالهای خوبی داره :
https://css-tricks.com/a-few-functional-uses-for-intersection-observer-to-know-when-an-element-is-in-view/
این هم لینک مستندات اصلیش داخل سایت موزیلا :
https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverAPI
موفق باشید