ساخت رابطهای سینمایی با Next.js و animejs
چطور معماری سرورمحور Next.js را با animejs ترکیب کنیم تا رابطهایی متحرک بسازیم که همچنان سریع، قابلدسترس و سئو-فرندلی باقی میمانند.
Mehran Hatami4 دقیقه مطالعهبیشتر سایتهای «انیمیشندار» یک مصالحه انجام میدهند: عملکرد یا سئو را فدای حرکت میکنند. App Router در Next.js به شما اجازه میدهد کاملاً از این مصالحه فرار کنید — محتوا را روی سرور برای موتورهای جستوجو و اولین رندر بسازید، بعد تعامل را با کامپوننتهای کلاینت کوچک و هدفمند روی آن اضافه کنید.
حرکت را فقط به چیزی که واقعاً دیده میشود محدود کن
همیشه پیش از اجرای هر انیمیشن ورود یا هاور، وضعیت prefers-reduced-motion را بررسی کن — این یک الزام جدی است، نه یک فکر بعدی.
animejs بهطبیعی در این مدل جا میافتد. بهجای اجرای همه انیمیشنها هنگام mount، انیمیشنهای ورود را با Intersection Observer به هر بخش محدود میکنم، تا حرکت فقط وقتی اجرا شود که آن بخش واقعاً وارد دید کاربر شده باشد. این کار وزن اولیه صفحه را پایین نگه میدارد و از انیمیتکردن محتوایی که بازدیدکننده هرگز به آن اسکرول نمیکند جلوگیری میکند.
اینجاست که یک scope مجزا برای هر انیمیشن هم به کار میآید: mount و revert کردن یک scope بهازای هر بخش یعنی هر انیمیشنی که ساخته، هنگام unmount شدن آن بخش خودکار پاک میشود، بدون نیاز به مدیریت دستی تایملاینها.
کاهش حرکت یک الزام است، نه یک امکان جانبی
سختترین بخش، احترام به تنظیمات کاربر است. هر انیمیشن در یک رابط سینمایی باید یک حالت جایگزین برای «کاهش حرکت» داشته باشد — محتوایی که فقط بلافاصله و بدون حرکت نمایش داده میشود. این را یک الزام جدی میدانم، نه یک فکر بعدی، و پیش از اجرای هر انیمیشن ورود یا هاور، وضعیت prefers-reduced-motion را بررسی میکنم.
- هر فراخوانی انیمیشن را پشت یک هوک واحد کاهشحرکت قرار بده — این بررسی نباید در دهها کامپوننت پخش شود
- وقتی کاهش حرکت فعال است، حالت نهایی را بلافاصله رندر کن، نه اینکه المان را کلاً حذف کنی
- افکتهای وابسته به ماوس (دکمههای مغناطیسی، کرسر سفارشی) هم باید پشت همان هوک باشند
- با روشنکردن تنظیم سیستمعامل تست کن، نه فقط با خواندن کد
نتیجه رابطی است که زنده بهنظر میرسد بدون آنکه سنگین باشد: نمایشهای پلکانی، عناصر مداری و بازخورد ظریف هنگام هاور، همه روی صفحهای که همچنان سریع بارگذاری میشود و برای موتورهای جستوجو کاملاً قابلخواندن است.