باز
رفع مشکل طراحی یک صفحه با css و js
توسعه نرم‌افزار و آی‌تی12 روز و 18 ساعت زمان باقی‌مانده برای ارسال پیشنهاد
2,000,000 تومان
در این پروژه قصد داریم تا تصویر یک بنر را بر اساس اسکرول صفحه به تدریج از عرض مشخصی شروع کرده و به طور روان به عرض کامل صفحه برسد. تصویر باید از وسط صفحه شروع شود و در حین اسکرول گسترش یابد تا نهایتاً به 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) به درستی کار کند.HTML
برنامه نویسی تحت وب
جاوا اسکریپت (JavaScript)
سی اس اس (CSS)
طراحی رابط کاربری (UI)
فریلنسرهایی که در این پروژه پیشنهاد ارسال کرده‌اند
کارفرما این پیشنهاد را انتخاب کرده است.
mmdhastam4.92(56) امتیاز
زمان تحویل: 2 روز
ارسال پیشنهاد در: 2 روز و 5 ساعت پیش
زمان تحویل: 2 روز
ارسال پیشنهاد در: 2 روز و 4 ساعت پیش
alirezaelahi4.95(13) امتیاز
زمان تحویل: 3 روز
ارسال پیشنهاد در: 2 روز و 5 ساعت پیش
ehsanasf4.8(10) امتیاز
زمان تحویل: 1 روز
ارسال پیشنهاد در: 2 روز و 4 ساعت پیش
زمان تحویل: 2 روز
ارسال پیشنهاد در: 1 روز و 8 ساعت پیش
RP
زمان تحویل: 5 روز
ارسال پیشنهاد در: 1 روز و 9 ساعت پیش
آخرین پروژه های توسعه نرم‌افزار و آی‌تی
projects