تجربه‌ی اسکرول سه‌بعدی

افکت پارالکس

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

اسکرول کن

پارالکس چیست؟

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

وارد شو

تصویر از دل یک قاب کوچک بیرون می‌آید و کل صفحه را پر می‌کند — همان‌قدر که اسکرول می‌کنی.

سرعت‌های متفاوت،
یک داستان واحد

۰۱ — سکون

یک تصویر، سه پرده

پس‌زمینه ثابت می‌ماند و متن‌ها یکی‌یکی ظاهر می‌شوند — مثل تیتراژ یک فیلم.

۰۲ — عمق

عمق از حرکت

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

۰۳ — رها

و بعد، رها می‌شوی

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

چهار لایه از یک تجربه

افقی اسکرول کن — نه، عمودی! ما خودمان می‌چرخانیم ✨
۰۱ — عمق

لایه‌های جداگانه

هر لایه سرعت مخصوص خودش را دارد؛ همین اختلاف سرعت، توهم فاصله می‌سازد.

۰۲ — آرامش

حرکت نرم

پس‌زمینه کندتر حرکت می‌کند تا چشم روی محتوا استراحت کند، نه اینکه خسته شود.

۰۳ — تعامل

واکنش به کاربر

صفحه به حرکت موس و اسکرول پاسخ می‌دهد و حس زنده بودن پیدا می‌کند.

۰۴ — روایت

هر بخش، یک پرده

پارالکس محتوا را به صحنه‌های پشت‌سرهم تبدیل می‌کند؛ اسکرول می‌شود فیلم‌نامه.

Parallax Scroll Depth Motion Parallax Scroll Depth Motion
حرکت
آرام
عمیق

حالا نوبت توست

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

شروع کن
ساده‌ترین نسخه: background-attachment: fixed;