سایت سینمایی و اسکرولی چیست؟ آموزش ساخت با هوش مصنوعی (قسمت ۱)

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

نمونهٔ خوبش سایت unitedcarriers.com است: پس‌زمینهٔ تیره، تصاویر بزرگِ صنعتی، عنوان‌های درشت، و بخش‌هایی که با اسکرول لایه‌لایه ظاهر می‌شوند. این درس، قسمت اول از سری تازهٔ ماست و قرار است اول از همه بفهمیم این سبک چیست، از چه اجزایی ساخته شده و کِی استفاده از آن عاقلانه است. در قسمت‌های بعدی سراغ ابزارها و ساختش با هوش مصنوعی می‌رویم.

روایت اسکرولی دقیقاً یعنی چه

در یک صفحهٔ معمولی، اسکرول فقط شما را پایین می‌برد؛ محتوا ثابت است و شما در آن حرکت می‌کنید. در یک صفحهٔ روایت‌محور، اسکرول به یک کنترل‌کننده تبدیل می‌شود: میزان پیشرویِ اسکرول تعیین می‌کند که انیمیشن در چه لحظه‌ای باشد. یعنی به‌جای اینکه انیمیشن خودش پخش شود، شما با اسکرول آن را جلو و عقب می‌برید.

این تفاوت کوچک، تجربهٔ کاملاً متفاوتی می‌سازد. کاربر حس کنترل دارد، سرعت روایت دست خودش است، و چون هر حرکت نتیجهٔ کار خودش است، درگیرتر می‌شود. اسم فنی این ایده اسکرولی‌تلینگ است: روایت داستان با اسکرول.

اجزای سازندهٔ یک صفحهٔ سینمایی

تقریباً همهٔ این سایت‌ها از ترکیب چند تکنیک محدود ساخته می‌شوند. اگر این‌ها را بشناسی، دیگر هیچ سایتی برایت جادو نیست:

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

نکتهٔ مهم این است که این‌ها را باید کم استفاده کرد. سایت‌های حرفه‌ای معمولاً دو یا سه تکنیک را با نظم تکرار می‌کنند، نه اینکه همه را یک‌جا بریزند.

ساختار روایی: همان الگویی که در نمونه‌ها می‌بینی

اگر ساختار سایت‌هایی مثل نمونهٔ بالا را باز کنی، تقریباً همیشه یک قوسِ داستانی مشابه می‌بینی. این ترتیب تصادفی نیست؛ همان ساختار یک ارائهٔ فروش خوب است:

1. قلاب: یک تصویر تمام‌صفحه و یک جملهٔ کوتاه که وعدهٔ اصلی را می‌گوید.
2. اعتبار: چند عدد کلیدی که ثابت می‌کند این ادعا پشتوانه دارد.
3. مسئله: دردی که مخاطب با آن درگیر است.
4. راه‌حل: خدمات یا محصول، معمولاً در بخشی پین‌شده که پرده‌به‌پرده باز می‌شود.
5. تمایز: چرا این گزینه با بقیه فرق دارد.
6. گواه اجتماعی: نظر مشتری‌ها و لوگوی همکاران.
7. دعوت به اقدام: یک قدم روشن و بدون ابهام.

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

ابزارها: با چه چیزی این سایت‌ها ساخته می‌شوند

سه مسیر رایج وجود دارد و انتخاب بین‌شان به مهارت و بودجهٔ تو بستگی دارد:

در مسیر کدنویسی، استاندارد عملی صنعت کتابخانهٔ GSAP به‌همراه افزونهٔ ScrollTrigger است که کارِ پین و اسکراب را انجام می‌دهد، و معمولاً Lenis برای نرم‌کردن اسکرول کنارش می‌آید. خبر مهم اینکه GSAP و همهٔ افزونه‌هایش حالا کاملاً رایگان شده‌اند؛ یعنی همان ابزاری که سایت‌های گران‌قیمت با آن ساخته می‌شوند، بدون هزینه در دسترس توست.

نقش هوش مصنوعی در این ماجرا

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

هوش مصنوعی در این پروژه‌ها سه نقش خوب بازی می‌کند: هم‌فکر برای ساختن استوری‌بورد و متن هر پرده، کدنویس برای پیاده‌سازی هر افکت به‌صورت جداگانه، و عیب‌یاب وقتی انیمیشن آن‌طور که می‌خواهی کار نمی‌کند. چیزی که در آن ضعیف است، «سلیقهٔ نهایی» و تنظیم دقیق زمان‌بندی است؛ آن بخش کار توست.

روش پرامپت‌نویسی برای این پروژه‌ها

بزرگ‌ترین اشتباه این است که بنویسی «یک سایت سینمایی زیبا برایم بساز». خروجی‌اش همیشه یک صفحهٔ کلیشه‌ای و بی‌روح است. روش درست، شکستن کار به پرده‌ها و ساختن پرامپت برای هر پرده به‌صورت جداگانه است. یک پرامپت خوب در این حوزه شش چیز را مشخص می‌کند:

1. نقش و پشتهٔ فنی: دقیقاً بگو با چه ابزاری کد بزند (مثلاً HTML و CSS و جاوااسکریپت خالص به‌همراه GSAP و ScrollTrigger).
2. هدف پرده: این بخش چه پیامی را منتقل می‌کند.
3. رفتار اسکرول: چه چیزی پین شود، چه چیزی اسکراب شود، انیمیشن از چه حالتی به چه حالتی برود.
4. جزئیات بصری: رنگ‌ها، فونت، فاصله‌ها، حال‌وهوا (مثلاً تیره و صنعتی با کنتراست بالا).
5. قیدها: تک‌فایل بودن، بدون وابستگی اضافه، ریسپانسیو، و احترام به تنظیم کاهش حرکت.
6. قالب خروجی: یک فایل کامل و قابل‌اجرا، به‌همراه توضیح کوتاه هر بخش.

نمونهٔ اسکلت پرامپت برای یک پرده:

نقش: توسعه‌دهندهٔ فرانت‌اند متخصص انیمیشن اسکرول.
پشته: HTML + CSS + JS خالص، GSAP و ScrollTrigger از CDN.
پرده: بخش «خدمات» با سه کارت.
رفتار: بخش پین شود؛ با اسکرول، کارت‌ها یکی‌یکی از پایین وارد شوند
       و کارت قبلی کمی کوچک و کم‌رنگ شود. اسکراب فعال باشد.
بصری: پس‌زمینهٔ تیره، متن روشن، فونت درشت، فضای خالی زیاد.
قیدها: یک فایل HTML کامل، ریسپانسیو، اگر کاربر کاهش حرکت را
       فعال کرده بود همهٔ انیمیشن‌ها غیرفعال شوند.
خروجی: کد کامل + سه خط توضیح دربارهٔ تنظیم start و end.

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

کِی این سبک را نباید انتخاب کرد

صداقت فنی مهم‌تر از هیجان است. این سبک برای صفحهٔ معرفی برند، صفحهٔ فرود یک محصول خاص، نمونه‌کار و روایت‌های داده‌محور عالی است؛ اما برای فروشگاه بزرگ، وبلاگ پرمقاله، پنل کاربری و هر جایی که کاربر دنبال «رسیدن سریع به اطلاعات» است، انتخاب بدی است.

سه هزینهٔ واقعی را هم در نظر بگیر: سرعت (تصاویر بزرگ و انیمیشن سنگین)، موبایل (پین‌کردن روی صفحهٔ کوچک باید ساده‌سازی شود) و دسترس‌پذیری (بعضی کاربران با حرکت زیاد دچار سرگیجه می‌شوند و مرورگرشان تنظیم کاهش حرکت را روشن دارد؛ رعایتش اختیاری نیست).

اشتباه‌های رایج تازه‌کارها

• افکت روی افکت: وقتی همه‌چیز حرکت می‌کند، هیچ‌چیز دیده نمی‌شود.
• شروع از کد به‌جای استوری‌بورد: بدون نقشهٔ روایت، نتیجه شلوغ و بی‌هدف می‌شود.
• اسکرول‌ربایی: دست‌کاری شدید اسکرول که کاربر حس کند کنترل را از دست داده.
• بی‌توجهی به وزن تصاویر: یک صفحهٔ زیبا که پنج ثانیه بالا نمی‌آید، شکست‌خورده است.
• تست‌نکردن روی موبایل: بیشتر بازدید از موبایل می‌آید، نه از مانیتور بزرگ تو.
• خواستن کل سایت در یک پرامپت: نتیجه همیشه سطحی است؛ پرده‌به‌پرده جلو برو.

پرسش‌های پرتکرار

برای ساخت چنین سایتی حتماً باید برنامه‌نویس باشم؟

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

آیا این افکت‌ها سایت را کند می‌کنند؟

اگر بی‌حساب استفاده شوند، بله. اما انیمیشن اسکرولِ درست‌پیاده‌شده سبک است؛ چیزی که معمولاً سایت را کند می‌کند تصاویر و ویدیوهای بهینه‌نشده است، نه خودِ انیمیشن.

هوش مصنوعی می‌تواند کل سایت را یک‌جا بسازد؟

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

از کجا شروع کنم؟

از یک صفحهٔ ساده با فقط دو افکت: یک هیروی پارالاکس و یک بخش پین‌شده. وقتی این دو را کامل فهمیدی، بقیهٔ تکنیک‌ها ترکیبی از همین منطق‌اند.

جمع‌بندی

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

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

نسخهٔ فوری این مطلب در تلگرام: اینجا بخوانید