تلفن تماس

02191097212

ساعت کاری

9 تا 17 هر روز هفته

آموزش ایجاد افکت اسکرول تصویر در المنتور

مسیر: 
آموزش ایجاد افکت اسکرول تصویر در المنتور
آموزش ایجاد افکت اسکرول تصویر در المنتور
آموزش ایجاد افکت اسکرول تصویر در المنتور

فهرست مطالب آموزش ایجاد افکت اسکرول تصویر در المنتور

در این مقاله، به شما آموزش میدهیم تا با استفاده از المنتور، افکت اسکرول تصویر را در صفحات وب خود ایجاد کنید.افکت اسکرول تصویر به شما امکان می‌ دهد که هنگام نگاه کردن کاربر به تصاویر، تصویر کامل را نشان دهید. وقتی وبسایتی که قالب ‌های آماده به فروش می ‌رساند را مشاهده می‌ کنید، می ‌توانید پیش‌ نمایش کامل قالب‌ ها را با استفاده از افکت اسکرول تصویر مشاهده کنید. با این ویژگی ‌ها، می ‌توانید به راحتی نمای کامل وبسایت خود را در یک فضای کوتاه به کاربران نشان دهید. به طور معمول، اگر بخواهید تصویر کامل یک وبسایت را نمایش دهید، میزان فضای زیادی را در صفحات وب شما اشغال خواهد کرد و همچنین بر طراحی وبسایت شما تأثیر خواهد گذاشت. اما با افکت اسکرول تصویر، می ‌توانید به روشی زیبا تعداد بیشتری تصویر را اضافه کنید که به سادگی توجه مخاطبان را جلب می ‌کند. (برای استفاده از این قابلیت باید نسخه ی پرو المنتور را نصب داشته باشید.)

نکته : برای خرید افزونه المنتور پرو اینجا کلیک کنید.

نحوه ی ایجاد افکت اسکرول تصویر در المنتور

المنتور ابزارکی برای افکت اسکرول تصویر ارائه نمی ‌دهد. بنابر این، برای افزودن این افکت باید از CSS سفارشی استفاده کنید. اما برای استفاده از قابلیت CSS سفارشی، نیازمند استفاده از المنتور پرو هستید. حالا یک صفحه را با ویرایشگر المنتور باز کرده و بر روی آیکون “افزودن بخش” کلیک کنید.

نحوه ی ایجاد افکت اسکرول تصویر در المنتور
نحوه ی ایجاد افکت اسکرول تصویر در المنتور

حالا باید ستون مورد نظر را برای بخش خود انتخاب کنید. در این بخش یک ستون را انتخاب کنید.

انتخاب بخش در المنتور
انتخاب بخش در المنتور

حالا بر روی آیکون ویرایش بخش کلیک کرده و در قسمت “طرح بندی”، کم ترین ارتفاع را تا 500 تنظیم کنید.

قسمت طرح بندی تنظیمات بخش در المنتور
قسمت طرح بندی تنظیمات بخش در المنتور

حالا بلوک بخش داخلی را به بخش ساخته شده اضافه کنید و ستون پیش‌ فرض را حذف کنید. بر روی آیکون ویرایش ستون کلیک راست کرده و بر روی گزینه حذف کلیک کنید تا ستون اصلی حذف شود.

حذف بخش پیش فرض وجایگزین کردن بخش اصلی
حذف بخش پیش فرض وجایگزین کردن بخش اصلی

بار دیگر به گزینه ویرایش بخش داخلی بروید و در تب “طرح بندی”، کم ترین ارتفاع را تا 500 برسانید همانطور که قبلاً نشان داده شد. حالا به قسمت استایل بخش داخلی بروید و از گزینه پس ‌زمینه، پس‌ زمینه کلاسیک (classic) را انتخاب کنید. سپس باید تصویر پس ‌زمینه خود را اضافه کنید. از گزینه موقعیت تصویر، موقعیت تصویر را به “مرکز برتر” (Top Center) تنظیم کنید. از گزینه تکرار کننده، بدن تکرار (no-repeat) را انتخاب کنید و اندازه را به “پوشش”(cover) تنظیم کنید.

قسمت استایل در المنتور
قسمت استایل در المنتور

حالا به تب پیشرفته بروید تا CSS سفارشی را اضافه کنید. در زمینه CSS سفارشی، کد مورد نظر خود را اضافه کنید.

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

شما می ‌توانید مقدار ترانزیشن را تغییر دهید تا افکت اسکرول برای تصاویر تغییر کند. اگر می ‌خواهید چندین تصویر با همین افکت را اضافه کنید، می ‌توانید ستون را تکثیر کرده و سپس تصویر پس ‌زمینه را تغییر دهید.

جستجو
×
پیمایش به بالا

%70 تخفیف کلیه محصولات به مدت محدود

ساعت
دقیقه
ثانیه