วิธีการ - การเลื่อนแบบพารัลแลกซ์
เรียนรู้วิธีสร้างเอฟเฟกต์การเลื่อนแบบ "พารัลแลกซ์" ด้วย CSS
พารัลแลกซ์
การเลื่อนแบบพารัลแลกซ์เป็นแนวโน้มของเว็บไซต์ที่เนื้อหาพื้นหลัง (เช่น รูปภาพ) ถูกย้ายด้วยความเร็วที่ต่างจากเนื้อหาเบื้องหน้าขณะเลื่อน คลิกลิงก์ด้านล่างเพื่อดูความแตกต่างระหว่างเว็บไซต์ที่มีการเลื่อนแบบพารัลแลกซ์และไม่มีการเลื่อน
การสาธิตด้วยการเลื่อนแบบพารัลแลกซ์
สาธิตโดยไม่ต้องเลื่อนพารัลแลกซ์
หมายเหตุ:การเลื่อนแบบพารัลแลกซ์อาจไม่ทำงานบนอุปกรณ์เคลื่อนที่/สมาร์ทโฟนเสมอไป อย่างไรก็ตาม คุณสามารถใช้คิวรี่สื่อเพื่อปิดเอฟเฟกต์บนอุปกรณ์เคลื่อนที่ได้ (ดูตัวอย่างล่าสุดในหน้านี้)
วิธีการสร้างเอฟเฟกต์การเลื่อนแบบพารัลแลกซ์
ใช้องค์ประกอบคอนเทนเนอร์และเพิ่มรูปภาพพื้นหลังให้กับคอนเทนเนอร์ที่มีความสูงเฉพาะ จากนั้นใช้ the 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;
}
}