در این مقاله، به شما آموزش میدهیم تا با استفاده از المنتور، افکت اسکرول تصویر را در صفحات وب خود ایجاد کنید.افکت اسکرول تصویر به شما امکان می دهد که هنگام نگاه کردن کاربر به تصاویر، تصویر کامل را نشان دهید. وقتی وبسایتی که قالب های آماده به فروش می رساند را مشاهده می کنید، می توانید پیش نمایش کامل قالب ها را با استفاده از افکت اسکرول تصویر مشاهده کنید. با این ویژگی ها، می توانید به راحتی نمای کامل وبسایت خود را در یک فضای کوتاه به کاربران نشان دهید. به طور معمول، اگر بخواهید تصویر کامل یک وبسایت را نمایش دهید، میزان فضای زیادی را در صفحات وب شما اشغال خواهد کرد و همچنین بر طراحی وبسایت شما تأثیر خواهد گذاشت. اما با افکت اسکرول تصویر، می توانید به روشی زیبا تعداد بیشتری تصویر را اضافه کنید که به سادگی توجه مخاطبان را جلب می کند. (برای استفاده از این قابلیت باید نسخه ی پرو المنتور را نصب داشته باشید.)
نکته : برای خرید افزونه المنتور پرو اینجا کلیک کنید.
نحوه ی ایجاد افکت اسکرول تصویر در المنتور
المنتور ابزارکی برای افکت اسکرول تصویر ارائه نمی دهد. بنابر این، برای افزودن این افکت باید از 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;
}
شما می توانید مقدار ترانزیشن را تغییر دهید تا افکت اسکرول برای تصاویر تغییر کند. اگر می خواهید چندین تصویر با همین افکت را اضافه کنید، می توانید ستون را تکثیر کرده و سپس تصویر پس زمینه را تغییر دهید.
