انیمیشن CSS در وردپرس می‌تواند ورود یک بخش، تغییر وضعیت یا تأکید کوتاه روی یک عنصر را نشان دهد. برای این کار هم افزونهٔ مخصوص ویرایشگر بلوکی وجود دارد و هم می‌توان یک کلاس CSS محدود نوشت. ابتدا هدف حرکت را مشخص کنید؛ متحرک‌کردن همهٔ عنوان‌ها و تصویرها معمولاً خواندن صفحه را دشوار می‌کند.
افزودن انیمیشن CSS در وردپرس با Blocks Animation
افزونهٔ Blocks Animation برای بلوک‌های Gutenberg طراحی شده و تنظیمات حرکت را به نوار کناری بلوک اضافه می‌کند. این توضیح به معنی پشتیبانی خودکار از تمام اجزای Elementor، ابزارک‌های قالب یا ویرایشگر کلاسیک نیست.
- افزونه را از مخزن رسمی نصب و فعال کنید.
- نوشته یا برگه را در ویرایشگر بلوکی باز کنید.
- بلوک مورد نظر، مثلاً یک تصویر یا گروه، را انتخاب کنید.
- در تنظیمات همان بلوک، بخش Animation یا Animations را باز کنید.
- یک افکت ملایم انتخاب و پیش‌نمایش را مشاهده کنید.
- سرعت و تأخیر را در حد نیاز تغییر دهید و برگه را ذخیره کنید.
اگر Otter Blocks نیز دارید، پیش از افزودن ابزار دوم بررسی کنید قابلیت مورد نیاز از قبل در آن فعال نباشد. محل تنظیمات در نسخه‌های مختلف می‌تواند تغییر کند؛ در Otter، بخش Block Tools مسیر فعال‌کردن ابزار انیمیشن است.
سرعت، تأخیر و زمان شروع چه تفاوتی دارند؟
Speed یا Duration مدت اجرای حرکت را کنترل می‌کند. Delay زمان انتظار پیش از شروع است. تأخیر زیاد روی عنوان، فرم یا دکمهٔ اصلی باعث می‌شود کاربر برای دیدن محتوا منتظر بماند؛ این انتظار به معنی سریع‌ترشدن سایت نیست.
در راهنمای انیمیشن‌های Otter گزینه‌هایی مانند Trigger offset و Play on hover نیز معرفی شده‌اند. بنابراین شروع حرکت همیشه فقط به بارگذاری اولیهٔ صفحه محدود نیست. تنظیم موجود در نسخهٔ خود را بررسی کنید. Replay animation برای پیش‌نمایش ویرایشگر است و لزوماً به معنی تکرار دائمی در سایت نیست.
تایپ و شمارش برای چه محتوایی مناسب‌اند؟
افکت Typing متن را تدریجی نشان می‌دهد؛ برای دستور مهم، خطا یا عنوانی که باید فوری خوانده شود مناسب نیست. افکت Count برای مقدار عددی است. در ابزارهای دارای این قابلیت، ابتدا عدد را انتخاب و افکت را اعمال کنید، سپس متن توضیحی کنار آن را بنویسید.
نبود گزینهٔ شمارش روی متن عادی الزاماً خطا نیست. نوع انتخاب و نسخهٔ افزونه بر گزینه‌های موجود اثر دارد. عدد نهایی باید واقعی و قابل‌فهم باشد؛ انیمیشن شمارنده دلیل اعتبار آمار نیست. وجود این افکت‌ها در Otter نیز تضمین نمی‌کند تمام آن‌ها در هر نسخهٔ افزونهٔ مستقل دیده شوند.
نمونهٔ ساده بدون افزونه
برای یک حرکت کوتاه، کلاس hn-fade-in را در بخش کلاس CSS اضافیِ بلوک قرار دهید؛ نقطه را در نام کلاس وارد نکنید. کد زیر را در محل CSS سفارشی سایت یا فایل استایل قالب فرزند بگذارید. فایل قالب والد را مستقیم ویرایش نکنید، چون به‌روزرسانی ممکن است تغییر را جایگزین کند.
@media (prefers-reduced-motion: no-preference) {
.hn-fade-in {
animation: hn-fade-in .4s ease-out;
}
@keyframes hn-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
}این نمونه یک‌بار با اعمال استایل اجرا می‌شود و منطق شروع هنگام اسکرول ندارد. کلاس فقط روی عنصر انتخابی اثر می‌گذارد. از آن برای پنهان‌کردن محتوای ضروری بالای صفحه استفاده نکنید.
احترام به تنظیم کاهش حرکت
طبق مرجع prefers-reduced-motion، مرورگر می‌تواند ترجیح کاربر برای کاهش حرکت غیرضروری را دریافت کند. در نمونهٔ بالا، انیمیشن فقط وقتی اجرا می‌شود که چنین ترجیحی اعلام نشده باشد؛ حالت عادی محتوا قابل‌مشاهده باقی می‌ماند.
برای افزونه هم نتیجه را با تنظیم Reduce Motion دستگاه امتحان کنید. غیرفعال‌شدن حرکت در این حالت لزوماً خرابی نیست. کاربر را برای دیدن یک افکت مجبور به تغییر تنظیم دسترس‌پذیری نکنید.
چک‌لیست پیش از انتشار
- متن و دکمه‌ها بدون وابستگی به حرکت قابل‌استفاده باشند.
- روی موبایل، حرکت باعث برش تصویر یا اسکرول افقی نشود.
- چند افکت از افزونه و صفحه‌ساز هم‌زمان روی یک عنصر اجرا نشوند.
- برای رفع نمایش‌ندادن، انتخاب بلوک، تنظیم حرکت و کش مرتبط را بررسی کنید.
- پس از تغییر، سرعت و تجربهٔ واقعی صفحه را بسنجید؛ زیبایی پیش‌نمایش معیار کافی نیست.
مطالعهٔ مرتبط
بازبینی فنی: ۱۳ آبان ۱۴۰۵. تاریخ انتشار اولیه و نشانی قبلی حفظ شده‌اند.
