**فرانتیوم** همیشه عاشق داستان‌های جادویی بود. به نظر او، **قشنگ‌ترین** داستان‌های جادوگری مربوط به دنیای _هری پاتر_ و _ویچر_ است. یکی از تفریحاتش این بود که روی تختش دراز بکشد، چشم‌هایش را ببندد و در دنیای خیالی خودش غرق شود.
به نظرش این کار یکی از لذت‌بخش‌ترین لحظه‌های زندگی بود.
یک روز بعد از کاری طولانی و خسته‌کننده، روی کاناپه نشسته بود **و غرق در خیال‌پردازی بود.** در ذهنش، خودش را جادوگری نامی می‌دید که مشغول اجرای طلسم‌ها و جادوجنبل است.
ناگهان با خودش فکر کرد:
**«توی دنیای فرانت چطوری میشه جادو کرد؟»**
— آهاااااااااااااااااااااااا!
جوابش چیزی نبود جز **خلق انیمیشن‌های جادویی با کدنویسی!**
# **پروژه‌ی اولیه**
برای دانلود **پروژه‌ی اولیه** روی [این لینک](/problemset/assignments/4367/download_problem_initial_project/316813/) کلیک کنید.
<details class="red">
<summary>**ساختار فایل‌ها**</summary>
```plaintext
landing
├─ images/
│ ├─ 1.webp
│ ├─ 2.jpg
│ ├─ 3.webp
│ └─ 4.webp
├─ index.html
├─ <mark class="orange" title="این فایل را پیاده‌سازی کنید">index.js</mark>
└─ styles.css
```
</details>
# **جزئیات پروژه**
**پیاده‌سازی این سوال به سه قسمت مهم تقسیم می‌شود:**
1. **اسلایدر**
2. **اسکرول خودکار**
3. **ظاهر شدن باکس**
<details class="purple">
<summary>**پیاده‌سازی اسلایدر در** `first-section`</summary>
در این بخش یک **اسلایدر تصویری** با **چهار تصویر متفاوت** وجود دارد.
---
+ در **فایل** `index.html` می‌توانید ساختار اسلایدر را مشاهده کنید.
هر تصویر درون یک المان با کلاس `slide` قرار دارد و همه‌ی آن‌ها درون عنصری با کلاس `slides` قرار گرفته‌اند.
+ در دو سمت اسلایدر، **دو پیکان ناوبری** با کلاس‌های `prev` و `next` وجود دارند.
- با کلیک روی پیکان **سمت راست** (`.next`) باید به **تصویر بعدی** برویم.
- با کلیک روی پیکان **سمت چپ** (`.prev`) باید به **تصویر قبلی** برگردیم.
---
**نکات مربوط به جابهجایی:**
- اگر روی **تصویر چهارم** باشیم و روی پیکان سمت راست کلیک کنیم، باید به **تصویر اول** بازگردیم.
- اگر روی **تصویر اول** باشیم و روی پیکان سمت چپ کلیک کنیم، باید به **تصویر چهارم** منتقل شویم.
---
**ویژگی اسلاید خودکار:**
- اسلایدر باید هر **۴ ثانیه یک‌بار** به‌صورت خودکار به تصویر بعدی برود. جابهجایی اسلایدها در **حالت خودکار** نیز باید مشابه موارد گفته شده در بخش **نکات مربوط به جابهجایی** باشد.
- زمانی که کاربر با پیکان‌ها به صورت دستی اسلاید را تغییر می‌دهد، **تایمر خودکار باید از ابتدا ریست شود.**
*(یعنی اگر ۳ ثانیه گذشته باشد و کاربر کلیک کند، شمارش دوباره از ۰ شروع می‌شود.)*
---
**نکات فنی:**
- می‌توانید از **خاصیت** `transform: translateX(...)` برای **جابهجایی اسلایدها** استفاده کنید.
- **منطق خودکارسازی** حرکت را با `setInterval` پیاده‌سازی کنید و در زمان تعامل کاربر آن را بازنشانی (`clearInterval` و سپس شروع مجدد) کنید.
</details>
<details class="purple">
<summary>**پیاده‌سازی اسکرول خودکار در** `second-section`</summary>
در این بخش قرار است یک **حرکت افقی خودکار** برای ردیف ایموجی‌ها پیاده‌سازی شود.
---
+ در **فایل** `index.html` تعدادی ایموجی درون یک عنصر با **کلاس** `scroll-track` قرار گرفته‌اند که داخل یک **عنصر والد** با کلاس `infinite-scroll-wrapper` هستند.
+ هدف این است که این ردیف ایموجی‌ها از لحظه‌ی **بارگذاری صفحه**، به‌صورت **پیوسته و نرم** به سمت **چپ** حرکت کنند تا زمانی که به انتهای مسیر برسند.
---
+ برای این منظور می‌توانید با استفاده از **جاوااسکریپت** و ویژگی CSS `transform: translateX(...)` موقعیت افقی عنصر `scroll-track` را به‌صورت تدریجی تغییر دهید.
+ از متد `requestAnimationFrame` برای ایجاد حرکت روان و بدون لگ استفاده کنید.
+ سرعت حرکت می‌تواند با مقدار افزایشی (مثلاً `1px` در هر فریم) کنترل شود.
---
**نکته‌ها:**
- حرکت باید **به‌صورت خودکار و بدون دخالت کاربر** آغاز شود.
- زمانی که اسکرول به انتهای مسیر رسید (عرض کل `scroll-track` منهای عرض والد `wrapper`)، حرکت متوقف می‌شود.
- نیازی به استفاده از CSS Animation یا Keyframes نیست؛ منطق باید کاملاً با **JS** کنترل شود.
</details>
<details class="purple">
<summary>**پیاده‌سازی ظاهر شدن باکس‌ها در** `third-section`</summary>
در این سکشن دو بخش به نام‌های `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` دارند.
+ این انیمیشن **فقط یک‌بار** اجرا می‌شود.
</details>
# **آن‌چه باید آپلود کنید**
+ **توجه:** پس از پیاده‌سازی موارد خواسته شده، **فایل** `index.js` را برای سیستم داوری ارسال کنید.
+ **توجه:** شما مجاز به افزودن فایل جدیدی در این ساختار **نیستید** و تنها باید تغییرات را در **فایل** `index.js` اعمال کنید.
+ **توجه:** برای **جلوگیری از بروز مشکل** در کار با *DOM،* پیشنهاد می‌شود یک رویداد *DOMContentLoaded* تعریف کرده و کدهای خود را درون آن قرار دهید.