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

حالت های انیمیشنی با افزونه Animate It

افزونه‌ای که می خواهیم در این مطلب به شما معرفی کنیم با نام Animate It در مخزن وردپرس به ثبت رسیده است و می تواند حالت های انیمیشنی در وردپرس را ایجاد کند.
و تاکنون توانسته است تا بیش از ۲۰٫۰۰۰ نصب فعال و کسب امتیاز ۵۵ را ازآن خود نماید.

نصب و راه اندازی افزونه

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

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

Scroll Offset) in percentage): اگر انیمیشن شما با اسکرول کردن نشان داده شود از این قسمت می‌توانید میزان اسکرول در سایت را بر اساس درصد تعیین کنید تا هنگام رسیدن به این حد نصاب محتوای انیمیشن نمایش داده شود.
Enable on Smartphones: جهت نمایش حالت های انیمیشنی در وردپرس در اسمارت‌فون ها می‌توانید با فعال کردن این گزینه آن را فعال کنید.
Enable on Tablets: با فعال کردن این گزینه نیز امکان نمایش انیمیشن در نمایشگرهای موبایل ایجاد خواهد شد.

سایر تنظیمات

Hide Horizontal Scrollbar: با فعال کردن این گزینه در صورتی که اسکرول افقی صورت گیرد انیمیشن مخفی خواهد شد.
Hide Vertical Scrollbar: با فعال کردن این گزینه هم در صورتی که اسکرول عمودی صورت گیرد انیمیشن برای بازدیدکننده مخفی  خواهد شد.
Custom CSS: در نهایت در این قسمت نیز می‌توانید استایل دلخواه خود را برای انیمیشن‌ها وارد نمایید. از جمله این موارد می‌توان به راست‌چین کردن متن، انتخاب فونت متن و.. اشاره کرد.

افزودن افکت در وردپرس

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

بعد از کلیک بر روی دکمه مورد نظر پنجره‌ای مشابه تصویر زیر باز خواهد شد که در آن می‌توانید حالت های انیمیشنی در وردپرس خود را تعیین کرده و سایر تنظیمات آن را وارد کنید.

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

در نهایت به زبانه Options مراجعه کرده و تنظیمات دلخواه خود را برای حالت های انیمیشنی در وردپرس مورد نظر مشابه توضیحات زیر وارد کنید.
ابتدا در قسمت Animation Repeat تعداد دفعات تکرار انیمیشن را تعیین کنید، این تعداد می‌تواند به صورت یکبار، دوبار، سه بار، سفارشی و بی‌نهایت باشد.
بعد در قسمت Keep Element Final State انتخاب کنید که آیا می‌خواهید آخرین تغییرات در مرورگر کاربر باقی بماند یا نه. از این گزینه میتوان به صورتی بهره‌مند شد که تعداد دفعات و نوع انیمیشن در کوکی مرورگر ذخیره شود تا در مراجعات بعدی از آن استفاده شود.

Animate on

و در نهایت با مراجعه به قسمت Animate On می‌توانید نوع نمایش حالت های انیمیشنی در وردپرس را تعیین کنید تا در یکی از حالت‌های بارگزاری هنگام سایت، کلیک بر روی محتوا، هاور کردن بر روی محتوا و اسکرول کردن در سایت شروع نمایش داده شود.

فراموش نکنید که در هر مرحله با کلیک بر روی دکمه نارنجی رنگ که با عبارت Animate It آن را مشاهده می‌کنید می‌توانید دموی آن را مشاهده کنید.

در نهایت بر روی Insert کلیک کنید تا افکت شما مطابق با تنظیمات سفارشی شده ایجاد شود.

صفحه افزونه دانلود افزونه

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