如何创建：视差滚动

学习如何使用 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;
  }
}

ທ່ານຕັ້ງເອງບັນທຶກ

ໃນລະຫັດການກ່າວກັບການກະກຽມສັນຍານທີ່ສູງດາວນິວານຫຼັງຈາກສາຍຫຼັງຄືນທີ່ວ່າມີລະດັບຄວາມກວ້າງຂວາງຫຼາຍຫຼາຍສາຍຫຼັງຄືນທີ່ຈະຖືກນຳໃຊ້ໂດຍສະເຕຕັນການບັດຄັບເພື່ອການສະແດງສັນຍານຫຼັງຄືນ. ນີ້ແມ່ນການປ່ຽນ .parallax ບັນດາ background-attachment ປະກອບປະກອບຈາກ fixed 到 scroll 来实现的。这样，背景图像就会随着页面的其余部分一起滚动，而不是固定在视口中。