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

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

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

در المنتور به صورت پیش فرض امکان افزودن انیمیشن توالی تصویر با اسکرول وجود ندارد. اما می ‌توانید با استفاده از افزونه های کمکی که با المنتور سازگاری دارند کد سفارشی CSS/JS این قابلیت را به المنتور اضافه کنید. با اضافه کردن کد ‌های CSS و JavaScript مربوطه، می ‌توانید افکت اسکرول توالی تصویر را ایجاد کنید.در این مقاله، به شما آموزش میدهیم تا با استفاده از المنتور، با روشی ساده افکت توالی انیمیشنی و جذاب را با اسکرول به صفحه خود بیفزایید. این روش به شما امکان می‌ دهد تا با استفاده از ابزارها و ویژگی ‌های المنتور، افکت ‌های جذاب و زیبا را به صفحه خود اضافه کرده و تجربه کاربرانتان را بهبود بخشید. (برای استفاده از این قابلیت باید نسخه ی پرمیوم المنتور را نصب داشته باشید.)

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

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

نسخه پرمیوم المنتور امکانات مختلفی را برای افزودن افکت‌ های انیمیشنی و حرکتی برای وبسایت شما فراهم می‌ کند. اما، امکان افزودن افکت توالی تصویر با اسکرول در آن وجود ندارد. بنابر این، در اینجا از افزونه اسکرول (Scrollsequence)برای ایجاد یک توالی تصویر سینمایی هنگامی که کسی روی وبسایت اسکرول می‌ کند، استفاده می‌ کنیم. نسخه رایگان این افزونه در دایرکتوری افزونه ‌های وردپرس موجود است و به شما امکان می ‌دهد تمامی ویژگی‌ ها و قابلیت ‌های اصلی را داشته باشید. برای نصب و فعالسازی افزونه در وبسایتتان، به صفحه Scrollsequence > افزودن (Add New Scollsequence) صفحه بروید. از این صفحه، می‌ توانید اولین توالی خود را ایجاد کنید. اما قبل از آن، باید نحوه کارکرد توالی را یاد بگیرید.

برای هر انیمیشن، شما باید یک یا چند قسمت (Scene) را تنظیم کنید و هر قسمت شامل تعدادی تصویر است. بر اساس تصاویر شما، انیمیشن توالی را تولید خواهد کرد. هر قسمت یک چرخه کامل انیمیشن است. هنگامی که شما چندین قسمت اضافه می ‌کنید، کاربران ابتدا قسمت اول را مشاهده کرده و سپس به قسمت دوم منتقل می‌ شوند.برای ایجاد یک قسمت ، شما نیاز به تصاویر توالی دارید. بیشتر کاربران تصاویری را از ویدئو استخراج می کنند. ابزار های مختلفی وجود دارند که به شما در استخراج تصاویر از ویدئو کمک می‌ کنند. وقتی تصاویر شما آماده شدند، حالا زمان آن رسیده است تا اولین قسمت خود را ایجاد کنید. روی افزودن قسمت (Add Scene) کلیک کنید و سپس تصاویر خود را بارگذاری کنید.

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

برای دستیابی به یک انیمیشن کامل، توسعه‌ دهنده ی افزونه توصیه می ‌کند که کاربران 50 تا 100 تصویر بارگذاری کنند تا انیمیشن به خوبی نمایش داده شود. همچنین، باید مطمئن شوید که تصاویر بارگذاری شده به ترتیب باشند. اگر ترتیب آنها صحیح نیست، از گزینه مرتب سازی استفاده کنید.

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

اگر می خواهید قسمت دیگری اضافه کنید، روی آیکون “+” کلیک کنید. پس از کامل شدن بارگذاری و مرتب سازی تصاویر، به مراحل بعدی بروید.

ایجاد انیمیشن محتوای ثابت

شما باید قوانین انیمیشن را در گزینه انیمیشن محتوای ثابت اضافه کنید. ابتدا باید انتخاب‌کننده‌ های CSS را اضافه کنید و سپس بر اساس آن ‌ها زمانبندی و تصویری را که در زمان اجرای انیمیشن نمایش داده می ‌شود را انتخاب کنید.

/* Example CSS code for fixed content animation rules */

/* CSS selector for your target element */
.your-element-selector {
/* Animation rules for fixed content */
}

لطفاً در کد بالا، your-element-selector  را با انتخاب‌ کننده CSS مناسب برای المان مورد نظرتان جایگزین کنید و قوانین انیمیشن محتوای ثابت را براساس نیاز خودتان تنظیم کنید.

ایجاد انیمیشن محتوای ثابت در (Scrollsequence)
ایجاد انیمیشن محتوای ثابت در (Scrollsequence)

حالا در فیلد “Fixed Content Animation”، انتخاب‌کننده css را وارد کنید و شماره تصویری را که انیمیشن با آن شروع می‌ شود، را وارد کنید. سپس شماره تصویری را که انیمیشن با آن تمام می شود، را وارد کنید.

فیلد "Fixed Content Animation" در (Scrollsequence)
فیلد “Fixed Content Animation” در (Scrollsequence)

شما همچنین می‌ توانید مدت زمان تصویر را تنظیم کنید تا فاصله‌ ی بین تصاویر را مشخص کنید.

 ایجاد تغییر مقیاس و تراز بندی تصویر

در گزینه ی “Image Scale and Alignment”، شما می ‌توانید قسمت های عمودی و افقی را در دستگاه‌ های تلفن همراه و رایانه‌ های شخصی تنظیم کنید. همچنین، شما می ‌توانید تراز بندی افقی و عمودی را برای هر دو حالت تلفن همراه و رایانه‌ های شخصی تنظیم کنید.

 ایجاد تغییر مقیاس و تراز بندی تصویر (Scrollsequence)
ایجاد تغییر مقیاس و تراز بندی تصویر (Scrollsequence)

تنظیمات دیگری که باید آن را انجام دهید عبارتند از:

ایجاد قسمت ‌ها و پیکر بندی انیمیشن از مهم‌ ترین موارد برای ایجاد توالی تصویر است. اما این افزونه همچنین قابلیت‌ هایی برای پیکر بندی پایه نیز ارائه می ‌دهد. از گزینه تنظیم “Scrollsequence” در پنل راست، شما می ‌توانید تنظیمات مربوط به موقعیت تصویر، تأخیر اسکرول، عرض تصویر و شفافیت تصویر را انجام دهید. همچنین، می‌ توانید از CSS سفارشی نیز استفاده کنید.

دیگر تنظیمات در (Scrollsequence)
دیگر تنظیمات در (Scrollsequence)

وقتی کار خود را تمام کردید، بر روی دکمه “انتشار” کلیک کنید تا انیمیشن منتشر شود. حال به صفحه “Scrollsequence” بروید و کد کوتاه (shortcode) را کپی کنید تا بتوانید آن را در هر قسمتی از وبسایت خود استفاده کنید.

کپی کردن کد کوتاه سفارشی برای انتقال انیمیشن به المنتور
کپی کردن کد کوتاه سفارشی برای انتقال انیمیشن به المنتور

اضافه کردن انیمیشن اسکرول را به المنتور

وقتی انیمیشن شما آماده شد، باید آن را به المنتور اضافه کنید. می ‌توانید انیمیشن را به یک صفحه موجود اضافه کنید یا می ‌توانید برای انیمیشن طراحی جدیدی ایجاد کنید.صفحه را با ویرایشگر المنتور باز کنید و از پنل ابزارک ها، ابزارک کد کوتاه ( shortcode ) را اضافه کنید.

اضافه کردن انیمیشن اسکرول را به المنتور
اضافه کردن انیمیشن اسکرول را به المنتور

حالا در فیلد کد کوتاه، کد کوتاه انیمیشن Scrollscene را که به تازگی ساخته ‌اید، اضافه کنید. انیمیشن فورا به صفحه اضافه خواهد شد.

اضافه کردن کد سفارشی انیمیشن به ابزارک کد کوتاه در المنتور
اضافه کردن کد سفارشی انیمیشن به ابزارک کد کوتاه در المنتور

وقتی کار تمام شد، روی دکمه “انتشار” یا “به‌روز رسانی” کلیک کنید تا تغییرات ذخیره شوند.

سبد خرید0
هیچ کالایی در سبد خرید وجود ندارد!
شما ممکن است علاقه مند باشید به …
افزونه عمده فروشی محصولات ووکامرس پرمیوم | WooCommerce Wholesale Pro
قیمت اصلی 389,000 تومان بود.قیمت فعلی 52,350 تومان است.
افزونه یادداشت های خصوصی پلاگین ثبت نام کاربر | User Registration Private Notes
قیمت اصلی 379,000 تومان بود.قیمت فعلی 56,850 تومان است.
افزونه ارسال پست برای وردپرس فرمز | WPForms Post Submissions
قیمت اصلی 379,000 تومان بود.قیمت فعلی 56,850 تومان است.
افزونه مشاهده سریع محصولات ووکامرس پرمیوم | WooCommerce Quick View Pro
قیمت اصلی 389,000 تومان بود.قیمت فعلی 58,350 تومان است.
افزونه سوپر المنت برای المنتور | Super Elements - Addons for Elementor
قیمت اصلی 409,000 تومان بود.قیمت فعلی 102,250 تومان است.
0
پیمایش به بالا
%75 تخفیف ویژه

مدت زمان تخفیف محدود می باشد! لذت ببرید 🤑

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