عنوان منتظر معرفی نمی‌ماند

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

معرفی فقط وقتی در چیدمان می‌آید که خود صفحه بخواهد. خانه‌ می‌خواهد. نوشته نه. جزئیات اینکه GSAP و Lenis روی مقاله اصلاً گرفته نمی‌شوند در کی انیمیشن را نمی‌آوریم است. این یادداشت فقط همان ثانیه‌ی اول خانه است.

عنوان از قبل در سند است

لایه‌ی معرفی position: fixed است، pointer-events: none، و z-index خودکار. پس‌زمینه شفاف است. بوم داخلش در CSS عرض و ارتفاع صفر دارد تا اسکریپت جای خالی را اندازه بگیرد. تا آن لحظه بوم روی حروف نمی‌نشیند، چون ابعادی ندارد.

اسکریپت جعبه‌ی .hero h1 را می‌خواند. عنوان همان سطر صفحه است، نه متنی که بوم باید اول بکشد تا دیده شود. اگر جعبه هنوز کوچک باشد، یعنی عرض یا ارتفاعش از هشت پیکسل کمتر، کد فرض می‌کند عنوان جای مشخصی نگرفته و بوم را در حاشیه‌ی ۲۴ پیکسلی کل پنجره می‌سنجد. در حالت عادی جعبه هست و بوم باید از آن فاصله بگیرد.

دکمه‌ی رد کردن جدا از این حساب است. position: fixed است، z-index هشتاد، و رویداد اشاره‌گر مال خودش را دارد. از همان نقاشی اول دیده می‌شود. منتظر قلم نمی‌ماند و منتظر قاب اول ذره هم نمی‌ماند. جایش با inset-inline-end است، پس ته خط می‌نشیند: در فارسی سمت چپ، در انگلیسی سمت راست، بدون قاعده‌ی جدا برای left و right. خود بوم aria-hidden است. اسم قابل‌دسترس صفحه همان عنوان سند است، نه ذره‌ها.

دو سطر روی بوم آف‌اسکرین اسم‌اند، نه عنوان صفحه. در خانه‌ی فارسی سطر اول نام فارسی است و سطر دوم نام انگلیسی. در خانه‌ی انگلیسی ترتیب برعکس است. وزن سطر اول ۸۰۰ است و سطر دوم ۶۰۰. این نقاشی اگر دیر شود یا اصلاً نیاید، h1 سر جایش می‌ماند.

بوم فقط جای مانده را می‌گیرد

حاشیه ۲۴ پیکسل است. اگر عنوان پهن باشد، پهن‌تر از شصت‌ودو درصد عرض پنجره، و از بالای صفحه دست‌کم سه برابر همان حاشیه پایین‌تر نشسته باشد، ارتفاع بوم فقط فاصله‌ی بالای عنوان است. ذره‌ها زیر عنوان نمی‌روند.

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

اگر آن جای مانده از ۱۴۰ پیکسل باریک‌تر یا از ۹۶ پیکسل کوتاه‌تر باشد، معرفی همان لحظه تمام می‌شود. ذره‌ای کشیده نمی‌شود. لایه محو می‌شود و بعد از ۳۲۰ میلی‌ثانیه از سند می‌رود. صفحه‌ی شلوغ، صفحه‌ی دومی روی کلمه‌ها نمی‌سازد.

رد کردن منتظر قلم نیست

کلیک روی دکمه و کلید Escape هر دو finish را صدا می‌زنند. این تابع منتظر document.fonts.load نمی‌ماند. نشست را با intro-seen علامت می‌زند، کلاس out را می‌گذارد، رویداد introout را می‌فرستد، و گره را بعد از ۳۲۰ میلی‌ثانیه برمی‌دارد. محو شدن شفافیت است، ۲۸ صدم ثانیه. مقیاسی روی لایه نیست.

نقاشی ذره کوتاه صبر می‌کند، و عنوان در آن صبر شریک نیست. دو سطر اسم با وزن ۸۰۰ و اندازه‌ی ۴۰ پیکسل از وزیرمتن و Inter درخواست می‌شوند. این درخواست با یک زمان‌سنج ۱۲۰ میلی‌ثانیه‌ای مسابقه می‌دهد. هر کدام زودتر تمام شود نقاشی شروع می‌شود. اگر قلم دیر کند، ذره با همان قلمی که هست شروع می‌شود و عنوان از قبل خوانده می‌شد. خود حرکت حدود ۶۲ صدم ثانیه است و بعد همان finish اجرا می‌شود.

جهت متن روی بوم آف‌اسکرین از document.dir می‌آید. فارسی راست‌به‌چپ کشیده می‌شود. این بوم دوبعدی است. Three.js نیست و رندرر هیرو هم نیست. قاطی کردنشان صفحه را سنگین‌تر از چیزی نشان می‌دهد که این لایه واقعاً انجام می‌دهد.

کی لایه اصلاً ساخته نمی‌شود

اسکریپت خطی، پیش از ماژول، دو چیز را چک می‌کند. اگر sessionStorage کلید intro-seen داشته باشد، یا prefers-reduced-motion جور باشد، عنصر معرفی حذف می‌شود. بومی ساخته نمی‌شود. بازگشت در همان نشست معرفی را دوباره نمی‌بیند. کسی که حرکت کمتر خواسته لایه را نمی‌گیرد.

پرس‌وجوی intro=1 آن کلید را پاک می‌کند تا بشود لایه را عمداً دوباره دید. این کلید تماشاست، نه دروازه. عنوان در هر دو حالت در سند می‌ماند. ورودهای بعدی صفحه به رویداد introout گوش می‌دهند و اگر لایه‌ای نباشد همان لحظه شروع می‌شوند. حذف لایه، بقیه‌ی خانه را معطل نمی‌کند.

صفحه‌ی اول بقیه‌ی سایت نیست

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

این را به امتیاز سرعت وصل نمی‌کنم. آزمایشگاهی برای این یادداشت نرانده‌ام. آنچه می‌شود از کد دید این است: عنوان در HTML است، بوم مستطیل عنوان را نمی‌گیرد، و رد کردن به قلم و ذره وابسته نیست.

یادداشت‌های مربوط به اینکه فایل اضافه به صفحه نرسد در صفحه‌ی سریع جمع شده‌اند. جنس کاری که برمی‌دارم، و چه چیزی شرح عمومی نمی‌گیرد، در همکاری است.