如何创建：视差滚动

学习如何使用 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 به عمل می‌آید. در این صورت، تصویر پس‌زمینه با بقیه بخش‌های صفحه می‌چرخد، نه به صورت ثابت در دیدگاه.