در این پروژه قصد داریم تا تصویر یک بنر را بر اساس اسکرول صفحه به تدریج از عرض مشخصی شروع کرده و به طور روان به عرض کامل صفحه برسد. تصویر باید از وسط صفحه شروع شود و در حین اسکرول گسترش یابد تا نهایتاً به 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) به درستی کار کند.

به یک طراح سایت حتما (شاپیفای) با حداقل 1 سال تجربه در شاپیفای

• حتما مسلط به کدنویسی ویدجت های شاپیفای برای 1 همکاری طولانی مدت (حداقل 1 سال ) نیازمندیم.

اگر برای این موقعیت شغلی تمایل دارید، اثبات تسلطتتون در کدنویسی ویدجت با یک تست ساده الزامی میباشد.

ما به دنبال طراح وب حرفه‌ای برای همکاری در چندین پروژه‌ی طراحی وبسایت در زمینه‌های مختلف هستیم. تمام سایت‌ها با وردپرس و المنتور + مجموعه جت اجرا می‌شوند و نیاز به طراحی حرفه‌ای و مدرن دارند.

✨ ویژگی‌های موردنیاز طراحی: ✅ طراحی پویا، مدرن و خلاقانه با رنگ‌های زنده ✅ رعایت اصول UI/UX برای تجربه کاربری بهتر ✅ استفاده از فونت‌های فارسی استاندارد و تایپوگرافی جذاب ✅ طراحی ریسپانسیو و بهینه برای موبایل و تبلت ✅ رعایت اصول سئو در طراحی صفحات

📌 جزئیات پروژه: 🔹 برای هر سایت، ابتدا یک دیزاین گاید (راهنمای طراحی) و پالت رنگ تهیه می‌شود. 🔹 صفحه اصلی طراحی می‌شود و در سایت‌های فروشگاهی، صفحات فروشگاه و تک‌محصول هم اضافه خواهند شد. 🔹 پس از تأیید طراحی، همکاری برای صفحات داخلی مثل درباره ما و تماس با ما ادامه خواهد داشت. 🔹 همکاری طولانی‌مدت مدنظر است.

💡 اگر تجربه کار با المنتور و مجموعه جت داری و به UI/UX و سئو مسلط هستی، خوشحال می‌شیم باهات همکاری کنیم!

📩 برای اطلاعات بیشتر و ارسال نمونه کارها، پیام بدهید.