پیمایش اختلاف منظر برای مبتدیان – انجمن DEV

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

از کجا آمده؟
تاریخ در فیلم اولیه به سال 1930 برمی گردد. به طور خاص در انیمیشن برای کمک به ارائه عمق. در اینجا یک مثال عالی از نحوه استفاده دیزنی از مفهوم در Bambi آورده شده است.

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

مثال ها:
روش های واقعا ساده ای برای استفاده از پیمایش parralax وجود دارد که احتمالاً ده ها بار در روز می بینید. افکت‌های اسکرول دو بعدی ساده می‌تواند راهی آسان برای تزریق محتوای متفاوت باشد.

ساده

در حالی که همان اصول و لایه بندی و لایه بندی باشد تا تجربه ای همهجانبه برای کاربر ایجاد کند.
از: isladjan

*بیا شروع کنیم!
*

در این مثال، ما فقط به یک ساختار سبک HTML نیاز داریم و در بالای آن یک ظاهر طراحی می کنیم.

   <div class="parallax">
      <div class="parallax-layer layer1">LAYER 1</div>
      <div class="parallax-layer layer2">LAYER 2</div>
      <div class="parallax-layer layer3">LAYER 3</div>
      <div class="parallax-layer layer4">LAYER 4</div>
      <div class="parallax-layer layer5">LAYER 5</div>
    </div>

از اینجا، ما به طور کامل در CSS کار خواهیم کرد. توجه داشته باشید کارهای زیادی وجود دارد که می توانید در JS انجام دهید تا حتی بیشتر به آن اضافه کنید، اما برای این مثال اساسی، چسبیدن به یک زبان برای دیدن همه قطعات در یک مکان مفید است.

خط اول این است که چگونه باید هر خط اول CSS را شروع کنید. حاشیه پیش فرض را از برنامه خود حذف کنید.

body {
  margin: 0;
}

در مرحله بعد، با استفاده از className از HTML، کلاس wrapper خود را طوری تنظیم می کنیم که تمام لایه های ما را در بر بگیرد.

.parallax {
  height: 100vh;
  overflow-x: hidden;
  perspective: .5px;
}

ارتفاع: ما این را روی حداکثر ارتفاع نمای تنظیم می کنیم تا با صفحه نمایشی که روی آن است سازگار شود. ما حداکثر را تنظیم کردیم تا شکافی در بالا یا پایین نداشته باشید که این توهم را از بین می برد.

سرریز-x: اینگونه است که می‌خواهید سرریز افقی این عنصر را در صورتی که بزرگتر از صفحه نمایش باشد، مدیریت کنید. “مخفی” تضمین می کند که به دلیل این عنصر اسکرول جانبی دریافت نمی کنیم.
درباره سایر گزینه های overflow-x در اینجا بیشتر بیاموزید.

چشم انداز: در این مثال 2 بعدی، ما از 1 استفاده می کنیم زیرا عمق اضافی اضافه نمی کنیم، اما زمانی که وارد 2.5D و 3D شوید، این عدد بسیار مهم است.
در اینجا با چشم انداز عنصر سه بعدی بازی کنید.

اکنون به بخش سرگرم کننده عمق می رسد. همه ما قبلا مختصات x/y را در یک صفحه مسطح ترسیم کرده ایم. هر گونه تنظیم در موقعیت یک عنصر دقیقاً همین است. اما نگاشت مختصات z چیزی است که در پرسپکتیو نقش دارد.

اگر تا به حال در بسیاری از برنامه ها به جلو/ارسال به عقب آورده اید، شاخص Z عنصر را تنظیم کرده اید. Z سومین هماهنگ شده در مدل سه بعدی است. ما از ویژگی transform برای تغییر اشیاء z-index عناصر خود استفاده خواهیم کرد.

.layer1 {
  transform: translateZ(0);
}
.layer2 {
  transform: translateZ(-.5px);
}
.layer3 {
  transform: translateZ(-2px);
}
.layer4 {
  transform: translateZ(-5px);
}
.layer5 {
  transform: translateZ(-7px);
}

ما اکنون مختصات Z RELATIVE را به کلاس wrapper خود تغییر داده ایم. اعلان لایه 1 0 تغییر دارد. این شی ثابت ما است و همانطور که به طور معمول یک پس زمینه ثابت دارید در جای خود باقی می ماند.

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

افزودن چند برچسب به عناصر ما:

div {
  font-size: 50px;
  text-align: center;
}

حالا ما مقداری کد اضافه می کنیم که می خواهیم تنظیمات wrapper را تنظیم کنیم، اما فقط به لایه های خاصی که کلاس ها را سوراخ می کنند.

.parallax-layer.layer1 {
  width: 100%;
  height: 100em;

  background-color: pink;
}

همانطور که گفته شد، لایه اول پایه است، بنابراین عرض آن 100٪ است و ارتفاع آن 100 rem است.

حفظ 100% با در این مثال مفید است، اما تنظیم ارتفاع به شما امکان می‌دهد ببینید که لایه‌ها چگونه تغییر می‌کنند. سعی کنید از 100 ولت ساعت استفاده کنید!

برای بقیه، همه چیز را تغییر دهید!

بالا: اگر به صورت تصاعدی در هر لایه افزایش دهید، تغییر فاصله از بالای صفحه می تواند به ایجاد یک افکت تونل کمک کند.

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

عرض: توجه کنید که عرض همه 100٪ است. این 100% نسبت به لفاف است که 100vw است. بنابراین با دورتر شدن از پایه، 100% در واقع کوچکتر می شود.

نگه داشتن 100% به تونل کمک می کند، اما شاید شما می خواهید افقی رو به رشدی داشته باشید که کل صفحه را در بر می گیرد، آن را در اینجا تغییر دهید و نیازی نیست نگران سرریز شدن آن باشید زیرا لفاف از قبل اسکرول افقی را پنهان می کند.

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

.parallax-layer.layer2 {
  top: 2rem;

  width: 100%;
  height: 110rem;

  background-color: olive;
}

.parallax-layer.layer3 {
  top: 10rem;

  width: 100%;
  height: 100rem;

  background-color: plum;
}

.parallax-layer.layer4 {
  top: 50rem;

  width: 100%;
  height: 100rem;

  background-color: yellow;
}

.parallax-layer.layer5 {
  top: 75rem;

  width: 100%;
  height: 100rem;

  background-color: lightBlue;
}

پس از مثال ها:
https://speckyboy.com/css-javascript-parallax-scrolling/

برای درک بهتر 2.5 بعدی، گاهی اوقات یادگیری بیشتر در مورد رندر سه بعدی می تواند مفید باشد.

https://codepen.io/ewahda/full/OwEGyV

منبع بسیار مفید اما پیشرفته:
https://blog.logrocket.com/create-parallax-scrolling-css/#scaling-design