نحوه متحرک سازی اشیاء روی اسکرول با Tailwind CSS و API مشاهدهگر تقاطع جاوا اسکریپت

دوشنبه همگی بخیر! سرانجام روز مورد علاقه من در هفته، و من هیجان زده هستم که یک آموزش جدید در مورد نحوه متحرک سازی اشیاء با Tailwind CSS و JavaScript intersection monitorer API را با شما به اشتراک بگذارم.

آن را به صورت زنده ببینید و کد را دریافت کنید

Intersection Observer API چیست؟

Intersection Observer API یک API جاوا اسکریپت است که به شما اجازه می دهد تا قابلیت مشاهده عناصر را در یک صفحه وب مشاهده کنید. این روشی را برای تشخیص زمانی که یک عنصر وارد یا خارج می‌شود، فراهم می‌کند و زمانی که عنصر قابل مشاهده است، یک تابع تماس را راه‌اندازی می‌کند.

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

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

نشانه گذاری

• شناسه “rotateYImage” برای ارجاع عنصر تصویر در کد جاوا اسکریپت استفاده می شود. در این حالت، تصویر حول محور Y می چرخد.
• شناسه “rotateXImage” برای ارجاع عنصر تصویر در کد جاوا اسکریپت استفاده می شود. در این حالت، تصویر حول محور X می چرخد.

  

     id="rotateYImage" src="https://i.pinimg.com/564x/78/d1/c0/78d1c06554aead1dc1d1490f08d39ffd.jpg" />
  


  

     id="rotateXImage" src="https://i.pinimg.com/564x/78/d1/c0/78d1c06554aead1dc1d1490f08d39ffd.jpg" />
  

فیلمنامه

شنوندگان رویداد

• const rotateYImage = document.getElementById(“rotateYImage”): این خط کد عنصری را با id rotateYImage انتخاب کرده و به متغیر rotateYImage اختصاص می دهد.
• const rotateXImage = document.getElementById(“rotateXImage”): این خط کد عنصر با id rotateXImage را انتخاب کرده و به متغیر rotateXImage اختصاص می دهد.
• const rotateYImage = document.getElementById(“rotateYImage”);
• const rotateXImage = document.getElementById(“rotateXImage”);

ناظر

• const createObserver = (element, rotateProperty, targetDegree, step) => {: این خط کد تابعی به نام createObserver را تعریف می کند که چهار پارامتر عنصر، rotateProperty، targetDegree و step را می گیرد.
• let degree = 0;: این خط کد متغیری به نام درجه را به 0 مقداردهی می کند. از آن برای پیگیری زاویه چرخش فعلی عنصر استفاده می شود.
• const observer = new IntersectionObserver((entries) => {: این خط کد یک نمونه جدید از کلاس IntersectionObserver ایجاد می کند و آن را به ناظر متغیر اختصاص می دهد.
• entries.forEach((entry) => {: این خط کد روی هر ورودی در آرایه ورودی ها تکرار می شود و برای هر ورودی یک تابع را فراخوانی می کند.
• if (entry.isIntersecting) {: این خط کد بررسی می کند که آیا ورودی با viewport تلاقی دارد یا خیر.
• const interval = setInterval(() => {: این خط کد یک بازه جدید ایجاد می کند و آن را به بازه متغیر اختصاص می دهد.
• if (degree < targetDegree) {: این خط کد بررسی می کند که آیا زاویه چرخش فعلی کمتر از زاویه چرخش هدف است یا خیر. درجه += step;: این خط کد زاویه چرخش فعلی را با مقدار گام افزایش می دهد.
• element.style.transform =perspective(1000px) ${rotateProperty}(${degree}deg): این خط کد ویژگی تبدیل عنصر toperspective(1000px) rotateY(degree)deg` را تنظیم می کند.
• } else {: این خط کد بررسی می کند که آیا زاویه چرخش فعلی بزرگتر یا مساوی با زاویه چرخش هدف است یا خیر.
• clearInterval(interval): این خط کد بازه را پاک می کند و انیمیشن چرخش را متوقف می کند.
• }، 50)؛ این خط کد بازه زمانی را برای اجرا هر 50 میلی ثانیه تنظیم می کند.

ایجاد ناظر

• createObserver(rotateYImage, “rotateY”, 360, 5);: این خط کد تابع createObserver را با عنصر rotateYImage، ویژگی rotateY، زاویه چرخش هدف 360 درجه و مقدار گام 5 فراخوانی می کند.
• createObserver(rotateXImage, “rotateX”, 30, 1);: این خط کد تابع createObserver را با عنصر rotateXImage، ویژگی rotateX، زاویه چرخش هدف 30 درجه و مقدار گامی 1 فراخوانی می کند.

فیلمنامه کامل

با عرض پوزش برای ظلم در مورد آموزش، من با خطا در چسباندن کد js … به هر دلیلی در اینجا در Dev

نتیجه

در این آموزش یاد گرفتیم که چگونه از Intersection Observer API برای متحرک سازی اشیاء در یک صفحه وب استفاده کنیم. ما با استفاده از Intersection Observer API با جاوا اسکریپت و Tailwind CSS یک انیمیشن ساده زمانی که یک عنصر وارد viewport می شود ایجاد کردیم.

امیدوارم از این آموزش لذت برده باشید و روز خوبی داشته باشید!