كيف - Parallax Scrolling
تعرف على كيفية إنشاء تأثير تمرير "اختلاف المنظر" باستخدام CSS.
المنظر
Parallax Scrolling هو اتجاه موقع ويب حيث يتم نقل محتوى الخلفية (أي صورة) بسرعة مختلفة عن محتوى المقدمة أثناء التمرير. انقر فوق الارتباطات أدناه لمعرفة الفرق بين موقع ويب به خاصية تمرير المنظر وبدون تصفح.
ملاحظة: لا يعمل التمرير المنظر دائمًا على الأجهزة المحمولة / الهواتف الذكية. ومع ذلك ، يمكنك استخدام استعلامات الوسائط لإيقاف تشغيل التأثير على الأجهزة المحمولة (انظر المثال الأخير في هذه الصفحة).
كيفية إنشاء تأثير Parallax Scrolling
استخدم عنصر حاوية وأضف صورة خلفية إلى الحاوية بارتفاع معين. ثم استخدم background-attachment: fixed
لإنشاء تأثير اختلاف المنظر الفعلي. تُستخدم خصائص الخلفية الأخرى لتوسيط الصورة وقياسها بشكل مثالي:
مثال بالبكسل
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set
a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position:
center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element
-->
<div class="parallax"></div>
استخدم المثال أعلاه البكسل لتعيين ارتفاع الصورة. إذا كنت تريد استخدام النسبة المئوية ، على سبيل المثال 100٪ ، لجعل الصورة تناسب الشاشة بأكملها ، فاضبط ارتفاع حاوية المنظر على 100٪. ملاحظة: يجب عليك أيضًا التقديم height: 100%
على كل من <html> و <body>:
المثال بالنسبة المئوية
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Full height */
height: 100%;
/* Create the parallax
scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
توجد مشكلة في بعض الأجهزة المحمولة background-attachment: fixed
. ومع ذلك ، يمكنك استخدام استعلامات الوسائط لإيقاف تأثير اختلاف المنظر للأجهزة المحمولة:
مثال
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if
needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}