هاور افکت اسکرول خودکار عکس در المنتور: ترفندی برای نمایش جذاب نمونه کارها

هاور افکت اسکرول خودکار عکس در المنتور: ترفندی برای نمایش جذاب نمونه کارها

سلام رفیق 👋چطوری؟ آماده‌ای برای یه آموزش باحال و کاربردی؟ امروز یه ترفند خارق‌العاده برات دارم که وقتی می‌خوای اسکرین‌ شات‌های بلند یا عکس نمونه کارهات رو نمایش بدی، حسابی به دردت می‌خوره! 😎

تو این آموزش، می‌خوایم یک هاور افکت فوق‌العاده بسازیم؛ به این صورت که وقتی کاربر ماوس رو روی تصویر نگه میداره، تصویر به صورت خودکار اسکرول می‌کنه و یه افکت زنده و جذاب ایجاد می‌کنه. اگه میخای این ترفندو یاد بگیری تا آخر این پست جذاب منو با نگاه زیبات همراهی کن😉

توجه🚨 این ترفند، همونطور که بالاتر گفتم، خوراکه نمایش اسکرین‌ شات‌های بلند و نمونه کارهاتونه. اما یه نکته مهم هم دارم برات: اگه می‌خوای از نمونه کارای طراحی سایتت یا صفحه وب، یه اسکرین‌ شات بلند بگیری، بهترین روش استفاده از افزونه GoFullPage هست. این افزونه حسابی به دردت می‌خوره؛ از کل صفحه یکجا با کیفیت بالا و بدون دردسر اسکرین میگیره. 😉📸 امتحانش کن و نتیجه رو ببین!

تا یادم نرفته نکته آخری رو هم بهت بگم: آقا این عکس های بلندی که این افزونه کروم میگیره معمولا حجم هاش بالاس و اصولی و درست نیست تو بیای عکس نمونه کارت مثلا با حجم 1 مگابایت آپلود کنی و نمایش بدی توی صفحه، برای همین پیشنهاد میکنم حجم عکس رو تا جای ممکن کاهش بدی تا سرعت لود سایتت به مشکل نخوره. برای اینکار میتونی از این آموزش استفاده کنی : کم کردن حجم عکس بدون افت کیفیت فقط در چند ثانیه

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

📌ساخت افکت اسکرول خودکار روی تصاویر در المنتور

خب، حالا وقتشه بریم سراغ اصل ماجرا و با هم این افکت جذاب رو روی تصاویر پیاده کنیم! 🚀
برای این کار، لطفاً مراحل زیر رو به ترتیب دنبال کن تا نتیجه‌ای که میخای رو بگیری ! 😊

مرحله ۱: ایجاد سکشن اصلی 🏗️

1. یه برگه جدید رو با المنتور باز کن یا صفحه‌ای که می‌خوای نمونه کارهات رو با این افکت جذاب نشون بدی رو انتخاب کن!
2. روی نماد ➕ در وسط صفحه کلیک کن تا یه سکشن جدید اضافه بشه
3. حالا برای این سکشن، یه ساختار ۳ ستونی انتخاب کن (البته بر اساس نیازت می‌تونی تعداد ستون‌ها رو کم یا زیاد کنی)

مرحله ۲: ایجاد بخش داخلی در هر ستون 📦

• در هر ستون، یک بخش داخلی (Inner Section) قرار بده

• یکی از ستون های بخش داخلی رو حذفش کن چون فقط به یه ستون نیاز داریم

• روی بخش داخلی کلیک کن و به تنظیماتش برو
• ارتفاع رو روی “کمترین ارتفاع” (Min Height) تنظیم کن
• مقدار ارتفاع رو حدود ۴۰۰ پیکسل یا هر عدد دلخواه دیگه‌ای که برای پروژه‌ات مناسبه قرار بده

مرحله ۳: تنظیم تصویر پس‌ زمینه 🖼️

حالا نوبت به قسمت جذاب کار می‌رسه:

• روی بخش داخلی کلیک کن و به تب استایل (Style) برو
• در قسمت پس‌زمینه (Background)، گزینه تصویر (Image) رو انتخاب کن
• یک تصویر عمودی و بلند آپلود کن یا از کتابخانه‌ات انتخاب کن

• برای موقعیت تصویر (Position)، “بالا وسط” (Top Center) رو انتخاب کن
• برای اندازه تصویر (Size)، گزینه “کاور” (Cover) رو انتخاب کن

مرحله ۴: اضافه کردن کد CSS برای افکت اسکرول خودکار 💻

اینجاست که جادو اتفاق می‌افته:

1. هنوز در تنظیمات بخش داخلی هستی، به تب پیشرفته (Advanced) برو
2. به قسمت CSS سفارشی (Custom CSS) اسکرول کن
3. در فیلد “کد CSS” این کد رو وارد کن :

selector{
    -webkit-transition: ease-in-out 4s !important;
    transition: ease-in-out 4s !important;
}
selector:hover{
    background-position: center bottom !important;
}

مرحله ۵: تکرار برای همه ستون‌ها 🔄

1. مراحل ۳ و ۴ رو برای بخش‌های داخلی کناری هم انجام بده
2. می‌تونی تصاویر متفاوتی برای هر بخش انتخاب کنی تا نمونه کارهای مختلفت رو نمایش بدی

چند نکته مهم برای اینکه نتیجه بهتری بگیری:

• انتخاب تصاویر مناسب: از تصاویر عمودی و بلند استفاده کن که جزئیات بیشتری رو با اسکرول خودکار نشون بدن 📸
• سرعت انیمیشن: عدد 4s در کد CSS سرعت انیمیشن رو تعیین می‌کنه. اگه می‌خوای سریع‌تر یا آهسته‌تر باشه، این عدد رو تغییر بده
• افزودن متن و دکمه برای توضیحات بیشتر: داخل هر بخش می‌تونی یه المان متن یا دکمه اضافه کنی تا توضیحات کوتاهی درباره پروژه‌ات نمایش داده بشه 🔥💬. این کار باعث می‌شه بازدیدکننده‌ها بهتر با جزئیات پروژه آشنا بشن و راحت‌تر روی لینک‌های دلخواه کلیک کنن. 🔗👀

شاید بگی چطوری؟ 🤔 نگران نباش، الان بهت میگم!

✅ فقط کافیه روی هر بخش داخلی کلیک کنی و دو تا المان دکمه و هدینگ بهش اضافه کنی.
✍️ حالا متن توضیحات رو بنویس و دکمه رو به دلخواه تنظیم کن.
🎨 در نهایت، با سلیقه خودت استایل‌ها رو شخصی‌سازی کن تا همه‌چیز حرفه‌ای و جذاب بشه! 😍🔥

🎨 کاملاً دستت بازه! می‌تونی هر المان و هر چیزی که دوست داری اضافه کنی. 🔥 بقیه‌ش به سلیقه و خلاقیت خودت بستگی داره! 😎✨

💡 استایل‌ها رو هم می‌تونی دقیقاً همون‌جوری که می‌خوای تنظیم کنی تا طراحی‌ات منحصر‌به‌فرد و حرفه‌ای بشه! 🚀🎯

جمع‌ بندی

تبریک می‌گم! 🎉 الان یاد گرفتی چطور یک افکت اسکرول خودکار جذاب در المنتور ایجاد کنی و نمونه کارهات رو به شکلی خفن نمایش بدی! 😎 امیدوارم از این آموزش لذت برده باشی. اگه سوالی داشتی یا نیاز به راهنمایی بیشتر بود، حتماً بهم بگو. موفق باشی🌟