ในการสร้างเอฟเฟกต์การเลื่อนแบบพารัลแลกซ์ด้วย CSS โค้ดจะเป็นดังนี้ -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
height: 100vh;
margin: 0px;
padding: 0px;
}
.parallax {
background-image: url("https://i.picsum.photos/id/250/800/800.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallaxText {
font-size: 20px;
height: 100%;
}
</style>
</head>
<body>
<div class="parallax"></div>
<div class="parallaxText">
<h1>Some random text</h1>
<h1>Some random text</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, praesentium assumenda
illum nisi minima libero accusamus adipisci aspernatur architecto qui aliquam quo similique
eos vitae. Cum iste laboriosam vero excepturi eum sed ex fuga repellat accusantium officia
rerum ducimus sequi maiores reprehenderit veniam corrupti, aspernatur explicabo nesciunt
architecto voluptate! Consectetur.
</p>
</div>
<div class="parallax"></div>
</body>
</html> ผลลัพธ์
รหัสข้างต้นจะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อเลื่อนลงมาเล็กน้อยจะเห็นเอฟเฟกต์พารัลแลกซ์ดังที่แสดง −
