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

• در فایل index.html می‌توانید ساختار اسلایدر را مشاهده کنید.
  هر تصویر درون یک المان با کلاس slide قرار دارد و همه‌ی آن‌ها درون عنصری با کلاس slides قرار گرفته‌اند.

• در دو سمت اسلایدر، دو پیکان ناوبری با کلاس‌های prev و next وجود دارند.

  • با کلیک روی پیکان سمت راست (.next) باید به تصویر بعدی برویم.
  • با کلیک روی پیکان سمت چپ (.prev) باید به تصویر قبلی برگردیم.

نکات مربوط به جابه‌جایی:

• اگر روی تصویر چهارم باشیم و روی پیکان سمت راست کلیک کنیم، باید به تصویر اول بازگردیم.
• اگر روی تصویر اول باشیم و روی پیکان سمت چپ کلیک کنیم، باید به تصویر چهارم منتقل شویم.

ویژگی اسلاید خودکار:

• اسلایدر باید هر ۴ ثانیه یک‌بار به‌صورت خودکار به تصویر بعدی برود. جا‌به‌جایی اسلاید‌ها در حالت خودکار نیز باید مشابه موارد گفته شده در بخش نکات مربوط به جا‌به‌جایی باشد.
• زمانی که کاربر با پیکان‌ها به صورت دستی اسلاید را تغییر می‌دهد، تایمر خودکار باید از ابتدا ریست شود.
  (یعنی اگر ۳ ثانیه گذشته باشد و کاربر کلیک کند، شمارش دوباره از ۰ شروع می‌شود.)

نکات فنی:

• می‌توانید از خاصیت transform: translateX(...) برای جابه‌جایی اسلایدها استفاده کنید.
• منطق خودکارسازی حرکت را با setInterval پیاده‌سازی کنید و در زمان تعامل کاربر آن را بازنشانی (clearInterval و سپس شروع مجدد) کنید.

در این بخش قرار است یک حرکت افقی خودکار برای ردیف ایموجی‌ها پیاده‌سازی شود.

• در فایل index.html تعدادی ایموجی درون یک عنصر با کلاس scroll-track قرار گرفته‌اند که داخل یک عنصر والد با کلاس infinite-scroll-wrapper هستند.

• هدف این است که این ردیف ایموجی‌ها از لحظه‌ی بارگذاری صفحه، به‌صورت پیوسته و نرم به سمت چپ حرکت کنند تا زمانی که به انتهای مسیر برسند.

• برای این منظور می‌توانید با استفاده از جاوااسکریپت و ویژگی CSS transform: translateX(...) موقعیت افقی عنصر scroll-track را به‌صورت تدریجی تغییر دهید.
• از متد requestAnimationFrame برای ایجاد حرکت روان و بدون لگ استفاده کنید.
• سرعت حرکت می‌تواند با مقدار افزایشی (مثلاً 1px در هر فریم) کنترل شود.

نکته‌ها:

• حرکت باید به‌صورت خودکار و بدون دخالت کاربر آغاز شود.
• زمانی که اسکرول به انتهای مسیر رسید (عرض کل scroll-track منهای عرض والد wrapper)، حرکت متوقف می‌شود.
• نیازی به استفاده از CSS Animation یا Keyframes نیست؛ منطق باید کاملاً با JS کنترل شود.

در این سکشن دو بخش به نام‌های first-box و second-box وجود دارد که از نظر ساختار کلی مشابه هستند، اما جهت نمایش و ترتیب انیمیشن آن‌ها متفاوت است.

• توجه کنید: تمام انیمیشن‌ها زمانی فعال می‌شوند که کاربر در حال اسکرول به سمت پایین صفحه باشد و المان مربوطه وارد محدوده‌ی دید کاربر شود (حدود 10px قبل از رسیدن باکس به viewport).

• با ورود المان به محدوده‌ی دید، کلاس active اضافه می‌شود و CSS‌های مربوط به opacity و transform برای تصویر و متن‌ها اعمال می‌گردد.

توجه: در فایل CSS، کامنتی با متن /* third section */ قرار دارد. با بررسی استایل‌های بعد از آن، می‌توانید پیاده‌سازی این بخش را بهتر درک کنید.

اِلمان first-box

1. تصویر در سمت چپ قرار دارد و به‌صورت دایره‌ای کامل است.

2. متن‌ها در سمت راست قرار دارند.

انیمیشن:

• باکس first-box با اضافه شدن کلاس active فعال می‌شود.

• تصویر از سمت چپ ظاهر می‌شود.

• متن‌ها (پاراگراف‌ها) به ترتیب و با تأخیر زمانی ظاهر می‌شوند و حداقل opacity > 0.9 دارند.

• این انیمیشن فقط یک‌بار اجرا می‌شود.

اِلمان second-box

1. تصویر در سمت راست قرار دارد و به‌صورت دایره‌ای کامل است.

2. متن‌ها در سمت چپ قرار دارند.

انیمیشن:

• باکس second-box با اضافه شدن کلاس active فعال می‌شود.

• تصویر از سمت راست ظاهر می‌شود.

• متن‌ها (پاراگراف‌ها) به ترتیب و با تأخیر زمانی ظاهر می‌شوند و حداقل opacity > 0.9 دارند.

• این انیمیشن فقط یک‌بار اجرا می‌شود.