كيفية إنشاء: التنقل البصري

تعلم كيفية إنشاء تأثير التنقل البصري باستخدام 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 سمة من محدد 到 to scroll