如何创建：视差滚动

学习如何使用 CSS 创建“视差”滚动效果。

视差滚动

视差滚动是一种网站设计趋势，其中背景内容（例如图像）在滚动时的移动速度与前景内容不同。点击下面的链接，查看有视差滚动和没有视差滚动的网站之间的区别。

ویب پیمانہ بند سکرولنگ افکت والی نمائش

ویب پیمانہ بند سکرولنگ افکت کی نہ ہونے والی نمائش

تذکرہ:ویب پیمانہ بند سکرولنگ افکت موبائل ڈیوائس/سمارٹ فون پر ہمیشہ نہیں موثر ہوتا۔ لیکن، آپ موبائل ڈیوائس پر اس افکت کو بند کردیں سکتے ہیں (ایک مثال دیکھیں اس صفحے کا آخری مثال).

ویب پیمانہ بند سکرولنگ افکت کا قیام کیسے کریں

ایک کپسی عنصر استعمال کریں، اور اس کپسی میں مخصوص اونچائی کا پس منظر تصویر اضافہ کریں۔ بعد میں، background-attachment: fixed; ویب پیمانہ بند سکرولنگ افکت کا حقیقی قیام کریں۔ دیگر پس منظر کی اکائیاں تصویر کو وسط میں رکھنے اور مثالی طور پر اس کو کوئی بندھن نہ کرانے کے لئے استعمال کی جاتی ہیں:

پیکسل کی اکائی میں مثال

<style>
.parallax {
  /* استعمال کی تصویر */
  background-image: url("img_parallax.jpg");
  /* مخصوص اونچائی کو مقرر کریں */
  min-height: 500px;
  /* ویب پیمانہ بند سکرولنگ افکت کا قیام کریں */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
<!-- کپسی عنصر -->
<div class="parallax"></div>

آپ خود سنجیدن

مذکورہ مثال میں تصویر کی اونچائی کو پیکسل میں سے مقرر کیا گیا ہے۔ اگر آپ چاہتے ہیں کہ تصویر پورا اسکرین کا بندھن بنائی جائے، مثلاً 100%، تو ویب پیمانہ بند سکرولنگ کی کپسی کی اونچائی کو 100% مقرر کریں۔ یاد رہیں: آپ کو اور اس کے ساتھ height: 100%; تطبیق <html> اور <body> پر:

پرسنٹ کی اکائی میں مثال

body, html {
  height: 100%;
}
.parallax {
  /* استعمال کی تصویر */
  background-image: url("img_parallax.jpg");
  /* پورا اونچائی */
  height: 100%;
  /* ویب پیمانہ بند سکرولنگ افکت کا قیام کریں */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

آپ خود سنجیدن

کچھ موبائل ڈیوائسوں میں background-attachment: fixed; کی مدد سے مسئلہ آسانی سے حل کیا جاسکتا ہے۔ لیکن، آپ موبائل ڈیوائسوں پر ویب پیمانہ بند افکت کو بند کردیں سکتے ہیں:

مثال

/* تمام تبلٹ کمپیوٹروں اور موبائل فونوں کا ویب پیمانہ بند سکرولنگ افکت بند کردیا جائے گا۔ اگر ضروری ہو تو پیکسل میں اضافہ یا کُچ کریں */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

آپ خود سنجیدن

مذکورہ کوڈ میں، جب اسکرین کی چوڑائی 1366 پیکسل تک یا اس سے کم ہوتی ہے تو ویب کا ویب پیمانہ بند سکرولنگ افکت بند کردیا جائے گا، جو زیادہ تر تبلٹ کمپیوٹروں اور موبائل فونوں کے لئے قابل استعمال ہوتا ہے۔ یہ تبدیلی کے ذریعے کی جاتی ہے .parallax کلاس کا background-attachment خصوصیت سے fixed به scroll با استفاده از scroll به عنوان به عنوان، تصویر پس‌زمینه با بقیه بخش‌های صفحه حرکت می‌کند، نه به صورت ثابت در داخل视‌اندام.