حرف پیش از حرکت در سند است
کلاس reveal از اول دیده می‌شود. فقط html.is-motion آن سطرها را پنهان می‌کند، و این کلاس وقتی خانه یا پروژه‌ها واقعاً حرکت را شروع کنند اضافه می‌شود.
نوشته‌ی محمد هنرور· ۵ دقیقه مطالعه
کلاسی به نام reveal آسان بد خوانده می‌شود. انگار متن جایی پشت صحنه ایستاده تا بعد ظاهر شود. در این سایت حرف‌ها از قبل داخل HTML هستند. کلاس آن‌ها را از نقاشی اول برنمی‌دارد. کسی که مقاله، صفحه‌ی درباره، یا یک صفحه‌ی موضوع را باز می‌کند جمله را در خود پاسخ می‌گیرد. لازم نیست اسکریپتی اول برسد تا سطر حق داشته باشد دیده شود.
حرکت تصمیم بعدی است و دامنه‌اش باریک است. خانه و صفحه‌ی پروژه‌ها تنها مسیرهایی‌اند که ورود متحرک می‌خواهند. خواستن‌شان با یک پرچم است. خود پرچم چیزی را پنهان نمی‌کند. پنهان شدن فقط وقتی شروع می‌شود که حرکت روی یکی از همین دو صفحه واقعاً آغاز شده باشد.
استایل سطر را نشان می‌دهد
در استایل سراسری، .reveal شفافیت را ۱ می‌گذارد و تبدیل را برمی‌دارد. اگر هیچ اتفاق دیگری نیفتد، صفحه همین قاعده را دارد. قاعده‌ای که متن را پنهان می‌کند انتخابگر مشخص‌تری است: html.is-motion .reveal شفافیت را ۰ و جابه‌جایی عمودی را ۳۰ پیکسل می‌گذارد. دو انتخابگر دیگر، html:not(.is-motion) .reveal و html.no-motion .reveal، شفافیت را به ۱ برمی‌گردانند و تبدیل را پاک می‌کنند. هر سندی که is-motion نگرفته با این‌ها جور است. بیشتر سایت همین حال را دارد.
این انتخابگرهای اضافه برای مشخص‌بودن‌اند. خود کلاس بلوک را خالی نمی‌کند. فقط کلاس ریشه، is-motion، این کار را می‌کند. اگر آن کلاس نباشد، سطر دیده می‌شود، حتی جایی که مارک‌آپ هنوز reveal دارد چون یک الگوی مشترک این قلاب را روی عنوان یا کارت گذاشته. قلاب به این معنی نیست که ورود حتماً اجرا می‌شود.
وقتی prefers-reduced-motion روی reduce باشد، همان استایل .reveal و html.is-motion .reveal را با شفافیت ۱ و بدون تبدیل می‌نویسد. خواستِ حرکت کمتر، خواستِ بخش خالی نیست. این ترجیح مدت گذارهای صفحه را هم کوتاه می‌کند. به‌جای آن‌ها نوشته‌ی گم‌شده نمی‌گذارد. کسی که از مرورگر صفحه‌ی آرام‌تر خواسته باید بتواند جمله‌ای را بخواند که در فایل بوده است.
کلاس همراه خود حرکت می‌آید
قالب روی عنصر ریشه data-motion می‌نویسد. پیش‌فرض در ویژگی‌های قالب plain است. خانه و صفحه‌ی پروژه‌ها حرکت را روشن می‌کنند، پس آن دو rich هستند. اسکریپت حرکت صفحه را rich می‌داند فقط وقتی این ویژگی rich باشد و سند عنصری با شناسه‌ی read-progress نداشته باشد. مقاله آن عنصر را دارد. مقاله حرکت را هم خاموش می‌گذارد. هر دو آزمون را رد می‌کند و این عمدی است. خواندن جایی نیست که هزینه‌ی کتابخانه‌ی ورود را بدهد.
واردات داخل یک شرط است: صفحه rich باشد و حرکت کمتر خواسته نشده باشد. GSAP و ScrollTrigger و Lenis واردات پویا در همان شاخه‌اند. اگر شرط برقرار نباشد گرفته نمی‌شوند. بعد از آن‌که این واردات حل شد، و فقط آن‌وقت، اسکریپت is-motion را به عنصر سند اضافه می‌کند، آن هم اگر حرکت کمتر هنوز خاموش باشد. حرکت کمتر هرگز وارد شاخه نمی‌شود، پس برای آن خواننده کلاس اضافه نمی‌شود. مسیری نیست که کلاس پنهان‌کننده به امید رسیدن بعدی کتابخانه گذاشته شود.
ورودهایی که دنبال می‌آیند GSAP را با immediateRender: false صدا می‌زنند. آنچه می‌تواند ناپدید شود واکنش استایل به is-motion است؛ کلاسی که همان لحظه اضافه می‌شود که این مسیر می‌خواهد حرکت کند. شفافیت صفر، حالت استراحت .reveal نیست که اگر کتابخانه‌ای دیرتر رسید محو شدن را تمام کند. اگر کتابخانه شروع نشود، کلاس اضافه نمی‌شود و شفافیت ۱ می‌ماند. ترتیب داخل فایل همه‌ی ادعا است: کتابخانه را روی صفحه‌ای که خواسته بار کن، بعد کلاس را بگذار، بعد ورود را اجرا کن.
فاصله‌ی بین کلاس و قاب اول انیمیشن را اندازه نمی‌گیرم. برای این یادداشت زمان نگرفته‌ام. ترتیب برای خواندن مهم است. حرف‌ها پیش از شروع این ترتیب در HTML بودند.
حلقه‌ی جداگانه‌ای عنصرهای data-split را کلمه به کلمه در span می‌پیچد. این حلقه بیرون از واردات کتابخانه است و روی صفحه‌ای که هرگز حرکت نمی‌کند هم می‌تواند اجرا شود. جابه‌جایی آن کلمه‌ها، با yPercent و شفافیت، داخل شاخه‌ی GSAP می‌ماند. در صفحه‌ی plain کلمه‌ها هنوز متن همان عنصرند و بیرون از صفحه منتظر حرکتی که ساخته نخواهد شد نمی‌مانند.
درباره و وبلاگ خواندنی می‌مانند
صفحه‌ی درباره حرکت را پاس نمی‌دهد. ویژگی‌اش plain می‌ماند. فهرست وبلاگ، صفحه‌ی برچسب، مقاله، صفحه‌ی موضوع، و صفحه‌ی همکاری هم plain هستند. plain یعنی شاخه‌ی واردات اجرا نمی‌شود. GSAP و Lenis جزو خواندن این مسیرها نیستند. اسکریپت کوچکی روی قالب این تصمیم را می‌گیرد و تصمیم رد کردن است. کتابخانه‌های انیمیشن بیرون می‌مانند. درباره و وبلاگ باید بدون آن‌ها خواندنی بمانند.
درباره هنوز عنوان‌ها و بلوک‌ها را با reveal علامت می‌زند. این کلاس، بی‌آن‌که is-motion روی ریشه باشد، آن‌ها را خالی نمی‌کند. نام یک h1 داخل سند است. تصویر منبع دارد. پاراگراف‌ها پاراگراف‌اند. هیچ‌کدام منتظر محوی نمی‌مانند که این مسیر اجرا نخواهد کرد. مقاله هم همین است. نثر مارک‌داون بود و ساخت از قبل آن را HTML کرده. نوار باریکی بالای صفحه با جای پیمایش مقیاس می‌گیرد. دروازه‌ای جلوی کلمه‌ها نیست. جست‌وجو در صفحه جمله را پیدا می‌کند چون جمله متن است، نه یک قاب از انیمیشن.
عنوان منتظر معرفی نمی‌ماند نیمه‌ی دیگر صفحه‌ی اول است: بوم معرفی و دکمه‌ی رد کردن. آن لایه مال خانه است و عنوان آنجا در HTML است، خواه بوم بیاید خواه نیاید. یک بلوک reveal پایین‌تر در همان صفحه می‌تواند کوتاه پنهان شود، وقتی is-motion روی ریشه است و ورود شروع شده. مقاله این قدم را برنمی‌دارد. معرفی خانه و کلاس reveal دو سازوکارند. جمع کردنشان در یک جمله درباره‌ی «انیمیشن» هر دو را مثل پوششی روی حروف نشان می‌دهد. حروف در هر دو حال داخل سندند.
این یادداشت امتیاز نمی‌سازد
نتیجه‌ی آزمایشگاهی به این متن وصل نمی‌کنم و رتبه‌ای هم ادعا نمی‌کنم. برای این یادداشت آزمونی نرانده‌ام. آنچه کد نشان می‌دهد یک ساختار است. حرف‌ها در HTMLاند. .reveal دیده می‌شود مگر html.is-motion حاضر باشد. آن کلاس وقتی اضافه می‌شود که خانه یا صفحه‌ی پروژه‌ها واقعاً حرکت را شروع کنند، بعد از بار شدن GSAP و وقتی حرکت کمتر خواسته نشده باشد. درباره و وبلاگ آن را شروع نمی‌کنند. بدون کتابخانه‌ی انیمیشن خواندنی می‌مانند.
یادداشت‌های نیاوردن فایلی که خواننده برای خواندن لازم ندارد زیر صفحه‌ی سریع جمع شده‌اند. شخصی که این یادداشت‌ها نام می‌برند صفحه‌ی درباره است: تصویر، نام، و تلگرام. جنس کار، و تنها تماس عمومی، در همکاری است. آن تماس تلگرام است، @MH759. ایمیل عمومی روی سایت نیست.
صفحه‌ی موضوع فهرست کوتاهی از یادداشت‌هاست، نه هر نوشته‌ای که از حرکت حرف بزند. آن حد در صفحه‌ی موضوع فهرست وبلاگ نیست است. چرا مقاله‌ها صفحه‌ی درباره را نویسنده می‌گذارند در نویسنده همان صفحه‌ی درباره است آمده است.