Parallaks
CSS yordamida "parallaks" aylantirish effektini yaratishni o‘rganing.
Parallaks
Parallaks aylantirish — veb-saytlardagi trend bo‘lib, unda sahifa aylantirilganda fon kontenti (masalan, rasm) old plandagi kontentdan boshqacha tezlikda harakatlanadi. Parallaks aylantirishli va parallakssiz veb-sayt o‘rtasidagi farqni ko‘rish uchun quyidagi havolalarni bosing.
Eslatma: Parallaks aylantirish mobil qurilmalar/smartfonlarda har doim ham ishlamaydi. Biroq mobil qurilmalarda bu effektni o‘chirish uchun media so‘rovlardan foydalanishingiz mumkin (ushbu sahifadagi oxirgi misolga qarang).
Parallaks aylantirish effekti qanday yaratiladi
Konteyner elementidan foydalaning va unga muayyan balandlikdagi fon rasmini qo‘shing. So‘ng haqiqiy parallaks effektini yaratish uchun background-attachment: fixed dan foydalaning. Qolgan fon xususiyatlari rasmni markazlash va mukammal masshtablash uchun ishlatiladi:
Piksellar bilan misol
<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>
O‘zingiz sinab ko‘ring »
Yuqoridagi misolda rasm balandligini belgilash uchun piksellar ishlatildi. Agar rasm butun ekranni egallashi uchun foizdan, masalan 100% dan foydalanmoqchi bo‘lsangiz, parallaks konteyneri balandligini 100% ga o‘rnating. Eslatma: Shuningdek, <html> va <body> elementlarining ikkalasiga ham height: 100% ni qo‘llashingiz kerak:
Foizlar bilan misol
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;
}
O‘zingiz sinab ko‘ring »
Ba’zi mobil qurilmalarda background-attachment: fixed bilan muammo bor. Biroq mobil qurilmalar uchun parallaks effektini o‘chirishda media so‘rovlardan foydalanishingiz mumkin:
Misol
/* 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;
}
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!