18

كيف يتم عمل خلفيات بهذا الشكل

السلام عليكم و رحمة الله وبركاته

رأيت مؤخراً عدة مواقع تقوم بعمل خلفيات بنفس طريقة عمل هذا الموقع

حيث تتحرك الصفحة و تحس أن الخلفية ثابته و الخلفية تتغير من موضع لآخر

تحياتى

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

17
alsadi أضف ردا

من خلال 50% 50% fixed هكذا

background: url('

no-repeat 50% 50% fixed;

12
assassinateur أضف ردا

لا حاجة ل50% 50%

خيار Fixed سيتم العمل

3
raghib أضف ردا

السلام عليكم

الخاصية تسمى parallax

ابحث عنها في جوجل

موفق

0
khashabawy أضف ردا

شكراً جزيلاً , تقريباً هذا ما كنت أبحث عنه

Parallax scrolling is a 2d animation process that creates an illusion of depth by animating foreground layers faster than background layers. When you observe the landscape from a moving car, objects closer to the car appear to pass you faster than scenery further away. Parallax scrolling uses the same principle to trick the viewer into thinking they are observing a 3d scene

0
Hussam Abd أضف ردا

background: url('

fixed;

فقط قم بوضع fixed خلق رابط الصورة

0
midoghranek أضف ردا

اعطي الخليفة الكود التالي

background-attachment: fixed

ولشرح كيف يتسخدمها الموقع الذي تضع

قام بوضع المحتوي المراد وضع الخفية تحته بين هذا الكود

<section class="homepage-header-photo">

</section>

ثم اعطي لهذا الكود الاستيال التالي

<stlye>

.homepage-header-photo {

background: url('/homepage/images/bg-promo-box-new.jpg') no-repeat 50% 50% fixed;
background-size: cover;
height: 500px;

}

</style>

-1
hamzageek أضف ردا

Fixed

-2
حمزة الزايدية أضف ردا

تتم عن طريق css

background: url("background url here") no-repeat center top fixed;