اسکرول

پروژه‌ی اولیه

فایل پروژه را می‌توانید از طریق این این لینک دانلود کنید.

ساختار پروژه به شکل زیر است:

initital_project/
├─ index.html
└─ styles.css

جزئیات پیاده‌سازی

1. حرکت از یک سکشن به سکشنِ دیگر باید حتماً به‌صورت نرم انجام شود.
2. کلاس dot را طوری بنویسید که :
   • طول و عرض آن 12 پیکسل باشد.
   • رنگ بک‌گراند آن gray باشد.
   • کاملا به صورت دایره کامل دیده بشود.
   • دیسپلی آن block باشد.
3. کلاس dot-navigation را طوری بنویسید که :
   • پوزیشن آن کاملا ثابت باشد.
   • از بالا فاصله 50 درصدی داشته باشد.
   • از راست 20 پیکسل فاصله داشته باشد.
   • دیسپلی آن فلکس باشد.
   • مسیر آن ستونی باشد.
   • فاصله آیتم‌های داخل آن از هم 10 پیکسل باشد.
4. توجه داشته باشید که نباید در صفحه، اسکرولِ افقی مشاهده کنیم.
5. اسنپ‌اسکرول باید کاملاً به‌صورت عمودی پیاده‌سازی بشود.
6. کاری کنید که هر سکشن با شروعِ اسکرول، از بالا شروع شود.
7. نوعِ snap scroll باید به‌گونه‌ای تنظیم شود که در جهتِ عمودی باشد و مرورگر به نزدیک‌ترین نقطه‌ی snap بچسبد.

نکات

1. در فایل styles.css پس از کامنت کدهای خود را بنویسید.
2. در نهایت باید چنین نتیجه‌ای داشته باشیم، 3 صفحه به همین شکل که مثل ویدئو بالا به نرمی اسکرول میخورند و با کلیک بر روی نقاط به سکشن های متفاوت میریم :

آنچه باید آپلود کنید

فایلی که آپلود خواهید کرد باید دارای فرمت .zip باشد و دارای ساختار زیر باشد:

answer/
└─ styles.css

موفق باشید 🌟