السلام عليكم و رحمة الله وبركاته
رأيت مؤخراً عدة مواقع تقوم بعمل خلفيات بنفس طريقة عمل هذا الموقع
حيث تتحرك الصفحة و تحس أن الخلفية ثابته و الخلفية تتغير من موضع لآخر
تحياتى
كيف يتم عمل خلفيات بهذا الشكل
من خلال 50% 50% fixed هكذا
background: url('
no-repeat 50% 50% fixed;
شكراً جزيلاً , تقريباً هذا ما كنت أبحث عنه
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
اعطي الخليفة الكود التالي
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>
التعليقات