افزونه ایجاد حالت های انیمیشنی و متحرک

با سلام

*شما در این آموزش با نحوه ساخت حالت های انیمیشنی و متحرک در وردپرس آشنا می شوید*

همانطور که می دانید با استقاده از حالت های انیمیشنی می توانید جذابیت خاصی به سایت خود ببخشید.همچنین با استفاده از css انیمیشین شما می توانید برای هر یک از بخش های سایت خود با حالتی خاص به نمایش بگذارید. با افزونه Animate It شما می توانید به هر بخش از سایت خود حالت های انیمیشنی ایجاد کنید تا به وسیله این انیمیشن ها سایت شما بارگذاری شود.

افزونه Animate It را از لینکی که در انتهای همین آموزش قرار داده شده است، دانلود کرده و پس از نصب این افزونه را فعال کنید.پس از فعال کردن این افزونه گزینه ای با نام Animate It در منوی پیشخوان شما و در قسمت تنظیمات افزونه ایجاد می شود.

همانطور که در تصویر مشاهده می‌کنید تنظیمات افزونه را برای نمایش حالت های انیمیشنی در وردپرس به دلخواه خود سفارشی سازی کنید (توضیحات این قسمت در زیر داده شده است )

در بخش Scroll Offset) in percentage) در صورتی که می خواهید انیمیشن با اسکرول کردن صفحه نمایش داده شود می توانید این بخش را سفارشی سازی کنید .

بخش Enable on Smartphones را می توانید برای زمانی که میخواهید در تلفن های هوشمند نمایش داده شود را فعال کنید.

بخش Enable on Tablets را هم زمانی که می خواهید در تبلت ها مشاهده شود این بخش را فعال کنید.

در بخش آخر Custom CSS نیز می توانید استایل هایی که خودتان سفارشی سازی کردید را وارد کنید.

برای اینکه شما بتوانید این حالت های انیمیشنی را در نوشته خود اجرا کنید با ادامه آموزش همراه باشید.

مطابق تصویر زیر در قسمت نوشته برای این افزونه دکمه ای اضافه خواهد شد.روی آن کلیک کرده تا بعد از باز شدن پنجره افکت دلخواه خود را انتخاب و یا اجرا کنید.

پنجره ای که بعد کلیک بر روی دکمه ظاهر می شود:

در پنجره ای که برای شما باز می شود (تصویر فوق)در بخش Animation افکت خود را انتخاب کنید.در بخش Delay مدت زمان شروع نمایش افکت بر حسب ثانیه وارد کنید.در بخش Duration مدت زمان انیمیشن را مشخص کنید ودر بخش Timing نوع زمان سنج را مشخص کنید.

 * برای نمایش دموی انیمیشن می توانید از گزینه ی Animate It استفاده کنید *

قسمت دوم:

در این قسمت در زبانه اول نوع افکت و در زبانه بعدی زمان شروع و بعد مدت زمان شروع و زمان سنجی را که در تصویر قبلی هم قرار داده اید را تعیین کنید.

 * برای نمایش دموی انیمیشن می توانید از گزینه ی Animate It استفاده کنید *

قسمت سوم:

در بخش Animation Repeat، هم برای تعداد دفعات تکرار این گزینه را انتخاب کنید.

در قسمت دوم Keep Element Final State هم برای اینکه آخرین تغییرات در مرورگر باقی بماند یا نه این گزینه را انتخاب کنید.

در قسمت Animate On می توانید نوع نمایش را تعیین کنید

 * برای نمایش دموی انیمیشن می توانید از گزینه ی Animate It استفاده کنید *

در پایان بر روی Insert کلیک کنید تا انیمیشن ایجاد شود.

برای نمایش محتوا لازم است تا مشابه تصویر محتوای خود را در بین شورت‌کد ایجاد شده و به جای جمله Please add your content in this area وارد کنید تا اعمال شود.

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

دانلود افزونه animate-it