در این پروژه قصد داریم تا تصویر یک بنر را بر اساس اسکرول صفحه به تدریج از عرض مشخصی شروع کرده و به طور روان به عرض کامل صفحه برسد. تصویر باید از وسط صفحه شروع شود و در حین اسکرول گسترش یابد تا نهایتاً به 100% عرض صفحه برسد.
اهداف پروژه:
تصویر بنر باید از عرض 65.3435% شروع شود و به تدریج با اسکرول به 100% برسد.
از ویژگیهای CSS مانند transition برای ایجاد یک تغییر تدریجی و روان استفاده شود.
برای بهبود عملکرد تغییرات، از ویژگی will-change برای اعلام تغییرات احتمالی در عرض و ارتفاع استفاده شود.
تصویر باید از وسط صفحه شروع شود و در طول اسکرول، حرکت عمودی آن با توجه به مقدار اسکرول تنظیم شود.
متن در صفحه باید در موقعیت ثابت بماند و از وسط صفحه در بالای تصویر قرار بگیرد.
انیمیشنها باید روان و با سرعت منطقی انجام شوند.
نیازمندیهای فنی:
HTML/CSS: تغییرات لازم برای انیمیشن و تنظیمات CSS برای بنر و تصویر.
JavaScript: برای مدیریت تغییرات در عرض و ارتفاع تصویر بر اساس مقدار اسکرول.
ویژگیهای CSS:
transition: برای اعمال تغییرات تدریجی در عرض و ارتفاع.
will-change: برای بهبود عملکرد و اعلام تغییرات در آینده.
position: absolute برای ثابت نگه داشتن متن در صفحه.
نحوه عملکرد:
وقتی کاربر اسکرول میکند، عرض تصویر از 65.3435% به تدریج با اسکرول افزایش مییابد و زمانی که اسکرول به مقدار مشخصی رسید، عرض تصویر به 100% میرسد.
در هنگام افزایش عرض تصویر، متن در صفحه باید ثابت باقی بماند و به اندازه ارتفاع بنر پایین بیاید تا هماهنگ با تصویر حرکت کند.
انیمیشنها باید روان و با زمانبندی مناسب انجام شوند تا تجربه کاربری بهتری ایجاد شود.
توضیحات تکمیلی:
این انیمیشن باید تنها برای صفحات بزرگتر از 768px فعال باشد (برای دستگاههای موبایل این ویژگی فعال نمیشود).
تغییرات باید به صورت تدریجی انجام شود و برای جلوگیری از تغییرات ناگهانی یا سریع، از انیمیشنهای CSS استفاده شود.
برای اطمینان از روان بودن انیمیشنها، باید از will-change برای ویژگیهای width و height استفاده کرد.
مهارتهای مورد نیاز:
تسلط به HTML، CSS و JavaScript
تجربه کار با انیمیشنهای CSS و transition
آشنایی با بهینهسازی عملکرد وب (استفاده از will-change و دیگر روشهای بهینهسازی)
مدت زمان پروژه:
زمان تخمینی برای تکمیل پروژه: 1 هفته (با توجه به نیاز به تست و بهینهسازی)
نیازمندیها:
کد باید قابل انعطاف باشد تا در آینده برای تغییرات بیشتر یا افزودن ویژگیهای جدید، به راحتی قابل ویرایش باشد.
کد باید در مرورگرهای مختلف (Chrome, Firefox, Safari) به درستی کار کند.