DEPTHWALK

SCROLL-DRIVEN 3D SPACE

وارد یک فضای دیجیتال شو، نه یک صفحه معمولی

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

3D چیدمان واقعی در محور عمق
Z-Axis حرکت دوربین با اسکرول
Room فضای شبیه راهرو / خانه
برای ورود اسکرول کن
ROOM 01

ورود به خانه‌ی دیجیتال

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

RIGHT WALL

متن روی دیوار راست

این کارت سمت راست قرار گرفته و کمی جلوتر از نقطه شروع است. وقتی دوربین جلو می‌رود، از کنار آن عبور می‌کنی، درست مثل راه رفتن در یک راهرو.

LEFT SIDE

یک پیام در سمت چپ، عمیق‌تر

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

CENTER HALL

حرکت دوربین، نه حرکت صفحه

موتور جاوااسکریپت مقدار اسکرول را به جابه‌جایی دوربین تبدیل می‌کند. یعنی با بالا و پایین کردن اسکرول، تو در محور عمق جلو و عقب می‌روی.

DETAIL ROOM

جزئیات نزدیک و دور

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

SIDE NOTE

اسکرول مثل قدم‌زدن

وقتی عقب برگردی، مسیر را برعکس طی می‌کنی. این مهم‌ترین تفاوت این مدل با انیمیشن‌های معمولی one-way است.

EXIT

خروج از فضای عمیق

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

ادامه مسیر
اسکرول کن؛ دوربین داخل فضا حرکت می‌کند

STRUCTURE

بعد از فضای عمیق، محتوای معمولی سایت شروع می‌شود

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

01

طراحی فضایی

محتوا فقط زیر هم چیده نمی‌شود؛ هر آیتم در موقعیت سه‌بعدی خودش قرار می‌گیرد.

02

حرکت دوربین

اسکرول به جابه‌جایی در محور Z تبدیل می‌شود تا حس ورود به عمق ایجاد شود.

03

کنترل نرم

حرکت با easing و lerp نرم می‌شود تا تجربه خشک و مکانیکی نباشد.

PROJECTS

نمونه ساختارهایی که می‌شود روی همین موتور ساخت

INTERACTIVE ROOM

اتاق معرفی برند

کاربر با اسکرول وارد یک مسیر داستانی می‌شود و پیام‌های برند را در نقاط مختلف فضا می‌بیند.

PORTFOLIO WALK

پورتفولیوی سه‌بعدی

نمونه‌کارها می‌توانند مثل قاب‌های روی دیوارهای یک گالری در عمق‌های مختلف چیده شوند.

CONTACT

حالا موتور اصلی آماده است

قدم بعدی این است که `style.css` را دقیقاً برای این HTML بنویسیم و بعد `script.js` را طوری بسازیم که دوربین واقعاً با اسکرول جلو و عقب برود.